Responsive Web Design is a website development approach that ensures a website reacts to the environment that it is working on. For example, if you access your website on your mobile phone, it will ensure that your images, fonts, text size and layout work for the device you’re using. If you then jump onto your website on a tablet, the website will respond and load accordingly. That’s responsive web design in a nutshell. It is responding to the device you’re using. It will not look the same as it does on your desktop or laptop device due to the varying screen size differences, but it will load quickly, and be user-friendly for the device being used.
According to Google, 40% of web visitors would choose a competitors website to visit if the site was not build to work on mobile devices.
As the website user jumps from their tablet, phone or laptop the website will subtly and instantly change automatically. This is because the site is responding to the different screen resolutions, image sizing and general screen real estate (space available). When implemented, responsive web design improves the user experience and thus the ‘feeling’ someone has about you or your business and organisation. It shows you care about how they might interact with you.
With the emergence of new devices coming onto the market each year, responsive web design is an ongoing process. It’s partly why your website and website design is never finished if you look after it. As technology evolves in the way we use and consume the Internet and websites in general, so must your website to ensure it keeps up with the technological advances. Keeping your website uniformed, modern and relatable to your users is a key driver for a website’s success and SEO (search engine optimisation) performance.
If you were to keep just the desktop version of your website across the various devices, rest assured that hard-earned web traffic won’t wait around for long and will hop onto a website that is easy to use on the device they’re using and this will most likely be a competitors website.
How Does Responsive Web Design Work?
Responsive web design works through utilising Cascading Style Sheets (CSS). It can also be activated by various settings to load different style properties relating to the screen size and orientation of the device, the colour depth available and the unique features of the device being used.
A website is a collection of files that are placed onto a web server and accessed. For example, you might have a homepage, an about page, a services page etc and each file contains HTML code and media such as the text you read and the images you see on the page. The HTML code is what produces the layout, and this layout is then styled with files called Cascading Style Sheets (CSS).
For a moment, imagine a standard old-fashioned website. One that was perhaps built-in in 2004 a long time before a smartphone had even entered the market. This website would have looked rather plain and would have had a very limited set of web files and a few CSS files to govern the style of the site (such as colours and the font used). A responsive website on the other hand would have a lot more files. Depending on the device being used, it will apply an alternate set of CSS files to ensure the website loads properly on the device requesting the website. This is what causes the site to look and load differently on various devices. It’s effectively a different set of instructions if you like for your phone and your desktop. As more and more devices now support access to websites (including smart TVs!), the complexity of these files increases along with the demand for responsive web design.
An interesting catch-22 with responsive web design is that you’d think that all browsers work the same in interpreting a website page. You might be surprised to hear that they don’t. It’s important that your website gets tested not only across multiple devices but also checked across each of the potential browsers your users might use. These would be the ones you’ve likely heard about too such as Google Chrome, Mozilla Firefox and Microsoft Edge but it should also be checked on less known ones including Opera and for all those Windows users the
Mac browser Safari.
How Does Responsive Design Get Built Into Your Website?
There are several different design techniques that can be deployed to create a responsive website. Most often, developers such as at OJE will set a major and minor width breakpoint based on the viewport tag and CSS media queries. This is then coded to present an optimised content layout to the user based on the display screen ranges. In other words, the title text size on the desktop monitor might be set to 72 (because large fonts can look cool on desktop devices) yet on a mobile device be set to a font size of 35 so that it fits neatly onto the smaller screen.
We also look to use relative values as much as possible as opposed to fixed attributes such as height and width. This allows content to scale up or down based on the device being used automatically.
Why is Responsive Web Design Important?
Google recently reported that 61% of users were unlikely to return to a mobile site they had trouble accessing and, even worse, 40% chose to visit a competitor’s site instead.
If your website is not responsive you are losing leads and customers. Long gone are the days when people only access your website from a desktop monitor, all at the same resolution (such as 1280 x 720). Today, there are a whole wealth of resolutions such as the new 21:9 resolution, standard 1080 x 1920 and varying smartphone resolutions. That’s because our screens range from a few inches large up to screens which are 98 inches QLED 8K big! That screen by the way is incredible from Samsung! The picture is actually sharper than real life – scary!
Web users seeking information expect the site to work on the device they’re using. Unfortunately, it’s just the way it is now. The world has come a long way since the first iPhone launched on 27th June 2007 and we have Steve Jobs to thank for that. Interestingly, in case you didn’t know, the ‘I’ in iPhone stands for Internet phone, which was quite a clue on where Apple was headed with the technology even way back then in tech terms.
The other issue that faces responsive web design is the technology that comes with the devices themselves. For example, on the iPhone people have learned that the operating system allows them to be able to swipe left/right/up/down to ‘interact’ with the information. It’s gaining popularity, but you don’t see many doing this to a desktop screen just yet! Your web users will also expect that when they click a phone number that it will then directly call that number from the device. A bit like an auto-dial if you like. The same is said when on your contact page and then clicking the office address, they’d expect to be able to use that information to integrate with other apps on the device to offer up direct directions to get there. This is really great for your business, but only if it’s responsive in design. The way we interact with information is simply different on different devices.
67% of people are more likely to buy a product or use a service from a website that is mobile friendly and 94% of the first impression you give about your business and brand comes down to your website design. Why? Because the web is the first person likely checks when looking up a company. It’s available (or should be) 24/7 for them to browse and find out more about you.
More people are using mobile devices than they used to today too. As of March 2020, 87% of mobile phone users used a smartphone, while only 13 per cent of users did not (Statista). If you already have a website and have Google Analytics enabled, check your mobile web traffic usage. You might be surprised to see that it’s much higher than the desktop users and yet most clients focus so much energy on how the website looks on a desktop device and not the device used the most.
We know that Google also ranks websites with responsive web design higher than those that don’t use this method. This is largely down to the fact that Google wants to provide information to its users in the most user-friendly way. It wouldn’t look good for Google if the information it repeatedly found was not easy to understand or read.
How Can I Tell if My Website is Mobile-Friendly?
This is quite easy to do. You can load up your website on a desktop or laptop and then at the same time load it up on your mobile or tablet device. If they look identical it’s not using a responsive design. If the text, menu and images are all resized and changed and it looks clean and easy to use, your website has been built using responsive web design features.
Another way to do this is to fun the Google Mobile-Friendly Test here. It will show you right away if your website is mobile-friendly, just be wary of the potential false positives it might give you in the results.
In Summary
Responsive web design will enable your business to reach more customers across a multitude of devices and will impact your search engine rankings locally and globally for the better. It will help provide your users with a reliable user experience and provide you with a greater understanding of which devices your users and customers are finding you on. You will also compete better if not on a level playing field with your major competitors.
