The number of people perusing the web on mobile devices is growing at an incredible rate. Ericsson, the mobile handset company, reported that from the second quarter of 2010 to the second quarter of 2011 mobile traffic more than doubled. The number of users in the US alone who use the internet via a mobile device grew 19% over the past year (via Gigaom). The Times of India recently reported that the number of mobile phones in the United Kingdom is now greater than the number of people there; not only that, but 27% of the adult population in Britain now uses a smartphone. It’s becoming clear that mobile browsing isn’t only here to stay, but it’s here to change the way we consume media. What does this mean for content creators and designers? In short, we must shift with the tide and begin thinking about content in a more holistic, inclusive fashion. Enter responsive web design, the latest buzzword taking the web design community by storm.

Let’s let websites react to their surroundings

Responsive, or adaptive, web design is a relatively new way of approaching the multi-device world we now live in. Previously, it was common practice to build two or more separate experiences for a website: desktop browsing, mobile browsing, and maybe tablet browsing. Each device has a different context and so a different layout and different focus of content. However, this can create huge headaches for experience designers, developers, and users. Each separate experience requires its own design thinking, its own interface design, and its own development cycle. What a drag. At its base level, responsive web design is about designing and building an experience once and letting the site adapt to the screen size that a user is browsing on. This means one experience with slight modifications for desktop, tablet, and mobile browsing. Besides the obvious savings in thinking time, this saves users from having to readjust to massively different experiences for one site each time they switch contexts.

Wait, isn’t that just fluid web design?

Yes, but with some added bells, whistles, and thought processes. Responsive web design relies heavily on a bit of code called a media query. Essentially it is a way to target minimum or maximum screen widths—among other variables—for the purpose displaying different layouts. One site can have several different configurations of the same content, each tailored to a different viewing context. MediaQueri.es is a great gallery site with examples of this layout switch in practice.

The above screenshot was pulled from their gallery and is a great example of one site adapting to whatever context it's being viewed in. (via http://mediaqueri.es/fse/)

Putting mobile first

There is another component to responsive web design beyond media queries. The phrase “mobile first” appeared shortly after responsive web design and is a continuation of the principles that drive responsive sites. Mobile first urges content creators to start with the mobile version of an experience and then expand outward for tablet and desktop experiences. The mobile version of most digital experiences should contain all of the most pertinent content and be the most distilled, “true” version. By starting with the most focused context, designers can more quickly pinpoint important messages and themes that affect the whole content creation process.

(Mostly) ready for prime time

As with most web technologies, responsive web design is semi-reliant on adoption from the various platforms on which users can consume content. The good news is that many desktop browsers already support media queries. Every modern desktop browser supports them, which leaves out Internet Explorer 8 and less. Support on mobile devices is even spottier; While mobile Safari supports media queries just fine, only the latest versions of mobile Opera (version 5+) can handle them. All versions except the first Android browser supports them. Only the most recent versions of the Blackberry browser support them.

That being said, even without media queries responsive web and a mobile first perspective can be incredibly valuable. Some brands are already embracing this new way of approaching the web. The highest profile example is BostonGlobe.com:

(via mediaqueri.es/bg)

No matter what context from which one views the Boston Globe, the general layout and feel is the same. Only a few things switch between different layouts: the width and number of columns, font sizes, and image sizes. It no longer matters if you’re on the couch watching TV and browsing on your phone, or at work and catching up on the news from your desktop; your experience with the Boston Globe online is consistent, accessible, and optimized for the context.

Next steps

The world of responsive web design and mobile first design thinking is a new, exciting, and loud one. Here are some resources that have been helpful to me in discovering the benefits of these new techniques and also how to implement them:

• Responsive Web Design article by Ethan Marcotte
• Responsive Web Design book by Ethan Marcotte
• Mobile First book by Luke Wroblewski
• Any article by Luke Wroblewski, but especially Multi-Device Web Design: An Evolution
• Content Choreography by Trent Walton
• Design for the changing web: Responsive Web Design, Design for the changing web: Our response, and Design strategy for the changing web all by Mark Mitchell