Responsive web design, a term and technique developed by Ethan Marcotte, is an approach that ensures a web page looks good on any screen size or orientation. This approach is becoming especially important considering the wide variety of devices that might display your web page today and in the future. Today, a user may be viewing your site on everything from a 320 x 480px smart phone all the way up to a 1680 x 1280px wide-screen monitor. Throw in all the upcoming tablet sizes (4.5 in, 10.1 in, etc.) that can be used in either portrait or landscape, and you can begin understand the diversity of visual platforms that you must now consider when serving up a site.
Responsive web design is primarily enabled through the use of a new feature in CSS3 called media queries. Media queries allow you to detect various parameters associated with the browser's view-port. Based on these parameters, different layouts, navigation and/or images can be served to the user from a single code-base. For instance if a user is using an iPhone in the common portrait orientation, media queries can detect the size and orientation of the device and serve up custom CSS to optimize the layout.
Example: Sasquatch Fesitival
The site styles for an iPhone sized screen emphasize branding and primary navigation links while teasing content to scroll to below.
This layout comes from the same code-base as the example above. The site styles for a wide screen view (1440 x 900 px) reveals additional primary navigation links along with more imagery and content.
The concept of responsive web design is not without its pitfalls. For instance, mobile browsers tend to load all of the content for the full size site while only displaying the mobile optimized content. Also, responsive web design requires more code to serve up an optimized page for a mobile browser, thus requiring more bandwidth and more CPU usage than would be necessary for a site coded for mobile only. Finally, there are browser support issues, as in it doesn't work in Microsoft Internet Explorer 6,7,or 8 and some non-WebKit mobile browsers.
I liken responsive web design to CSS table-less layouts back in 2005. It wasn't always the easiest to do back then due to various issues including difficult browser support. Today, few would even consider using tables for layout in a modern website. I believe the issues keeping responsive web design in the world of boutique web designs will begin to fall away as mobile bandwidth, CPU and browser support issues begin to disappear. The future of web design will be responsive, and this approach will likely be business as usual in the near future.
Learn more about Ironworks's Web Design and Usability practice and our Mobile Application, Strategy and Design practice.
ICF Ironworks is always on the lookout for experienced professionals who believe in hard work, having fun, and great client service.
Sign up to receive Ironworks' quarterly e-newsletter for the latest news, events, client successes, industry insights and more!
As I think more about mobile, I wonder if the best use of responsive layout should be in an attempt to do away with the concept of a mobile site completely. Design your site architecture so NOBODY downloads content they don't need, then use responsive layout to tailor the views to the screen size/orientation.
But in my mind it starts with architecture that gets the right content, and only the right content, to everyone, no matter how they're coming to your site. Why do we give mobile a clean simple site, and serve a 1MB stock photo to the desktop?
Posted by: Bikeboy389 | 05/02/2011 at 12:24 PM
Mark-
You last paragraph reminds me a lot of Luke Wroblewski's concept of design for mobile first (http://www.lukew.com/ff/entry.asp?933), which seems to be an ideal approach, especially when doing responsive web design.
It really is just another form of progressive enhancement. Get the content and functionality right for the lowest common denominator platform, and enhance based on browser capability, screen-size/orientation, etc.
Posted by: Larry King | 05/02/2011 at 12:38 PM
Responsive Design raises a lot of good questions about how we approach IA: how do you sketch a responsive interface using a static wireframe, for example. Design approaches have to be more modular by definition, and focus on individual components of a page layout as opposed to the overall landscape. Curious to hear if anyone has recommendations on tools.
Posted by: Colin Eagan | 05/03/2011 at 10:39 AM
Colin-
Good points. Modular design is key to making responsive web design work. The most effective ways to represent this type of approach early in the design process is an interesting problem I am looking forward solving!
Posted by: Larry King | 05/03/2011 at 01:32 PM
I am using this technique right now on a project. I really like it because I have covered just about every device within one style sheet and one javascript file. When doing IA for mobile a wireframe should just incorporate the basic areas you want to contain for a phone (the main content minus ads and other information that really isn't looked at much). The tablet devices and computers will more than likely have the same dimenstions (1028 x 768). So you just need to keep smart phone dimensions and dimensions that are a normal screen resolution to a larger one in your file. One last thing to note is don't get crazy with laying out information in a multicolumned table type of format. This might cause some headaches or for someone to create some javascript functions and server side functions to deal with displaying tables in a special page since the information inside will more than likely break the mobile layout.
Posted by: Chris Seamon | 05/19/2011 at 09:07 AM