What is responsive design?
Every website I've built over the last few years have been developed using a technique called ‘Responsive Design’. I'm often asked what this is and why it’s needed, so I’d thought I’d explain this approach to website design.
Before the rise of devices like smartphones and tablets, almost every visit to a website was made on a desktop or laptop computer. This made designing websites quite straightforward.
You knew what kind of screen width most of your visitors would be using, and you could design a website around these fixed dimensions.
Now people access websites through a plethora of gadgets. For example: iPhones, netbooks, Windows mobiles, tablets, Kindles, a huge variety of Android devices, games consoles, etc
Even the size of desktop monitors has changed, with widescreens increasingly becoming the norm, and a good website should make use of this extra space.
As a result, people began expecting websites that didn't require them to zoom in and out or scroll horizontally to read. An early approach to solving this problem was to develop a separate, mobile-friendly version of a website, but this involved extra resources to both build and maintain, usually had limited content, and could cause issues with search engine optimisation.
Then, as new smartphones and tablets came out, websites designed for mobiles struggled to cope with the variety of screen sizes. A new approach was required that could deal with the seemingly endless new devices and screen resolutions.
This is where responsive design came in. Responsive design is an approach to design where the site responds to the user’s environment – their screen size, screen orientation and platform.
To accomplish this, responsive websites are built on flexible layouts that automatically adjust to each user’s device. This flexibility is achieved by clever use of the styling code websites use, called Cascading Style Sheets (CSS).
As a user switches from a laptop to a smartphone, the website should automatically adjust to a suitable resolution, image size and layout. The website ‘responds’ to the user’s device without having to be designed specifically for it.
This is a fundamental shift in website design, and in my opinion it is essential, given how people are now accessing the internet. Website design and responsive website design have become the same thing.
It's also useful from a search engine optimisation point of view - Google has recently announced that mobile and tablet friendly websites will receive a boost in search engines starting with the next big algorithm update in April.