Responsive Web Design – It’s All About the Context

November 21st, 2011 - by Chris Neigh

Recently I came across an infographic published by Microsoft addressing the usage of mobile phones in 2011. It is projected that in 2014 mobile internet usage will surpass that of traditional desktops. Interestingly, the infographic doesn’t even take into account tablet internet use. It comes as no surprise that mobile and tablet internet use is something to be taken seriously. This is where Responsive Web Design comes into play.

What is Responsive Web Design?

Responsive Web Design, a term coined by Ethan Marcotte, is the practice of using fluid grids, flexible images and media queries to progressively enhance a web page for different viewing contexts. This approach can eliminate the need to develop separate sites for various devices and screen sizes, and results in only needing to support a single interface. Take a look at this example.  If you increase or decrease the width of the window, the elements of the page adapt in a manner relevant to the new window size, instead of forcing the reader to use a horizontal scroll bar to read the site’s content.

It’s all about the context

A word that is mentioned quite frequently when discussing Responsive Web Design is context. What exactly does this mean? In web design, the word context refers to an element’s size relative to its parent.

For example, the sidebar on this page is 238px, and the overall width of the page is 920px. In a responsive design, a max width of 920px could be specified. The target width of 238px for the sidebar would then be divided by its parent, 920px (the overall width of the site, or context) resulting in 0.258695, or 25.8695% of the overall width of the site.

This process is repeated for every element of the site, resulting in a design that will adapt to the size of the viewing area. A few great examples of this are The Boston Globe, Food Sense, and Ethan Marcotte’s site. Again, if you resize the browser window you will see each of these sites adapt and optimize the content to the viewing area that is presented.

Is it really necessary?

Sites designed with only desktop use in mind can be a nuisance to navigate on a phone, and at times even a tablet. As John Jones wrote in his post, The Need for Device-Optimized Websites, tablets and mobile devices offer features not available in standard desktop browsers. Being able to swipe through and tap buttons that expand to show content creates a completely different experience than that achieved by navigating a site using a mouse. In a study released by InsightExpress, the top three elements that most influence a user’s decision to return to a mobile website are load time, ease of navigation and quality of content. Responsive Web Design can help address each of these points by displaying content relevant to screen size.

But is it really necessary? The answer to that question is both yes and no. In this day and age, having a site optimized for non-traditional formats is a must if you want to have any shot in the years to come. However, Responsive Web Design is not the only option. There are plenty of websites that have developed completely different versions of their site for mobile and tablet devices (i.e. Facebook, Gmail, and MTV), but in many cases Responsive Web Design is the more practical option. It will cut down on development cost, make your site scalable for future media and will help keep a consistent (yet relevant to screen size) look for your site.

Responsive Web Design is still a fairly new practice, but in my opinion it’s something to be seriously taken into consideration when it’s time for development. Besides, how cool is it?

Recent Posts By Chris Neigh