Emily Strachan

An Introduction to Responsive Design

If you’re in the Web Development industry or you’re a keen techy, the chances of you being unfamiliar with the term ‘Responsive Web Design’ (RWD) are pretty slim. RWD is undeniably a buzzword within the industry, and has been ever since Ethan Marcotte debuted the term back in 2010 in his landmark article for A List Apart.

Despite it being the topic of conversation Responsive Web Design is surprisingly still not widely used in eCommerce, with figures showing a tiny 20% of the top 500 eCommerce websites employing RWD as of July 2015. However, with the UK awash with smartphones and tablets, these devices are now accounting for over half of all eCommerce sales, showing the growing importance of your business exploiting RWD.

So, what is Responsive Web Design?

In its simplest form, RWD is a combination of 3 main techniques that allow web pages to display in an optimised format across a wide range of devices including desktop computers, laptops, tablets and mobile phones:

1. Media Queries

Media queries are one of the most essential tools for serving optimised content to different devices – in essence they allow for CSS styling to be changed depending on the width of the user’s screen. For example, on smaller screens font sizes can be increased to give greater readability, and non-critical information can be hidden when space is limited in order to promote the important parts of the page and reduce seemingly endless scrolling.

2. Flexible Grid Layouts

Another equally important technique involves splitting the page up into columns of equal widths that are based on a percentage of the total screen width, and also rows to separate sections horizontally where necessary. This means that a grid structure can be used to cap the flow of the content and ensure the page does not display wider than the screen it is showing on. A different grid structure can be employed on different sized screens which means something that is half the screen width on desktop could, for example, go full width on mobile devices to give it extra prominence or make it easier to tap on.

3. Flexible Images

In 2016 we now have a few different ways to utilise flexible images but the most common is still the way Ethan Marcotte described it initially – display every image at its full size unless the grid structure (as above) forces it to be smaller. At that point the image should resize proportionately within the space allowed – so a square image would remain square but display smaller. This technique ensures that images are never “stretched” bigger than their actual size and consequently avoids horrendous pixelation!

An example of Responsive Web Design

Thanks to Justin Avery’s “Am I Responsive” project here is an example of a recently launched responsive Visualsoft site on a range of devices to demonstrate how the content has been optimised for each screen – you can check your own website here!


What are the benefits of Responsive Web Design?

Back in the day the alternative to RWD for multi-device capabilities would be fixed-width sites with a separate mobile-only site bolted on – in the last few years something around 980px has been a popular width to use in order to avoid alienating too many users. It isn’t the worst approach in the world, and does mean that generally a user would be viewing a site that has some level of optimisation for their device, however, RWD advances on this even further:

Device Coverage – The main benefit from a development point of view is that a responsive site should work for all screen sizes/capabilities rather than just one or two specific target devices (e.g. desktop and phone). As mentioned above, the trends for web usage are moving very much towards mobile and there are hundreds of possible devices that fall into this category.

Optimised Content – The user will always be served content appropriate to their device (no matter what they are using) which will improve their user experience and therefore a likely improvement in conversion rates due to increased engagement.

Easier Maintenance – In general the initial build of a responsive site will take longer due to the extra complexity of building for all devices. However, it does mean that fixes or upgrades only need to be applied in one place and, where appropriate, functionality will be available on all devices rather than just a selection.

Future Proofing – As far as we can tell RWD should cope fine if, for example, a new tablet is released with a totally unheard-of screen resolution.

SEO Improvements – Google themselves recommend a responsive approach to tackle the issue of having separate mobile and desktop sites.

What does the future hold for RWD?

It seems RWD is here to stay and with new techniques and technology cropping up all the time then boundaries will be pushed further and further in terms of content and also design.

One interesting possible development from a technical point of view is the exploration of ‘element queries’, which instead of basing styling on the width of the screen, it would work from the width of a containing element meaning a much more flexible framework for developers. At the moment this is still very much a pipe dream, not least because of the chicken-and-egg type problem of whether the content defines the size of the container or vice-versa, but there seems to be substantial weight behind this being introduced at some point in the future.

Related articles: