1

I have this one page on my website, where google search console is claiming it's not usable on a mobile device. it even delivers a screenshot demonstrating a half-baked website, where the main image is out of bounds.

It mainly complains always the same two things:

  • clickable elements too close to each
  • text too small to read

However, looking at the screenshot Google delivers, I clearly can see the desktop website being rendered with a side-by-side menu, as if seeing a zoomed-out desktop page. Checking the source code, I clearly see the <meta name="viewport" content="width=device-width, initial-scale=1.0"> set properly. There is no template switching for mobile, it's all build with responsive CSS.

Cross-checking things on pagespeed leads to the opposite result. the mobile page is rendered in the preview correctly, nothing overflows, and all texts are usable.

I went so far as to add inline styles max-width: 100% to the image elements that theoretically can outgrow the page and make the page zoom, but no change in the result.

Testing manually, with a throttled connection, shows me how things build up almost linearly (font swap!), and never jump in sizes.

So my main question is what might be causing this? image showing how search console renders the output Good rendering in pagespeed

2 Answers 2

2

"clickable elements too close to each, text too small to read" is saying two things.

People's fingers are two big and two of your links are closer than around 50px which is the size of the finger on the smartphone.

A CSS something like:

p, html, body, header, h1 {
    line-height: 1.5;
}

will give people enough space between links who have big fingers if the font size is big enough.

The min font-size to pass Google's "text too small to read" test is a font-size: 20px; which is about 25% larger than the default font size of 16px. Again in CSS it is easy to put that on the element tag as the CSS in class tags has higher specificity.

html, body {
    font-size: 20px;
}

Then Google will remove those warnings.

When a font size of about 30px is used for vertical menus it gives (30 x 1.5) = 45px, which is enough for big fingers; And, normally there is a few pixels worth of padding on a vertical menu.

My best guess on where what it is looking at is a vertical menu. The image is bigger than 50px, so its hard to try and click the image and press the wrong link. Same for the horizontal elements at the top they have enough space horizontally.

You can also use clamp for designs that have variable font sizes.

font-size: clamp(20px, 3.1vw , 30px)

Pagespeed vs Google's test vs Reality

There are differences in what people feel or believe is the best size for accessibility. There is no official authorized size.

They are indeed in disagreement.

1
  • Thank you for these insights. They are ALWAYS good to know and consider. Certainly bookmarked! In the end, this was not related. It was related to a Theme configuration on the image (the number moved one digit, making 500px 5000px) and the fact that "inline" CSS gets applied lazy loaded. With both mistakes cleaned, google found this mobile friendly on both tools!
    – Kai
    Commented Oct 25, 2023 at 11:55
1

For visibility: My case this was caused by a mistake in configuration and a "weird" behaviour of my wordpress theme inline styles:

  • there was a typo in the image size, leading to a too large image size
  • my "inline" css got attached via JS, so it was not visible on pageload.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.