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.
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.
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.
Responsive Design and Conversion
Intelligent responsive design works with sites to create the best user experience. Through having a responsive site, conversion rates for mobile users will increase hugely. According to a recent post from Econsultancy, Bench gained a +100% conversion rate for mobile after implementing a responsive design into their Magento CMS.
Furthermore, Time Magazine responded to the increase in mobile users by building a responsive website. Following the move, they have seen pages-per-visit going up by 23% for mobile users, with bounce rates decreasing by 26%.
O’Neill Clothing are another success story following the implementation of a responsive website. The redesign increased conversions by 65%, transactions by 112% and revenue by 101%; some incredible statistics.
Responsive design allows users to get the best possible experience from your website no matter what device they are using, and this in turn has an upward effect on conversion rates for your business.
Some of our favourite responsive sites