Responsive Design Weekly #50

Welcome to week #50!

Cotton Bureau Responsive Preivew

Oh wow, we’ve reached a half century, and in another 2 weeks we’ll be celebrating the anniversary of the very first newsletter that went out to a whopping 18 users. I decided to write a blog postabout how the whole thing came about and to give you a better idea about my weekly process.

Ok lets get into those links

Headlines

RWDTXST: A New Toolbox: Secrets from Happy Cog

Happy Cog’s design process through their experience building a responsive site from beginning to end, including: kicking off the project, the collaborative design process, and the tools they tweaked along the way.

Our Sponsor

Responsive Design Summit

The online, live 3-day conference about responsive web design covering everything from performance, workflow, and much more! Register now w/ 20RDWEEKLY and save 20% off.

Articles

Designing for a Responsive Web Means Starting with Type First

Typecast is a fantastic tool for designing your typography, and they hit the nail on the head with a content/typography first design.

A guide for creating a better retina web

SVG’s, backgrounds, fav icons, this article goes into detail about implementing sites with retina considerations

Designing for high resolution Retina displays

A few techniques to help you along when designing sites for retina displays (mostly revolve around the use of media queries

The Responsive Web Design War Strategy

When I first saw this I have to admit I thought “Oh no, not another link-bait targeted bashing of RWD for hits”. Fortunately Alvaris does a great job at pointing out some common issues with RWD but goes on to explain why they are issues and how you avoid them. Hoorah!

Thoughts on Toggling a Responsive Design On and Off

Jordan believes that it can be a good thing to add an option to switch off responsive design and proposes another icon as a visual aid. As I’ve said in the past I’m not a fan of providing something that covers a poor implementation, instead just spend more time improving the design.

A suggestion for Responsive Design toggle icons

This is back to the “Should there be a responsive opt out option”. I don’t think so, but hey if there was

Go Vertical

Long and skinny viewports, like an iPhone in portrait orientation, are a natural fit for websites. Their width is perfect for single-column layouts, and their height works well for seeing a whole block of content at once. Turn that sideways, and things get a little weird.

Using decimal percentage values in responsive design

Divya takes a look at why we’re using so many decimals places when it comes to percentage based widths. why, Why, WHY?

Debugging Sass with Source Maps

There’s a great tutorial below about connecting CSS to scss in Chrome Web Development tools, but this is the future.

Sass Source Maps are the natural next step in tying CSS to the written Sass, but rather then using the comments within the CSS generated by Ruby it uses a JSON formated map that explains the tree.

Specializing yourself into a corner

Scott takes a look at his workflow and wonders whether his SASS/Compass only plugins are a bad thing for the community. I’m on the other side, I think you should build amazing things with the tools that best allow you to achieve your goals, then open that up for people to improve/copy in other areas

There’s more to the CSS rem unit than font sizing

You can use rem to scale some elements in a document while leaving others in place. An interesting guest post on CSS Tricks takes a look at this and other options

Responsive Web Design With Physical Units

This post looks at the theory of using a combination of min/max width along with pixel density to get a faux reading for physical device size.

Why Responsive Web Design isn’t enough, and how to fix it – Part 2

Tools, Tutorials, and Workshops

TOOLS

Define :: Responsive

A great way to explain responsive design to clients without putting up real websites. Simple move the slider bar along to see how the content reacts.

hull, Introducing sass-getunicode

This Sass plugin allows you to work with unicode a little easier in your css.

A Responsive HTML CSS LESS SCSS Framework

TUTORIALS

Create a responsive wireframe

A nice little tutorial about using Wirefy to build responsive wireframes. Personally I would approach Foundation and Bootstrap in the same way.

The Benefits of Responsive Email Design: A Crocs case study

Over the last six months in particular, responsive email design has begun to gain acceptance, with some verticals adopting the practice more quickly than others.

Letting users disable responsive layout

If you’re looking to give your users an eject button from RWD then this is the post for you.

I really like 456 Berea Street but totally disagree with the approach here. I think it’s a stop gap solution that is an attempt to hand hold where that really isn’t necessary. The only argument I could ever agree with is some customers not realising that the website is the same because of the layout difference, but I also think that comes down to inconsistent branding across viewports and user education </rant>.

How to make Chrome understand the SASS/SCSS in your rails app

Now you can find that pesky problem you see in web developer tools and trace it easily back to your scss file.

Pull Quotes with HTML5 and CSS

A great technique for including blockquotes without adding additional markup or repeating your content for screen readers. This also allows us to hide a pull quote if it’s not necessary on other viewports without feeling dirty.

WORKSHOPS

Typography in Responsive Web Design

In this workshop Richard Rutter will describe how to make web typography work across any number of different devices, and how it can and should be the basis of any responsive web design.

Responsive Bootcamp

A one-day workshop in Providence, RI with hands-on learning for how you can incorporate responsive web design into your current projects.

Responsive Design Studio

Interdisciplinary By Design With Sara Wachter-Boettcher, Aaron Gustafson & Jason Cranford Teague

Brad Frost Workshop – Reasons to be Creative

For those of you in the UK missing some responsive workshops we’ve got some good news. Brad Frost is heading to London in June to run a full day responsive workshop, highly recommended.

Inspiration

Cotton Bureau

This week our feature site is Cotton Bureau. The site is brought to us by the guys that run the United Pixelworkers site and is a beautifully simple design.

…and Finally

This could be most essential CSS3 media query you’ll need today

Please never do this on your site, but a funny little quip from Andy Clarke. Maybe instead make a full animation rotation so the content is still usable.

Sportsnet TV Commercial – Responsive Design

Oh dear. A responsive ad. Not a responsive ad, but an ad about a responsive site.

That’s all we’ve got from this week. If you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.
Thanks for subscribing and making it all the way to the end!

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>