Responsive Design

Posted on 06. Jul, 2012 by in Stats & Trends



Hopefully everyone with a professional interest in the web will have been aware of responsive design for some time now, but for the uninitiated, responsive design is a means of adapting a single website to all kinds of display devices via CSS media queries.

A great example of responsive design in action is the Boston Globe’s website: go ahead, open it up, re-size your browser and watch how content is re-arranged and compacted to suit the available space. In short, it’s a blend of the “fluid” and “static” design approaches we already know and love, offering the structural certainties of the latter with the flexibility of the former.

Responsive web design on desktop, iPad and iPhone

Responsive web design on desktop, iPad and iPhone (image credit: axbom via Flickr)

With Google’s recent endorsement of responsive design as “industry best practice” for desktop and smartphone content, this technique is much more than just a cool toy for designers. So how does it work, and what are some of the considerations for webmasters and SEOs?

How does it work?

In short, responsive design works by using media queries in CSS to deliver certain page styling rules only under certain defined circumstances, such as a given browser-width or a display in portrait orientation.

In the simple example below, the “normal” CSS rules set a black page background with 14 pixel white text. The second set of rules (inverted colours, smaller text) is within a media query set to detect a maximum screen width of 320px.

/* Normal CSS rules */
body {
 background: black; /* Page background is black */
 font-size: 14px; /* Text size is 14px */
 color: white; /* Main text colour is white */
 }
/* Responsive CSS rules */
@media screen and (max-width:320px) {
 body {
 background: white; /* Page background is white */
 font-size: 12px; /* Text size is 12px */
 color: black; /* Main text colour is black */
 }
 }

So the rules within the media query can be written to add to or supersede the “normal” CSS; there’s no need to re-state fonts, colours, sizes etc., but within each media query you can add completely new rules or amend existing rules.

Using this principle, it’s possible to design a website to adapt in response to any number of conditions, for instance properly filling a widescreen desktop browser or simplifying complex pages for display on smartphones.

For a fuller technical explanation, along with a good discussion of the context, I highly recommend Ethan Marcotte’s article at A List Apart and his book, Responsive Design.

Why use responsive design?

It’s not long since almost everybody viewed the web in a very narrow range of resolutions. Consequently, to design a website to the lowest common resolution – say 1024×768 – was a perfectly reasonable approach.

But things quickly changed. Now, your website could be viewed on anything from a 6 foot wide plasma TV to a 4 inch smartphone, and as anyone who’s struggled with pinching and zooming a desktop site on their smartphone knows only too well, the one-size-fits-nearly-all approach no longer makes sense either for users or producers.

What about device-specific sites?

Device-specific sites – those designed specifically to work on smartphones or tablets, for example – plug a sizeable gap by offering an optimised user experience for these types of devices, but can entail operating a separate, additional site alongside an existing “desktop” site. This can mean additional costs, potential for duplication of work and complex SEO challenges, especially if the content is served on separate URLs.

Moreover, having been designed specifically to meet the needs of today’s devices (current smartphones, tablets, etc.), today’s mobile-specific sites may need substantial re-optimisation when the Next Big Thing comes along. Given that tablet devices like the iPad, for instance, have been around for only a couple of years, that’s a significant consideration.

What about browser compatibility?

Usually, cool website features come at a cost of limited compatibility. There is an element of that here, but the good news is browser support for responsive designs is very good. Based on my rough calculations (data from StatCounter), around 72.5% of people worldwide are already using a compatible desktop browser. In brief:

  • All major mobile browsers fully support media queries
  • Current versions of all major desktop browsers – even Internet Explorer  – support media queries
  • For Firefox, Chrome, Safari and Opera, support dates back several versions

Where a user’s browser isn’t compatible, the media query should, in most cases, be ignored. So as long as the “default” CSS is optimised to suit a website’s core audience, compatibility issues should be minimised. For more insurance against nasty results in old versions of IE, version specific CSS can be delivered via conditional statements:

<!--[if IE 6]>Special instructions for IE 6 here<![endif]-->

What might this mean for SEO?

There are some important benefits of responsive design for practitioners of SEO.  First and most obvious:

  • The benefit of all of your URL optimisation, link building, social media campaigns and so on is focussed on one site and one set of URLs
  • Your site’s visitors see content optimised to their devices
  • It can be done with pretty simple, and therefore pretty robust, techniques

And from a search engine point of view, it makes things easier for Google as “[they] can discover your content more efficiently as [they] wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content”.

Bing, meanwhile, has a “one URL per content item” policy. In other words, they’re not keen on sites having different sets of URLs to suit different platforms, so in circumstances where a significant amount of a site’s traffic is coming from Bing, responsive design looks all the more attractive.

There will be scenarios where responsive design is not the right choice; for example, instances where site content needs to be fundamentally altered to deliver the best experience to a mobile audience. But on the other hand, perhaps such instances are better served by apps?

In short, it’s an exciting time for mobile web. So what do you think? Is responsive the way forward? When might a device-specific approach win out, and what kind of SEO benefits and challenges do you foresee?

Tags: , , , , ,

  • http://about.me/andrewgirdwood Andrew Girdwood

    Great post. Responsive design will become more important as the range of connected devices increases. In particular, designing a site that so it looks good on mobile, desktop and connected TV will be a challenge but important too.

    • Glynn Davies

      Thanks Andrew! I’m certainly starting to see some very strong efforts in that regard… I just hope that endorsement from Google will encourage more sites to make the switch!

  • http://twitter.com/TheJW Joe Wyman

    Hi Glynn, great post!

    Responsive design is certainly the way to go. With mobile browsing numbers looking set to surpass desktop browsing by 2015, if your site doesn’t look good on mobile, it’s going to become an issue. The SEO benefits you mentioned should only further make up your mind to go responsive in my opinion. Sure it won’t work for everything, companies will need to ask themselves what people are likely looking for on their site if on mobile. If this experience dramatically differs from the desktop then having a separate mobile site is still the best bet; if the experience is the same however, why would you want to split your traffic?

    • Glynn Davies

      Thanks Joe. That’s definitely the interesting (read: quite difficult) bit: understanding how usage and intent differs by device and how that needs to inform design decisions. But, yes, in general, there’s less and less to excuse a lousy mobile experience many sites continue to offer.

  • Pingback: Tailoring Your Digital Marketing Future