What is responsive design?

‘Responsive design’ is a relatively new phrase being banded about the web world these days.

What does it mean? When I first heard the phrase at a web conference in Nottingham a few years ago, I thought it meant the content displayed was tailored to the user looking at the site – it somehow reacted to what choices had been made by the visitor earlier in the journey.

The word responsive in this case is used for a different reason however –

Web designers typically refer to a site as being responsive if the content flows or changes size and shape depending on the size of the screen the user is viewing on.

In today’s age, there’s never been such a divergence in screen sizes for viewing websites. From the smallest smartphones through to tablets and iPads, to 24″ widescreen monitors.

To best engage your audience at whatever screen size they are viewing from, a website must be ‘responsive’.

If a user is viewing on a smartphone, they don’t want to see a banner image that is so big they have to scroll 5 screen lengths worth just to get past it to the content.

Similarly, they don’t want 12px size fonts arranged across two columns – when their screen is the size of a matchbox.

This is where responsive design comes in – reflowing and reformatting the content to best fit the screen.

A reduction or even removal of the image banner, an increase in font size and a decrease in column width means the content is accessible easily.

Still don’t know what I mean?
Resize your browser window whilst viewing this website – you’ll see the content format to fit perfectly.