Responsive web design is a web development approach that allows websites to adjust to the screen size that they are being viewed on. It enables websites to be easily viewed whether on a large desktop screen, a tablet or a smartphone. Websites automatically render or adjust to fit different screen sizes, eliminating the need for different websites needed to be created for every device.
For example, someone viewing a website from a desktop device may see a horizontally aligned navigation bar, while someone viewing the website from a mobile device sees a vertically aligned navigation bar with larger text that is easier to read on a smaller screen.
Responsive vs. adaptive design
Adaptive design involves making several different versions of a website to suit different sized screens. Responsive design has only one version which renders to fit different screen sizes. Adaptive design is time-consuming and costly compared to responsive design as it involves the creation and maintenance of several websites rather than one.
How does responsive design work?
Responsive web design is created in CSS, which determines the layout of a web page. In responsive web design, the page elements reshuffle to fit the viewport. A three-column desktop design may become two columns for a tablet and one for a smartphone. Responsive design relies on proportion-based grids to rearrange content and design elements.
Why responsive design is important
Once upon a time, websites were only viewed via a desktop or laptop computer, all of which had similar sized screens so only one design was needed. With the advent of smartphones and tablets, websites designed to be viewed on desktops became illegible on such a small screen.
These days more than half of all internet use is conducted on a mobile device so it is vital that your website is displayed well on one. 85% of adults think that when viewed on a mobile device, a company’s website should be as good, or better than on a desktop. And 57% of consumers wouldn’t recommend a business without a mobile-friendly website. Therefore, having a website that ‘responds’ to the device being used to view it is very important. Mobile friendliness also became a Google ranking factor in 2015, so your website will not appear high up in search results if it isn’t responsive. So responsive design is good for SEO too.
Benefits of responsive design
– Only one site is needed for every device. Web developers don’t have to create different websites for different screen sizes, saving time and cost.
– Optimal design – all images, fonts, and other HTML elements will be scaled appropriately, maximizing whatever screen size the user has.
– No need for redirects – without responsive design a server has to send out the appropriate version of the website for the viewport using a redirect, this slows a website down.
– Easier management – there is only one website to manage rather than several versions.
– It is future-proof – if new devices are created with different screen sizes, a responsive website will be able to adjust to them rather than a whole new version needing to be created.
How to tell if your website is responsive
It’s easy to test whether your website is responsive:
– Open Google Chrome
– Go to your website
– Press Ctrl + Shift + I to open Chrome DevTools
– Press Ctrl + Shift + M to toggle the device toolbar
– View your page from a mobile, tablet, or desktop perspective
You can also use a free tool, like Google’s Mobile-Friendly Test, to see if pages on your website are mobile-friendly.
Check your site performance
Performance on mobile devices can become an issue with responsive design. This is because the same HTML code is delivered to a 4 inch smartphone as a 24 desktop monitor. This can slow down performance on a mobile, particularly if the reception isn’t great. Because of this some web developers turn to adaptive design to achieve a similar result to responsive design.
Test the performance of your website on multiple devices in different locations – including those where mobile reception is poor, to see how it loads.
Responsive web design is important because it allows your website to be viewed clearly on multiple devices. It is also a Google ranking factor so important for SEO, if you want your website to feature high up in search results it needs to be responsive. With so much internet use now conducted on mobile devices it’s vital that your website looks good and is legible on any screen.
For help with your website call us on 01202 650 333 or email email@example.com.Back to blog home