7 October 2015

What is Responsive Web Design?

From the first days of the internet, all the way through the 90's and early 2000's most web design took it's cues from magazines and print media. Websites were designed for one fixed size of display. As screen technology improved sites were gradually redesigned over the years for larger and larger screens as high resolution monitors became popular, but typically they still used fixed layouts.

On June 29th, 2007 a change started. Apple release the first generation of iPhone. Although smartphones existed before then, the iPhone was the first one to make it to the mainstream. Although it wasn't immediate, the growth of iPhone and Android over the following years meant that the web now had a large number of users accessing sites with an entirely different size and shape of screen.

Screens on desk

In 2014 the number of mobile internet users surpassed regular PC users and those numbers only continue to grow - there really is no doubt then that today the population accessing the internet through mobile devices is simply too vast to be ignored.

How to deal with a mobile web

One important thing to recognise about the 'mobile web' today is that it does not refer exclusively to smartphones. The last five years has also seen an explosion in the number of tablets in the consumer space, a huge selection now available in increasingly varied shapes and sizes. The tablet market has in turn given rise to 'hybrid' devices (something between and tablet and a laptop), and on the smaller scale 'phablets' (usually a smartphone of such size that it resembles a small tablet).

The point essentially is that the web today is not viewed by the world through large screens and small screens - it is viewed through almost every conceivable size and shape of screen imaginable. Therefore the fixed layout approach is clearly no longer a viable option when building a website. Even building a completely separate mobile site, as was often the solution in the earlier days of the mobile web, is no longer ideal as it still neglects many of the mid-range screen sizes among the vast number now available (not to mention being uneconomical).

And so a new approach to tackle the problem was conceived. This would become known as 'responsive design'.

So what is it?

Responsive design means using techniques when building a website that allow the content to respond to changes in screen size. So rather than building multiple versions of a website, a single version is built which contains instructions that stipulate precisely how certain elements should be arranged depending on the size of the screen it is being viewed on.

Take this series of screenshots as an example. Each of the three screens is displaying exactly the same webpage. On the large desktop screen, the three numbered boxes are displayed side-by-side as there is ample width on the screen to do so and for the content to still be readable. On the tablet, the browser automatically adjusts this layout for a smaller screen size, displaying only two boxes side-by-side at a time, and on the smartphone with a narrower screen still the boxes are stacked vertically.

Responsive screen layouts

The responsive approach has brought with it significant benefits. Web designers now have much more control over exactly how visual elements will appear on screens of all sizes. Also though, this can be achieved while still building and maintaining only one version of a website. This makes the whole process more efficient and economical which in turn means web designers and developers are in a position to deliver more to their clients, and hopefully the end result is that the general experience of using the web is improved for all.

So if you're thinking of having a new website built, be sure to ask if it will use responsive design. These days there really is only one right answer.

Want to see more stuff like this? Enter your email address below to sign-up to our mailing list. We promise we won't spam you!