Mobile Compatibility - Is your website mobile friendly?
The modern world is full of mobile phones, phablets, tablets, laptops and smart TV's. All are different sizes and capable of displaying websites. The question you need to ask yourself is, does your website work on all these devices and does it look as good on a smartphone as it does on a laptop. Read on to find out how you can check, even if you don't own any of these devices.
There are almost as many ways to check website compatibility, as there are devices. I'm not going to cover them all, so I am going to focus on the free options.
What to check for
First we need to identify what qualifies as compatible. There is a simple checklist of items to lookout for when checking a website on any device.
- Do you need to pinch zoom to read the text?
- Link/button sizes - are they easy to tap/click.
- Do the images scale to fit?
- How quick did the images load?
- Is the menu easy to find?
If you fail on any of these it's a fair sign that your website is not compatible with the device you are testing it on. Next is a more detailed explanation of those points and why they are bad.
- If the website when view on a mobile / tablet looks like a miniature version of the desktop site. Forcing you to pinch, squeeze and zoom in to read the content. This is considered not mobile / tablet friendly, the website has not been adjusted to display correctly on this device. No one likes to use a website this way and it will loose you customers / visitors.
- Although a website may react to fit on a mobile device, can you click links and buttons easily. Is it easy to navigate the site, can you click the link you want first time or do you have to zoom in to be able to hit it properly. Sometimes this get's overlooked by website designers and again leads to frustrated customers because they cannot click the link they want first time. They will leave your site and look for one they can use.
- Does the image fit on the page, do you need to pan to see it all or is it too small? These can all be signs that images have not been handled correctly and need fixing by the website designer.
- If the image was slow to load, especially on mobile devices this can be a bad sign. Mobile users more than anyone else like quick responsive pages, they don't like to have to wait a long time for a page to finish loading. More importantly mobile users maybe on roaming data 3/4G, they have monthly allowances / pay per megabyte for usage. I usually keep my pages at around 0.5mb max for mobile devices.
I recently came across a really bad example of images on mobile devices. A popular ex-pats website claiming they were now mobile, the classifieds page weighed in at a whopping 20-40mb per page depending on how many classified adverts had images. If I viewed 10 pages in the classified section it potentially eats 400mb of data allowance. When your customers realise you've eaten this much of their allowance, they won't just stop using your site they may want compensation for costs incurred.
- How easy is the site to navigate, is the menu easy to find and click on etc. if your left searching for navigation buttons this is generally a bad sign.
How to check
There are a number of options, they all have pro's and con's. Some are easier / quicker than others and some require more technical ability.
Ask a friend!
While we don't all own the latest smartphone / iPad type device, we probably know someone who does. If you can visit your friend and ask to use their device to view your website, as opposed to asking them to view it and give you an opinion. You know your site and how it should look, it's in your interest to know if it looks bad or is unusable on some devices.
Ask Google!
If everything else in this article is over your head, then this option is probably for you. This is probably the quickest and easiest, however it only checks mobile compatibility. It's not a full site check, but it does give you a rough and ready idea at the click of a button. I would advise using the other options if you can, but as a last resort this works - sort of.
Google Mobile-Friendly Test
Chrome browser
Another Google product, I could suggest Microsoft's browser or Mozilla's Firefox. But for me they fall far short in usability and achieving what is required. This option is more involved and requires some technical skill / knowledge. You will also need a laptop / desktop computer to make use of the features as the mobile and tablet version of Chrome do not have this ability.
Chrome browser has the ability to emulate different devices and screen sizes. It's latest versions does this surprisingly well and it's free! However this is a tool designed to be used by website designers / developers and as such does require a higher skill set. But I do believe most people should be capable of using the emulation features.
You will need to download and install the latest version of Chrome found here. I'm not going to teach you how to use this feature in it's entirety, that would be an article in itself. It should be as simple as navigate to your website in Chrome, right click in an empty space and choose "inspect" from the menu. Here is a link to Google's documents to help you learn more on how to use it Test Responsive and Device-specific Viewports.
A few small tips, after picking a device to emulate from the dropdown menu. You may need to refresh the page to have it appear correctly, do this each time you swap device.
While in inspect mode you can check how many megabytes your web page is and how long it takes to download to the browser. To do this pick the "network" tab from the inspection window, changing page / hitting refresh will cause it to update. The size of the page is shown at the bottom in kb / mb, just for info there is 1000kb in 1mb.
You maybe wondering why this is important, for me it is important to check that web pages are not consuming too much bandwidth for mobile devices. It is important to check the image heavy pages of your website, galleries or classified adverts section for example. A well developed website should consume less bandwidth on a mobile when viewing the same page compared to a laptop. You can check this in Chrome by simply swapping which device you are emulating and then hitting refresh, while on the network tab.
While this option does require more computer knowledge, it does give you a free way to check mobile and tablet devices without too much trouble.
Conclusion
I hope you have found this article useful and remember while it is important to trust your website developer. You ultimately own your website and it's your responsibility to ensure that the developer has made your website work on all modern devices. It is in your best interest to ensure that you reach as big an audience as possible.
*Created: 07 April 2016
By: Ryan Carter