What is Responsive Web Design and why is it important?
You’ve probably heard of Responsive Websites but do you know what they are? Furthermore do you know why they’re important?
Most people that use the Internet on their phone are probably aware of responsive websites even if they don’t know what they are.
If you think about websites that you use on your mobile, you’ve probably used some that look tiny on your screen, that have horizontal scrolling and where you have to zoom right in to read anything. These websites are not optimised for mobile devices and use the styling that’s intended for desktops.
Displaying the desktop styling of a website on a phone results in a bad user experience and visitors not engaging with a website.
The problem that developers have is that you can’t optimise a website specifically for every different device. Consider the number of combinations you can make with all the different screen sizes, resolutions and browser variations and it will give you an idea of the scope of the task.
To get around this, developers use what are known as media queries that will apply a style if a device’s display meets a certain criteria. The query can check its width, height, resolution and whether it’s landscape or portrait for example. They then use this to apply styling to certain configurations.
Most commonly the width of the screen is used to apply certain styling. The developer creates style code that displays the content of the website in a more user friendly way for devices under a certain resolution size. For example one stylesheet may be for devices that have a width of less than 601 pixels.
The website will be narrowed to the width of the device and text and images are adjusted to display them in a readable way. Columns may be put one under another rather than side by side and typically the navigation will move into a drop down menu.
This process is called Responsive Web Design. The aim is to optimise the website for as many devices as possible by removing horizontal scrolling, panning and zooming in and out and any other styling that improves the user experience.
You can see the difference between a desktop version (above) and a mobile version (below) of the Neon Web Design Bournemouth homepage.
There is two main benefits to having a responsive website. To improve the usability for your visitors and to improve how Google ranks it in their search results.
Usability is obviously a big factor in how users engage with a website. Customers are much more likely to use a website that they can easily navigate and read. Mobile use has actually over taken desktop in the UK recently so it’s very important that websites are responsive.
On the 21st of April 2015 Google released an update to their search algorithm that improved the rating of websites that are responsive. Which means a website is more likely to have a higher position in the results if it’s mobile friendly, which could affect the quantity of traffic it receives dramatically.
If you’d like to find out more about Responsive Web Design, please feel free to get in touch.