Responsive Web Design

You may have heard of web designers talking about ‘responsive design’ among other things when discussing important elements of modern web design, but what is it, and why does it matter?

In today’s era of technology there is an incredible number of devices out there, mobile and otherwise, that all have different processors, memory, screen size, screen resolution etc. Once someone has acquired a piece of technology they are likely to have it for quite a while, and as technology changes over time, suppliers manufacture hardware upgrades like bigger screens, better resolutions, smaller devices, larger devices, in the never ending search for the optimal device to suit all the needs of their customers, in an ever expanding array of device categories.

Not only does this happen with hardware, but also our needs as consumers are also evolving over time, as new hardware comes out, we attempt to discern how best to utilise our chosen device to suit our own personal needs, and this experience shapes our next purchasing decision as we try to find a device that more completely covers our needs, be it smaller, larger, faster, cheaper or whatever you decide is most important in the latest and greatest device.

This ongoing cycle renders today’s latest and greatest device, different to tomorrow's latest and greatest device, with most of the population out of sync with the latest technologies as they wait for device contracts to finish, or wait to get a reasonable lifespan out of their most recent purchases before upgrading again.

With the current number of technological iterations, in terms of screen size alone, it is simply impractical to design user interfaces for individual devices. Previous attempts to combat this issue had designers categorising devices into 3 main groups, and then creating 3 different user interfaces, one for a computer screen, one for a mobile screen and one for a table screen, in an attempt to get away from the dilemma of attempting to design for individual devices. A reasonable approach, which was effective for some time.

However as more time passes, new devices are created, and now even the screen sizes options on these individual categories of devices are different enough to make this method difficult to implement well, while still successfully supporting a large range of different devices.

It was time to alter the approach away from supporting categories, to supporting any screen size. Sounds like a big leap in thinking, but CSS (cascading style sheets) provides the current answer. CSS is widely used in web development, and has been for a long time, to make user interfaces look nicer and provide special effects, with the addition of a property known as ‘media queries’ to the CSS3 standard, and particularly the ‘screen’ value, designers can use a fully customisable series of ‘screen’ values, or screen sizes, to alter how the content is displayed. Being that designers can choose where different screen widths start and finish, they can get excellent results for individual applications with comfort in the knowledge that pretty much any device that has a web browser will render the content as the designer intended. Take a look at the video above to see responsive design in action, and you can see how using the ‘media widths’ can allow content to be displayed well on almost any size device.

The ‘media queries’ addition to CSS3 is a great example of technical evolution, and of course one that I take advantage of in my projects. So next time you get involved in a web development make sure that your designer knows how to take advantage of media widths, so you too can take advantage of responsive design that your customers will be able to see on all of their devices.