Making a website mobile-friendly is important because a survey conducted in June 2019 saw mobile account for 50.71% of Google searches, with desktop dropping down to 45.53%. This is because phones allow people to be connected 24/7. They are convenient and most people have them in their pockets, whereas a laptop or desktop is less accessible and harder to work whilst on the go.
If a user wanted to access a website for information or to see a product, if that website wasn’t mobile optimised, chances are that people aren’t likely to use it. So, it's important to mobile optimise a website so that all devices show the same information, in a clear, well laid out manner.
I think there are a few main points that need to be considered when you are making a website mobile-friendly.
1. Make all data accessible
First of all, make all data easily accessible on mobile as on desktop. This means that there shouldn’t be extra barriers for a user to overcome to access the same information. The journey should be the same whether the user is on desktop or on a mobile device.
2. Don’t use Flash
Flash is an unused multimedia platform that some developers still use in websites. You find that most browsers across mobile and desktop don’t support this. Not only this but if a browser does support Flash, it’s likely to have a big impact on page load speeds, which means the user is likely to get a slow website served to their mobile.
3. Size buttons correctly on the website
On a desktop its easy enough to click just about any size button. Whereas on a mobile device, you rely on the touchscreen to be able to click. This means that buttons have to be sized correctly to ensure that the user is able to click them with their thumb, as buttons that are too small will be impossible to press.
4. Optimise CSS and images
As well as optimising CSS and images, you should minify these and use caching on mobile to help get that snappy experience. This is the same on desktop, but you find that on mobile the internet isn’t as fast, so still providing that snappy website experience can be tough. This is where it’s recommended to enable caching on mobile and compress as many files and images as possible. This will help lower the overall requests file size and take less time to load on the user’s end.
5. Use viewport on your website
This might sound like a given, but some people don’t know that using the meta=”viewport” tag in the header of the website is very helpful for users on mobile. This (with the correct parameters) will instruct the browser to the server the website at the device’s width. Without including this, the website will just be served at default size, meaning the user has that painful horizontal scroll to just read the headings.
As an example, this is the viewport meta tag used on our website:
<meta name="viewport" content="width=device-width, initial-scale=1>
6. Use media queries
Media queries are easy ways to target certain screen sizes when you are writing CSS. They will only apply the styling within the tags if the parameters are met. These are really useful to resize media, adjust widths of divs and even swap rows around to make the content easier to read using something called column reverse.
The best way to test that your mobile-friendly website works in on the device itself. There are alternatives that give you the option to emulate certain devices which works out loads cheaper than buying every device. The emulation works by mimicking the device, such as an iPhone, using the software and the browsers that the user would.
For example, Cross Browser Testing allows you to emulate a wide variety of devices using their native operating systems. This not only ensures that the user is getting the experience you planned when the website is being built, but it also allows you to see issues first hand allowing you to act upon it. This is opposed to relying on someone trying to explain how the issue occurred.
There are other tools such as Google’s Inspect tool but this doesn't always represent what the user would see. Instead, it just sets the viewport of the screen to the known dimensions of the phone, which isn’t always right. For example, iPhone X has a notch out of the top of the screen which isn’t accounted for in Google’s Inspect window, so the website doesn't look the same as it would on a physical device.
There are things that can test this for you against certain criteria, such as this mobile-friendly test tool. This will list out issues if the website isn’t mobile optimised which could help point out what needs to be changed to improve the mobile experience
If I was to suggest how to improve the mobile experience based on my experience with website mobile optimisation, I would look at doing the following:
1. Use SEO Tools
There are certain tools that allow you to optimise the website from an SEO aspect, rather than just on the design aspect. This includes tools such as mobile-focused keywords and tracking organic ranking in mobile SERPs.
2. Avoid common mistakes
Avoid common mistakes that some people do when mobile optimising for a website. One example that I can use is don’t block javascript, CSS or image files being displayed on mobile. This is because it can affect the rankings on a Google search as Google has advised against this for some time. Instead, I would recommend compressing these files and serving them as small as possible, as mentioned above.
3. Try to follow best practices for mobile websites
This includes things such as making text sizes legible, no horizontal scrolling and placing links far enough apart so the user can tap one without mistakenly tapping the other.
4. Use the tools at your disposal
Use Google’s Mobile-Friendly Test to see whether Google thinks your website is mobile responsive or not. This will output either: “Awesome, your site is mobile-friendly” or “No, your website is not mobile-friendly”. If this turns out to be the latter, the helpful tool will give you pointers on how to make it mobile-friendly. For example, text size is too small, links are too close together and the mobile viewport isn’t set.
Making your website mobile-friendly is achievable if you know how and why it works. Making data accessible, not using Flash, sizing buttons correctly and optimising CSS and images are just a few of the techniques you can immediately use to improve your site on the mobile device. Creating a great user experience on mobile is essential to ensure your users find exactly what they’re looking for. Using SEO tools, avoiding common mistakes, following best practice and using accessible tools will test whether your website is mobile-friendly for your users.