What is Responsive Web Design?

December 20th, 2011 by Rich Barrett

You might have heard the phrase “Responsive Web Design” thrown out in discussions about mobile-friendly websites recently. If you haven’t then you probably will in the coming year. The concept and the name itself has only been around for a short time dating back to this A List Apart article written by Ethan Marcotte and there’s a limited number of examples out there in the wild to study. But that’s changing rapidly.

Previously, the trend for mobile web design was to create separate mobile-friendly versions of your website for each of the most popular screen sizes. They might utilize the same content across all the sites but they still require their own URLs, the ability to detect the device being used and of course the need to make updates across all sites. And then there are mobile apps which are a completely separate entity from the website (though again maybe sharing the same content).

In a nutshell, Responsive Design is the concept that, in order to accommodate the various screen sizes we view the web on, it is possible to design one website that adapts — or “responds” — to its environment and re-formats its content on the fly to create an optimal viewing experience for the device you are using.

How Does it Work?

The beauty of Responsive Design is that it is a technology-lite solution. It relies on a feature of CSS called the “media query” that allows you to call different stylesheet attributes depending on the detected screen-size and orientation of the device the website is being viewed on. For instance, you might want to design your website to have three columns of content for desktop viewing. But that would be hard to read on an iPhone. With a media query, you can switch to a different stylesheet or call a set of attributes within one stylesheet to set your content into a single wide column by detecting the width of the screen like this:

 

@media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
 /* Add your styles here or call a specific stylesheet */
 }

You can get very specific with the way you breakdown your media queries and call up styles for various screen sizes. You can grab a free media query template here to get yourself started: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

That seems pretty easy right? Well, that’s just the most basic technical background. Responsive Design is a new way of thinking about websites. We must no longer think of a design as being a fixed layout that we try to make look exactly the same across every browser. It now becomes a more malleable depository for our content that will adapt to fit the way the user wants to consume that content.

What does it look like?

One of the neat features of Responsive is that you can very easily see the different iterations of a design while viewing the site on your desktop browser. For all the following examples slowly resize your browser down to approximately a mobile phone size and watch how it reformats itself.

BostonGlobe.com 
At the time of this writing, the most high profile use of Responsive is probably the new Boston Globe website which was designed by the father of Responsive Design himself, Ethan Marcotte. Pay particular attention to how the functionality of the navigation changes in each iteration.

Colly.com
One of the early and really nice examples. This shows how you can move from a multi-column to single column approach.

Think Vitamin
A good example of how the desktop version allows for more ancillary content (like topic links, social media links) while the mobile versions simplify to the bare essentials.

Deren K
Notice how the desktop version allows for embellishments like large headlines and slideshows but as you scale down the emphasis gets placed on navigation and essential content.

Reveal
For WordPress fans, the Reveal theme is a very cool Responsive friendly theme.

Foodsense.is
A very clean editorial style design that changes in a lot of sensible ways as you move from desktop to mobile.

Should I be using Responsive Design?

Everyone should have a mobile plan for their website. More and more people are accessing your content via a phone or a tablet device. Responsive is the latest solution for accommodating the multitude of needs mobile ends up requiring. Until the next thing comes along this is the solution that most designers and developers will be adopting for new websites and site redesigns in near future.

Is it perfect for everyone? Nothing is but Responsive does have some limitations and complications to consider:

  1. Time and budget – Honestly, this can be said for almost any website that considers mobile viewing : We are no longer producing one site design and the design process is now much longer and more complex than it used to be as we need to consider at least the most popular device sizes for your particular audience and how to adapt your design to those sizes. This can have a pretty big impact on your budget.
  2. Image file sizes and data load – Using the “max-width” CSS attribute on images means we are scaling down large desktop-friendly images to visually smaller mobile-friendly images but forcing the mobile user to download the same amount of data. Even hiding the images for the mobile-size doesn’t help because the images still need to get downloaded whether they are shown or not. The same goes for excessive code that may not even be needed for the mobile site. Whether it’s used or not it still gets downloaded.
  3. Content Type and the Needs of the User - It may not always make sense to replicate the same content from web to mobile. Your mobile users may have specific needs that differ from your web users and making them sift through all the content your website provides may prove to be a hindrance to those needs. Therefore pushing them to a separate mobile-version or even an app would make more sense.

Where can I learn more?

A good place to start is at the beginning with Ethan Marcotte’s book from A Book Apart, Responsive Web Design or even his article I mentioned previously on the A List Apart website: http://www.alistapart.com/articles/responsive-web-design/

Smashing Magazine has a very thorough guide with some technical tips:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Brad Frost has an excellent blog post about Responsive and the need for “Mobile-First” thinking when it comes to website design
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

If you’re not sure if Responsive is right for you, this article on Web Design Shock may talk you into not using it: http://www.webdesignshock.com/responsive-design-problems/

And for even more info, Web Designer Depot has the ultimate roundup of responsive design articles: http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/

 

  • Mchup2003

    This is a really informative article. Thank you.

  • http://twitter.com/xbs ronan cremin

    Responsive design isn’t a bad way to achieve “resolution independence” i.e. moving pixels about and squeezing the site down such that it fits on the mobile screen. But if that’s all you want to achieve from your mobile site you’re missing out—if you really want to deliver a good mobile experience to the end user you should be catering to their device and their use case by detecting the device and adapting to it. PITA? Yes. Opportunity? Definitely.

    85% of the Alexa top 100 sites use this approach. Why? Because if mobile is important to you it’s the approach that works best.

    Full list of mobile content adaptation approaches is described here: http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques

  • http://twitter.com/RichcBarrett Rich Barrett

    Ronan, thanks for the comment. You make a lot of good points in your own article that you linked to, some of which I briefly mention in my section about why responsive might not be right. I think whether to go responsive or whether to develop multiple device-specific mobile sites probably depends on individual project needs.

  • http://twitter.com/xbs ronan cremin

    Rich,  agree with this, it depends entirely on the project and, as ever,  there’s no one right approach. As an example of this, the Boston Globe responsive site works very well because the use cases for a newspaper site are more perhaps more limited than (say) a social networking site. I suppose that my main point was to try to ensure that people don’t think they’re done just because the site renders well on a phone—because to do so is missing some of the fantastic opportunity that mobile web presents if you think beyond just shrinking down.