Approach any design agency today and they will talk about Responsive Web Design (RWD), but what is a responsive website? A key feature is that a responsive website will adapt to fit the screen size of any device no matter if it’s a 20-inch desktop computer, or a mobile phone.

A trip back in time to 2007

Until recently this wasn’t always the case. Websites were designed at a fixed width, like you would design a poster or leaflet. If the computer you had was the same size or larger it was fine. But if you used something smaller like a mobile phone, good luck!

Before 2007 the Internet was almost exclusively accessed using laptop and desktop computers. Then Apple launched the first iPhone. Suddenly a small, handheld device could do the same things as your 20-inch desktop, crucially one of which was to access the Internet. But there is an obvious problem. If websites are 960 pixels wide and a mobile screen is 320 pixels wide how do you make it work?

Two solutions emerged:

The first was to let the user zoom in and out on the iPhone. A website would load zoomed out, so you could see it as a whole and then the idea was that you would zoom in to read or click on links.

The second was to create mobile specific versions of the “full” website. This treated mobiles as a special case. If you've ever ended up at an m.domain.com you are looking at one of these websites.

Both of these were frought with problems. Zooming in and out is tedious. Creating a mobile specific version of a website meant companies had two systems to maintain. It also led to an unfortunate and common side effect where the mobile version was a stripped down and impoverished version of the “full” website. The logic of creating a specific version for a given type of device fell apart when tablets emerged. Do you create a tablet version of the website? t.domain.com? What about Internet endabled TVs? tv.domain.com? how about watches? watch.domain.com?

Illustration of a website on four different devices

Enter Responsive Web Design

The elephant in the room was to design and build websites with fixed widths. Zooming in and out was a hack that ignored this problem. Making mobile specific versions extended this problem.

Both of these solutions failed as neither grasped that the Internet is a fluid medium. The screen size of the device you use to access the Internet can be any size. It could be a desktop monitor. It could also be a mobile phone. StatCounter reported in October 2016 that mobile usage to access the internet surpassed desktop usage for the first time.

The premise of responsive web design was to design a single website where the content would flow to use the available space. What device a person happens to use in principle is irrelevant.

Of course there are technical challenges to making this work. Elements like text scale easily, but images don’t. Links need special consideration, as using a mouse on a desktop is very different to using your fingers on a touchscreen.

The most obvious aspect of responsive web design is that the layout of a website can change. A small screen has limited space and in general is a single column. But as screen width increases the layout can change to add more columns and even change the order of items. A welcome side effect is that responsive web design forces you to consider what content is a priority and what isn't. This leads to better more focused communication.

While responsive web design is fundamentally a technical term, it embodies a significant principle: content should be accessible no matter what device you use. As well as being ethical this is also practical. New devices will be brought to market and a responsive website will be just as useable without any extra work. Responsive web design represents a more robust Internet for all.

Like what we do? Well, what are you waiting for...