What is Responsive Web Design?

First published 2014

For a long time we accessed the web by sitting in front of computer screens at desks and web sites were designed to fit those screens. Life was simple. Those days are long gone though. Most of us now access the web through many devices; phones, iPads, laptops, TVs and over the next few years who knows what else.

Sites designed to fit desktop screens are often difficult to use on these new devices, particularly phones or smaller tablets. Pinching and zooming got us through for a while but it was never a good long term solution.

What can we do about this?

One solution is to create separate desktop and mobile sites with a big wide site for desktop computers and a slimmed down site for phones. This can be a good solution in certain cases but it does come with some problems.

Firstly, there are two separate sites to build and maintain which obviously impacts time and cost. Secondly, and perhaps more importantly, it just doesn't adapt well to all the new devices that are constantly being released, mid sized tablets, netbooks, extra large phones. None of them quite fit into either category well.

We need something more flexible

Flexibility is one of the main principles behind Responsive Web Design: create one site that expands and contracts to the size of whatever device it is being viewed on. It seems so simple you can't believe we haven't been doing it for years!

Actually, it's not as simple as it sounds. It throws up some tricky design challenges and the web browsers we were using a few years ago weren't really up to the task. We've had to wait for a while for technology to catch up. Modern browsers have made it possible though and many large companies now use Responsive Web Design on their sites.

How does it work?

The best way to see how Responsive Web Design works is to see it in action and the easiest place is right here because this site is designed responsively. Try viewing it on a smartphone or tablet and compare that to how it looks on your laptop or desktop computer. If you don't have a smartphone but are using one of the modern browsers (Chrome, Firefox, Safari, Internet Explorer 9) just grab the bottom right corner of your browser window and drag it backwards and forwards to see how the layout adapts.

Responsive Web Design enables us to adapt our sites to fit any size screen making it clear and easy to use everywhere. Doesn't that make sense?