Responsive Web Design and Media Queries

The term Responsive Web Design was coined By Ethan Marcotte to describe a new technique for providing alternate layouts for multiple screens sizes within a single HTML page. In his article on A List Apart Ethan details how to use Media Queries (part of the CSS3 spec) to use different styles for the page based on the width of the browser window.

It is easiest to see the effects in his demonstration page by adjusting the width of your browser window. You will notice that his fluid grid snaps to a new layout when the window’s width is 480 pixels or less. You will see the same layout on your iPhone or Android phone.

Since the release of this article, there has been a good deal of discussion about the technique. I’ll review some of that after the jump.

It has been well received by web designer/developers who want more control over their layouts on different screens, but whose technical options may be limited to HTML/CSS and JavaScript. The basic technique, has been extended to create layouts that show and hide content and functionality based on the size of the screen.

There has also been a reaction against the technique by those who argue that alternate sites or dynamic, server-side templates are a much better way to provide alternate layouts and interactive experiences based on the browser (user agent) being used. They point out that offloading this logic to the client has two fundamental issues:

  • It relies on support for Media Queries and if you are targeting things beyond the most capable mobile browsers, the technique will not work.
  • It adds both code and image weight to the page. This is particularly negative when you consider the limited bandwidth, ram and processing speeds of mobile devices.

There is no way around the first point. If you are going to be targeting low-medium tier smart phones and feature phones with alternate layouts, an alternate “m-dot” site or agent detection on the server-side is required. To a certain extent, the second issue can be worked around, but requires using JavaScript as well as some very specific markup (read the article and comments here and here for details).

Challenges aside, this is a really useful technique and well worth familiarizing yourself with.

It is appropriate for use in many small to medium sized sites so long as you are aware of the impact your specific design has on the download time.

In cases where this technique is not appropriate as the sole solution for supporting multiple screen sizes, it can be used to simplify prototyping multi-screen support as well as to adjust the layout for different circumstances within individual browsers.

For example, when detecting an iPad on the server-side, you won’t know the orientation of the device. Using Media Queries, you can provide a layout optimized for the iPad that can further adjust to the orientation of the device. This combined approach gives you the best of both approaches.

Further Reading
If you read one article, this should be it:
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Next, read the original:
http://www.alistapart.com/articles/responsive-web-design/

If you want more still, read the response to that first article:
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

Examples of Responsive Web Design
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-linearize.html
http://hicksdesign.co.uk/
http://2010.dconstruct.org/
http://colly.com/
http://miniapps.co.uk/blog/post/adaptive-css-layouts-using-media-queries/

Leave a Reply

Your email address will not be published. Required fields are marked *