responsive websites

Responsive Websites

What are ‘responsive websites’? You might have heard the jargon.

responsive websitesIn the olden days (maybe five or so years ago!) a website was a website, with a single design and layout. The width of this layout was dictated by the web designer, who (if she was any good!) would select an appropriate width given the most popular size of computer screen displays at the time. The idea was that the design should at all costs avoid the web browser having to display a horizontal scroll bar, thus forcing the viewer to have to scroll back and forth as they read through the page.

But there was a trade-off: a narrower layout meant that the website was more likely to fit properly into the viewer’s browser window, but – on larger displays – it would mean huge borders left and right, with lots of wasted space. As screen sizes increased, so too, gradually, did website widths…

…and then came mobile devices!

With the advent of tablets and smartphones, things became even more complicated. It was then no longer a case of simply designing for one type of hardware, websites needed to be easy to view – and easy to navigate – on much smaller displays, and in both landscape and portrait orientations. For this reason, many businesses would commission a second ‘mobile friendly’ website to be built, designed to work perfectly with smartphones and the like.

responsive websitesIn time, with the advent of modular website technologies which separate design code from content, it was possible to avoid having to create separate pages for smartphones, by incorporating a ‘mobile theme’ into the website build, which automatically reformatted the website to best fit mobile devices, without having to duplicate page content. These really were the first ‘responsive’ websites, but things are far more sophisticated now.

The code which contains the instructions for website formatting and layout are held in what are called ‘cascading style-sheets’ (.css files). By utilising multiple sets of instructions, each geared to a different size screen, and the use of conditional statements to select which instruction set to use, a website can now have any number of different layouts, ensuring it looks fantastic and is easy to read and navigate, whatever the size of display being used.

As an example, the two images shown here are from one of the responsive websites I have created, and both are exactly the same web page. The first layout smoothly shrinks down into the second as screen width is reduced. Clever eh?! Here’s a quick clip of the process in operation:

Like all the websites I build, this website is fully responsive. If you are reading this on a computer, try shrinking the width of your web browser window now, and see how this website adjusts itself as the display gets narrower. And perhaps also have a look at it on your mobile phone, to see how the content elements are reorganised to fit the small screen.