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. People who are a bit older or do not see as well find small type harder to read, and they are customers too. 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.
Having a mobile website built: adjust or rebuild?
A separate mobile website next to your normal site is not necessary. Google recommends responsive web design, one site that adapts to every screen, because it is the easiest design pattern to implement and maintain (Google Search Central). That gives you one address per page and one version to keep up to date.
If your current site works badly on a phone, the fix depends on the cause. If only the viewport tag is missing, or a few buttons are too small, adjustments to the theme will solve it. If the design itself was never made to scale, with fixed widths and tables used for layout, rebuilding is often cheaper than repairing it again and again. A scan of your homepage shows which of the points in this article go wrong on your site. If you want us to build a new site that starts from mobile, see our business websites.
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.
