How to Make Sure Your Site is Mobile-Friendly
Do you know if your website is fully responsive and how to fix it if it isn’t?
Chances are you've been out and about at some point and have tried to access a site on your mobile or tablet, only to find it's a real pain to navigate because it's been designed only with a large screen in mind.
I know that anytime I've quickly clicked through to a site to buy something via mobile, if I can't easily read the text or click on the correct link I want (without serious zooming) then I'll probably close the window and leave it till later (or just try another site).
Apart from the obvious reasons to have your site mobile-friendly, now there's an extra reason (and a deadline) to get your site working for all screen sizes. From 21st April 2015, Google will be flagging up any unresponsive sites (that's those that don't scale to fit on smaller screens) in their index, and then demoting them in search results. What this means is that you're likely to lose rankings to your competitors for your target searches and keywords if your site isn't responsive by this date.
To help you get all sorted without a loss in traffic and sales, this is the first post in a blog series we'll be writing that will show you first how to diagnose if your site is responsive or not. We'll then move onto how to fix any issues to make sure you're all sorted in time - covering both quick and easy fixes, and those that are a bit more complicated and involve custom styling for each device size.
How to Check if Your Site is Mobile-Friendly
The easiest place to start is by using Google’s own free tool to test your site (it’s important to be mobile-friendly anyway, but it is Google imposing the search engine penalties for those who aren’t ready):
https://www.google.co.uk/webmasters/tools/mobile-friendly/
When the results come in, if you've passed the test then just take a few minutes to see your website looks as you’d like it to via your mobile and that it's easy enough to navigate from page to page. If so - congratulations - you are fully optimised and you are able to relax!
But if you’re not so lucky and your site fails the test on one or more counts, then you'll see some helpful insights and suggestions as to how to fix each part.
Here's an Example...
Here’s a report from one of my older websites. I don’t actively run the site anymore, meaning I’ve not taken the time to make it responsive. You'll notice then that it fails the test for a whole handful of reasons (including the text being too small, links too close together and the mobile ‘viewport’ hasn't been set up).
Possible Errors
There are 4 types of issues that Google will flag up as reasons your site isn’t mobile friendly.
These are:
- Viewport issues (not configured - ie. page can’t be scaled, a fixed width is used or content doesn’t fit the screen size)
- Flash usage (although this can be wrongly detected if Youtube videos are used)
- Text size being too small for easy reading
- Clickable aspects of the site appearing too close together for smaller screens
Next Steps
Your task then is to take a look at Google's suggestions for fixes if your site hasn't passed and see if it's obvious as to what you need to do to make any fixes.
But if you're not sure, don't worry. In the next blog post of this series I’ll work through how to make my example site (and yours) fully responsive so you can pass this test with flying colours and start seeing more visitor-love via mobile browsers.
