Google looks at the mobile version of your site. Not as a second opinion, but as the version that decides what appears in the search results. This is called mobile-first indexing and it now applies to the whole web. Anything that exists only in your desktop version does not count.
For most businesses that is simply where the audience is anyway: on a phone, standing in a shop or on the move. This article covers the three things that make a page usable on such a screen: the viewport tag, the size of your buttons and the legibility of your text. They are the checks a report lists as “Mobile viewport”, “Tap targets” and “Legible font size”.
The viewport tag
One line in the <head> of your page decides whether a phone takes your layout seriously:
<meta name="viewport" content="width=device-width, initial-scale=1">
It tells the browser to use the real width of this device. Without it, a mobile browser does something else. It assumes the page was built for a desktop screen of roughly 980 pixels, renders it at that width and then shrinks the whole thing until it fits. The result is a complete website, neatly laid out, in letters three millimetres tall.
This is the heaviest of the three checks, and rightly so. Without a viewport no responsive stylesheet works at all: every media query is looking at a width the device does not have.
Blocking zoom: allowed, but do not do it
In that same tag you can set user-scalable=no or maximum-scale=1. The visitor can then no longer pinch to zoom. It gets done because a design “feels tighter” on a phone that way.
Google does not penalise it, so we deduct nothing for it. But someone with poor eyesight relies on that pinch, and now they do not get it. For a handful of pixels of design polish you shut part of your audience out. Leave zooming on.
Tap targets: buttons a thumb can hit
A mouse pointer is one pixel wide. A thumb is about nine millimetres. Anything meant to be tapped on a phone therefore needs room: as a guideline at least 48 by 48 pixels, with enough white space around it that you do not catch its neighbour.
Where it usually goes wrong: menu items stacked as a list with a few pixels between them, small social icons in the footer, links sitting close together inside running text, and tables rendered too small on mobile.
The cost of a mis-tap is higher than it looks. Someone who hits the wrong link has to go back, wait for the previous page to load again and try once more. A share of them will not.
Legible text
Text smaller than roughly twelve pixels forces a visitor to zoom. In practice sixteen pixels is the floor for ordinary body text on a phone, and that happens to be the default every browser uses when you specify nothing at all.
Small type usually creeps in around the edges: footnotes, disclaimers, image captions, the footer and the cookie notice. Often it was carried over from a desktop design, where twelve pixel text on a large screen at arm’s length is just about readable.
There is another reason to take this seriously. A growing share of your customers is over fifty, and that is precisely the group with money to spend. Small type costs you revenue there, not just points.
The rest of the mobile picture
Three things that have no check of their own but come up every time. Horizontal scrolling: an image or table wider than the screen throws the whole page sideways. Pop-ups filling the screen the moment you arrive, which Google names explicitly as an intrusive interstitial. And forms with input fields of the wrong type, leaving someone to type a phone number on a letter keyboard.
Finally the Apple touch icon: the picture that appears when someone saves your site to their home screen. Purely cosmetic, but it is one line, and without it they get a grey box with a screenshot in it.
Google sets out its own reasoning for mobile in the documentation on mobile-first indexing.
What you can do today
- Pick up your own phone and walk through your site the way a customer does, contact form included.
- Check the source for a viewport tag, and that it does not contain
user-scalable=no. - Try hitting your menu items and footer icons with your thumb without looking.
- Find the smallest text on your site, usually in the footer or a disclaimer, and make it bigger.
- Try scrolling a page to the right. If you can, something is sticking out past the screen.
Want all of this checked in one go? The free SEO check runs through these points and shows you what was found on your page for each of them.
