Lately I’ve become fascinated with responsive web design, a technique that presents a more flexible website capable of conforming to the device you happen to be using at the time. A responsive website will be optimized for desktops, tablets and mobile devices. This is more complex than you might think at first, because many touch screen devices (like iPhones and iPads) have two different screen orientations: portrait and landscape.

There seems to be some debate in the web design community regarding exactly how this flexibility can be accomplished. However, there isn’t much debate about its usefulness. One platform served to many devices is the holy grail of publishing.

I won’t try to tackle that debate in this blog post, but I will show you some of the most useful tools and resources I’ve found in my own research. Here are some of the best resources I found for responsive web design:

1. Ethan Marcotte’s A List Apart article on responsive design kicked off the conversation about this technique. He discusses CSS media queries to determine screen size and enabling and disabling floats with that technique. This was the earliest resource I could find on the subject of responsive design. Ethan also wrote the first book on the subject, called “Responsive Web Design.” He also helped redesign the Boston Globe’s website to use responsive design principles (from my screenshots above). You should visit Bostonglobe.com and play around by resizing your browser to see it in action.

2. Jason Grigsby, VP at Cloud Four, a Portland company specializing in mobile & web solutions, wrote several great blog posts about responsive images and the challenges that surround them. You can find the series of articles broken into several parts (part 1, part 2, part 3). These articles cover some of the basics of responsive images, like delivering the mobile image first and upgrading to the desktop image when appropriate to conserve bandwidth for the user. He also links to several good articles on how to handle video embeds, data tables and third party widgets (ie. Twitter, etc) in a responsive way.

3. Think Vitamin’s “A Beginner’s Guide to Responsive Web Design” is a great place to start if you’re looking for a quick overview of the concept. The article covers fluid grids, media queries and some additional resources as well.

4. DesignMondo’s 50 examples of websites using responsive design – this blog post is a great place to see a nice sampling of websites using responsive design. The screenshots show details of how the sites change in desktop, tablet and mobile devices (in portrait orientation). DesignMondo also has another great post about tools and services that will help you create, test and implement a responsive design. One of my favorites is ScreenFly, a quick and easy way to test your design in multiple devices and orientations (portrait vs landscape). It’s free and useful for testing a lot of devices quickly.

5. Smashing Magazine’s “Responsive Web Design Techniques, Tools and Design Strategies.” As with most Smashing Magazine articles, this one is very thorough, but probably not a good starting point until you know a little more about all the components of responsive design. For instance, there is a very useful link to an article on how to debug CSS media queries. However, you would need to know what a media query is before you learn to debug it.

6. WordPress and responsive design. There is a great 30min video by Sara Cannon from Wordcamp San Francisco 2011. If you use WordPress (and I do) you’ll want to watch this short video to see how you can adapt your WordPress blog to use responsive design techniques.

7. The HTML Boilerplate – This is a free template using HTML5 and some responsive design techniques. If you want to play with HTML5 responsive design, you can download the code from their Git repository.

There are many other resources available for responsive design. However, I found these to be the most useful. If I’ve missed any that you think should be on the list, please feel free to post them in the comments below.

Thanks

A new temperature-sensitive varnish developed by researchers at French company Eurovia can be applied to road surfaces to warn drivers about dangerous conditions. The technique – still at the testing stage – might help prevent ice-related traffic accidents in future, the researchers say.
Full article.

I love ideas like this. So simple, yet brilliant. This will likely save lives if used in climates conducive to black-ice.

(Via Reaction)

So far, I love the way it handles comments in the dashboard as well as the publishing status.

Very nice.