Last month, Google actually announced a change in their algorithm before it had already happened. In this post they mention that starting April 21st mobile-friendliness will become a ranking factor more and more.

In the past few weeks we’ve been getting quite a few reports from Google Webmaster Tools. Not only did they add a Mobile Usability item under the Search Traffic section, but they also sent out emails with the subject “Fix mobile usability issues found on <website>”. Obviously, Google is bringing mobile-friendliness under the website owner’s attention.

So we thought it would be a good idea to explain what you should pay attention to and what we think you should be doing to prepare yourself for the update on April 21st.

The impact of this update will be big

But before preparing you, lets convince you that it’s really important to take action, if you haven’t already. As Google mentioned in their own blogpost, the impact on the search results will be significant. Besides that, Search Engine Land announced that Zineb Ait Bahajji was quoted to say that the impact of this update will be bigger than Panda or Penguin, and that’s saying something.

Common issues

There are a few notices we saw quite a few times. We’re sure this is not a complete list, but it covers all the most common issues.

Viewport not configured/Fixed-width viewport

What this basically means is that you should make your website responsive. A responsive website will scale to any size automatically, without trying to show the entire website on a much smaller screen (such as a smartphone). Michiel actually wrote a great post about responsive design that can help out a lot here.

Touch elements too close

This is a pretty straightforward notice. When viewing your website on a smartphone and/or tablet, the different areas a user is able to click on are too close to each other. This means that they might be misclicking, which is obviously annoying and not very user-friendly.

Google recommends your important tap targets should be at least 48 CSS pixels tall/wide (with a properly configured viewport). If they’re any smaller than that, they should have additional spacing; no other tap targets should be within 32 CSS pixels of it (horizontally and vertically).

Small font size

This one is pretty straightforward as well. Google considers your font to be too small to be decently legible. Before fixing this, you’ll have to make sure you have your viewport configured properly. Google gives the following recommendations for your font size:

1. Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
2. Use sizes relative to the base size to define the typographic scale.
3. Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
4. Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.

Content not sized to viewport

Once you’ve set your viewport up properly, you should not forget about your content. Any elements with a fixed width will still make sure your otherwise (hopefully) responsive site becomes unusable on mobile devices. So you should be aware of the following:

1. Any large elements (such as images) are not using a fixed width;
2. Content should not be set to one specific viewport width;
3. You should be using CSS media queries to give different styling to smaller screens than to larger screens.

Make your website responsive

By now I hope you got the gist of what it is Google is trying to tell you: make your website responsive. They’ve even made a complete guide to mobile-friendly sites. There’s a mobile-friendly test, which will give you either of these responses:

And when you get the message the page is not mobile-friendly, they’ll obviously also tell you why it’s not. This might be a nice tool to use for new pages, for example. However, it’s only per page, so checking your entire website is probably not the best option. That’s why you can also check the Mobile Usability section in your Google Webmaster Tools. This will give you a list of all the pages that gave errors that Google found.

Another great and really simple way to check whether your website is responsive or not, is to just resize your browser window. If your website doesn’t scale with the size of your browser window, it’s probably not responsive.

Can I do anything else?

If you’re still unsure whether you’re doing everything you can do with your site, or you want professionals to take a look at the mobile usability (and a lot more) of your site, you should definitely check out our Website Reviews. We’ll personally check your site for any issues regarding mobile usability, and a whole lot more.

That’s it!

There’s not much more to it than this, really: make your website responsive. And test mobile-friendliness after that. Not only will this make sure you prevent getting ‘hit’ by this update, it’ll actually make your website more usable for your visitors. And that’s what it should be about in the first place. Happy optimizing!

This post first appeared as Mobile-friendly sites and SEO on Yoast. Whoopity Doo!