What is a 'Responsive' Web Site?

Written by Adam Wallace on 6th July 2012

(Last updated 11th March 2016)

1 comment
What is a 'Responsive' Web Site?

The Problem

While most web designers have the luxury of designing to an expansive 27” screen, the truth is that web users are no longer keeping their browsing solely on the desktop.

More and more are browsing on the go, on iPads, tablets and mobile phones, all of which are running fully capable browsers, but all of them have their own screen sizes.

Mobile browsing is expected to overtake desktop-based internet access within the next three years. Therefore, it's important that your website is delivering all its juicy content to the user in the clearest, most accessible way possible, regardless of device or screen size. Serving a desktop version of your website to a mobile is not the best way to deliver your content. Making your users zoom in and out of the page to get to content isn't a very enjoyable experience, so a 'one size fits all' approach is no longer an option.

The Solutions

There's a couple of popular ways to deal with this problem:

  • Mobile website - Create a separate mobile version of the site that is served when the device is detected. BBC News is a good example. This approach works, but demands much more development time and means maintaining two totally separate sites.
  • Responsive website - Using CSS 3 'Media Queries' to build an adaptive website that takes into account the device being used and responds accordingly to present a good quality experience to the user. This is what's known as 'Responsive Design'. A website that responds to YOU the user.

This last approach has had a lot of attention lately and is now being used successfully by many web design companies. On the 20th June 2012 the W3C (the group in charge of web standards), gave the thumbs up to the foundation of responsive web design - CSS 3 Media Queries.

Check out this good example by Simon Collison: colly.com . Make sure you re-size the browser to see the content re-flow as the browser changes size. This is the way that the modern web should be working and will be working in the future.

The Responsive Approach

To make a site responsive requires an entirely new approach to web design. Instead of opening a 1024px by 768px blank canvas in Photoshop, the designer puts mobile before the desktop and starts creating layouts for the smallest device screen size first. Once the mobile layout is defined, the CSS Media Queries govern how page elements react when the user views the site on a larger screen size.

As always with the web, you can't keep every user, on every platform, on every browser happy. The people that are being left behind in the dark back streets of Internet Explorer 8 and below are not going to be invited to the party as they don't understand Media Queries.

It used to be that IE6 & 7 were the biggest headaches for web designers, but responsive mobile design brings a whole host of new challenges; testing on an array of devices and the splintered versions of Android OS, not to mention getting everything to look nice on Apple's retina displays.

Responsive design is not only a new technique — it's an entirely new way of thinking.

Responsive design is having a huge impact on the working methods currently being used across the web design industry. As with anything that's in an experimental phase, new discoveries and techniques are being tried and tested on a monthly basis. It is a constantly evolving technique and Liquid Light is delighted to be part of the exploration of this new frontier in web design..

To be continued....


Further reading

Who's doing it?

Loads more here

Learn more

This article was posted in Client Guides, Musings by Adam Wallace

Comments

Hey! Great post! Please when all can see a follow up!

Tamica13/04/2013 12:37

Post a comment

*
*

Sign up to the Liquid Light newsletter

Subscribe to our Newsletter and stay up to date with all things web related. It's crammed full of useful articles, tips and knowledge, invaluable if you have a website or are starting a new web project.