Responsive Web Design

One website, many devices

Responsive Web Design is taking the interwebs by storm. It's a fairly new technique, or a least a technique that has only recently (2010) gained some mainstream recognition. This is mostly down to the very talented Ethan Marcotte and his brilliant article; “Responsive Web Design”, on A List Apart.

Producing a “Responsive Website” enables the user to have a more tailored experience, depending on their choice of device, wether that be an iPhone, laptop, Blackberry, TV, iPad, a different smartphone or a number of other devices.

What does it mean?

Users no longer just use desktop browsers to view websites and browse the web. They now already use a variety of different devices such as; iPhone, Wii, TV, Smartphone, iPad, Netbook and much more.

A responsive website can automatically tailor the page layout to best suit the users viewing device. Thus giving them the best and most seamless experience.

Give it a whirl! If you're using a desktop browser on a fairly large screen, try re-sizing your browser to see how the layout changes on this page. If not, take a look at this page on your desktop/laptop and then check it out on a mobile device.

Your website layout can magically change on large screen displays

To quote Ethan Marcotte:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

Optimise for mobile

There are many figures flying around the interwebs, like the one from Morgan Stanley (PDF link), posted in April 2010:

“Mobile Will Be Bigger Than Desktop Internet in 5 Years”

Using responsive website principals, one site can be created that dynamically changes to an optimal layout for a mobile device, or other platform. This is generally going to be more time (and budget) efficient than building and maintaining a separate mobile website.

This responsive method does not negate the need of having a separate mobile specific website. There is still very often the requirement and case for this, as you may want to serve up completely different experience, content and version on mobile devices.

For example, if you run a website for a travel booking site, your default website might contain a mixture of content like various promotions and deals, with the ability to search for flights and accommodation, plus adverts and other general information. Whereas on the mobile specific site, the user could be presented immediately with a simple interface directly into flight and accommodation searching and maybe a way to check the latest travel information or flight details.

There are a few instances when having a specific (none responsive) mobile website can be an issue. For example, say you are looking at a clothing site on your smartphone (m.marksandspencer.com) and see an item that a friend might be interested in, so you decide to forward the URL. Problem is, you've just send them a link to a mobile specific site and they happen to open that link on their desktop machine with a large screen display. They're now getting an experience that just doesn't make sense and is quite poorly laid out for a desktop.

Granted, this isn't the end of the world, but it will become an issue, especially with more mobile specific sites appearing.