4

In search results google reports "this page is not mobile-friendly". I want to fix this.

when I test my website in the mobile-friendly test, it reports:

  1. Content wider than screen.
  2. Clickable elements too close together.

How can I find the items/content that are creating these problems?

Any help would be appreciated.

|improve this question
  • They also provide guidelines just below the suggestion. Have you read that? Which thing you did not understand. 1. Content is wider means user have to scroll horizontally. 2. Elements are close means your button, link, text, ads or other elements are too close with each other. Hard to give proper answer bro. – Goyllo May 20 '17 at 15:36
  • yeah but everything looks OK on website. and its responsive. the home page is mobile-friendly in the test. i dont get it. in test result google shows the site in a mobile size in the right side of the screen but its only html version without css, is that normal or its saying something? – kiasaty May 20 '17 at 15:55
  • Since you aren't seeing CSS on the mobile preview, that might mean Google can't access your CSS. Check your robots.txt file to see if you have CSS or JS files disallowed. If Googlebot can't see your CSS file, they won't be able to view the full page to tell if it is actually mobile friendly. – Matthew Edgar May 20 '17 at 16:58
  • Sharing the URL would be helpful. – Simon Hayter♦ May 20 '17 at 18:34
  • Matthew I think Google does not look into robots.txt for mobile friendly test. If OP tested that website from search console render option then robots.txt surely used by Googlebot. For both things google use different user agent. I would like to see the page URL. Something is missing. – Goyllo May 20 '17 at 18:34
3

In my experience the Google tool is just not smart enough to figure out clever CSS or other techniques you may have used to make your screen mobile-friendly. For example, I have had tables which remove columns depending on the screen width and even used bootstraps "table-responsive", but until I put in a pointless div to style "overflow-x:auto;" it reckoned the content is wider than the screen. Similarly, I drop some clickable elements on a small form factor but Google still reckons clickable elements are too close together even though they don't show on a mobile device.

It's just a dumb tool, you have to find workarounds or dumb down your content.

|improve this answer
1
  1. Content wider than screen.
    • Your page content is causing a horizontal overflow. You should be able to replicate the issue by changing the viewpoint of your browser and see if it causes an overflow. You could also try Google Fetch URL, but the results would be limited.
    • Easiest and best method for testing mobile compatibility is to use Chrome Dev Tools remote debugging on an Android device, this way you can use 'inspect element' on the mobile device, from the comfort of your desktop computer.

  2. Clickable elements too close together.

    • This one should be pretty obvious, your elements are too close.

    • SOURCE

      Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.

    • To give you an idea on the correct spacing for a mobile device and because it's a good practice, I recommend you check out Google's Material Design Metrics and keylines.

|improve this answer
  • The meaning of "Clickable elements too close together" is obvious, yes-- but which objects on the screen, exactly, are they referring to? This is not obvious. – user4994 Jul 3 at 12:54
  • @user4994 that's easy... look at your page, do any of the clickable look close? they should be more than 20 pixels apart, inspect the element using the above method mentioned for exact size. I recommend you follow best practices on spacing: uxmovement.com/mobile/… – Simon Hayter♦ Jul 4 at 16:17
  • Sure, some of the links look close, but not any closer than on the pages that Google didn't flag. If Google was able to identify close links, why can't it just tell me which ones they are? Instead, I'm playing a guessing game. I've increased line-height, I'm deploying that, and we'll see what it says about that. – user4994 Jul 4 at 16:20
  • Err? line-height increases touch space, it won't solve your problems with elements being to close to one another, you want bigger CSS based margins. – Simon Hayter♦ Jul 4 at 16:59
  • If google is complaining about links in the text that are too close together, like one atop the other in consecutive lines of text, because there's not enough line space between them, then spacing them out would solve the problem of those elements being too close to each other. That would explain why google is complaining about certain pages and not others, bc our nav buttons are the same on every page, but google only complains about certain pages. Again, this is a good demonstration of why google should just come out and tell us, instead of making us guess. Err indeed! – user4994 Jul 7 at 20:46
1

I’ve seen the same errors and the problem wasn’t obvious. I had sticky widgets that were overflowing links in my footer when viewed in the smaller viewport. I used CSS to hide the widget on smaller screens and resubmitted to Google as fixed. Google marked the problem as corrected within 24 hours.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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