Experience Management Blog

Responsive Web Design, Mobile First, and the Future of Content Consumption

A thought context shift

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.

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.

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:

  • Jeff

    Scott Jehl’s talk “Responsive and Responsible” from the Breaking Development Conference September 2011 – another good resource – http://2012.bdconf.com/pastevents#nashville-jehl

    • http://dachisgroup.com Lindsey Kirkbride

      I haven’t seen that yet but it looks excellent. Great find!

  • http://www.visionmobile.co.nz Luke

    I think I understand this these two approaches fairly well. However, I do have a few issues with the responsive web design approach:
    1. People want different content when they access info from a mobile device, and they have different expectations. Generally, mobile surfers want answers! They don’t want to surf. Consequently, a so called ‘mobile first’ approach will generally have too much content for a mobile website but not enough for a PC website. This then brings me to the next point . . .
    2. Mobile is a different media and has different rules to play nice. We struggled in the early years of the web with trying to put ‘print design’ on the web until we figured out that it was a different monster. I think that the ‘mobile first’ approach is falling into the same trap.

    • Josh Broton

      I completely disagree! Maybe 3 years ago, people wanted nothing but answers, but today, people are using mobile/tablet devices as their PRIMARY device. Look at the newest statistics. By 2013, mobile browsing will surpass desktop browsing, and over 50% of people will use mobile devices as their primary browsing device. Looking forward, the number and percentage of people that use mobile as their primary (or even their only) means of web browsing will do nothing but increase. Responsive design puts you ahead of that curve now, rather than being reactionary later.

  • Pingback: If it’s too complicated for mobile, it’s just too damn complicated « John Biesnecker

  • Fred Boulton

    Hmmm, seems strange to me to have this great article about responsive Web design on a site that isn’t responsive!

    Just thinking out loud!

    • Peter Kim

      Hello Fred – acknowledged. We recently refreshed the site and had a fully responsive design ready to go live. However, some plug-ins presented issues, so tradeoffs had to be made. So the future of web design is here…but the sophistication of its backend components have some catching up to do.