What is Responsive Design?

The rise of the smartphone and tablet has meant that web designers have had to change the way that they work. With the many different devices on the market, leading to a bigger range of screen resolutions, web design can no longer be a static layout which can only be viewed on a desktop computer. As a digital agency, we’re regularly approached by clients to build responsive websites, but what does it mean?

How Does It Work?

Responsive web design changes the look and development of a website based on a user’s behaviour, screen size and orientation of the screen, whether portrait or landscape, using flexible grids and layouts, responsive image sizes and contextual use of CSS media queries. Whether the user is viewing the site from mobile or from a laptop, the website should always be aesthetically pleasing, using appropriate image and text size. This change should happen automatically, so it doesn’t matter what size screen the viewer is using.

However, responsive design is not just about screen sizes and scalable image sizes. It’s a whole new way of looking at web design.

Screen Resolution

The range of web-enabled devices is growing every day, all with their own screen resolutions and orientations, some rectangle, some square, most with the ability to switch orientation from landscape to portrait. You could design a website to accommodate the different categories of screen, once you figure out what the majority of screens look like… but this would be ridiculous with each new generation of screen size needing a new site redesign. It would become a huge task, the proverbial painting of the Forth Bridge. So how do we accommodate for this?

A Flexible Solution

The solution to the problems of many screen sizes is to create a website which works on any device. This is where responsive web design comes in. Websites created using responsive design can be viewed on any screen size. From iPads, smartphones, Kindles and desktop computers, using flexible layouts and adjustable images mean that no matter what the size of the screen, the content will always be displayed appropriately, giving the user the best possible experience.

Website Performance

There’s more to responsive web design than just the size of the screen however. Designing sites for mobile browsing also needs to take into account the use of mobile internet bandwidth. While 4G being rolled out across the UK slowly, there is still a limit on most people’s internet allowance in the UK and websites need to take into account the limit of users bandwidths. If you have an attractive website that uses a huge chunk of a user’s monthly data allowance, or if your site takes too long to load, you won’t get much traction from users.

Research has shown that if your website takes more than three seconds to load, nearly 60% of users will abandon your site. Speed is a real concern for users, and this is also reflected in Google’s rankings. If your website falls below a set threshold, your site will be punished by the algorithm.

Good responsive design means that your site doesn’t just resize high-res images and make the user download them to their phone or tablet, but changes the content, with responsive images, scripts and style sheets that behave appropriately for the device that is using them.

Designing responsive websites can simply be a case of dealing with CSS media queries, adjusting a logo and stacking columns. However, if you have a larger website with complex menus and lots of content, this means more work as small screens can end up simply displaying navigation menus, a huge turn off for users who want to see the content and not the map of the content.