There has been a lot of momentum for creating Responsive websites recently… With the rise of Mobile/Tablet device usage the Responsive  movement has been kicked into high gear. What’s a responsive website you ask? According to Wikipedia:

Responsive Web Design (RWD) encapsulates many different ideas and technologies, but essentially it indicates that a web site is crafted to use W3C CSS3 media queries to adapt the layout to the environment that it is being viewed in. As a result, mobile (smartphone/tablet) users will have a similar experience and see similar content to Desktop users — but the content will be laid out in such a way to ensure that the content is readable without having to zoom or do any kind of resizing. Concepts related to RWD include “Fluid grids” and “Fluid Images”

Basically Responsive Web Design is the principle (some would say art form) of designing for mobile devices first and then using Media Queries in your browser to adjusting the display view of the website in question to adapt accordingly. Content adjusts to the width of the browser/device, images are resized fly, Navigation changes could be smaller text or become a hidden dropdown menu… the posibilities are only limted by your imagination.

I saw a tweet from @Malarky the other morning mentioning a new player in the Responsive Design front, the Swedish Broadcasters group. This is one of the first responsive designs I’ve seen that has push the boundries a bit farther than the rest. Primarily how they handle Navigation on the mobile view and drop everything inot a dropdown menu. I’ve recorded a screencast to show exactly what a Responsive site looks like.

Swedish Broadcaster’s Responsive Web Design


For more information about Responsive Web Design you can head over to a Book Apart and grab a copy of Responsive Web Design by: Ethan Marcotte. This is a great read, as are all the Book Apart books.