Google wrongly marks my mobile friendly site as not-friendly

Question

I have a site for creating random passwords: http://passwordcreator.org

I was very surprised to get a notice that the site has mobile problems because it is mobile friendly. Here are the things that Google is complaining about:

Size content to viewport

Google is complaining about the tables at the bottom of the page. Tabular data is nearly impossible to fit in the width of a mobile device.

It is only those tables at the bottom of the page that are outside the viewport. They don't push the content at the top of the page out of the viewport. If a user gets that far down the page and is interested in that data, I don't have much choice but to allow them to scroll right.

The only remedy that I see would be to hide those tables on smaller screens. That would make the mobile experience worse, not better. It would remove functionality from mobile.

Click targets too close together

Google is complaining that the passwords are too close together:

The only reason that they are clickable is because clicking them selects the entire password. This makes them easier to copy and paste.

They are close together, but it doesn't hurt mobile usability. Clicking doesn't take you away from content. It's easy enough to try again if you miss.

Possible remedies would be:

• Make them not clickable on small screens (which would make the site less usable)
• Move them further apart (fewer will be visible which makes the site less usable)

Prioritize visible content

Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content.

This is one that the tool is just flat out wrong on as far as I can tell. There is only one network request. The site uses no images. All the CSS and JS is inline. There aren't even third party calls for ads or analytics:

---

What can I do about this?

Do I have to make my site worse for this Google algorithm if I want to retain mobile rankings? Are there any ways to mark items as "not a problem in this case"?

Answer 1

As you know the major problem here is that you tables are causing the lower part of the page to overflow. While this may only seem a problem until you get to the bottom it actually becomes a problem on some devices the moment they stroke their screen. This is because they may stroke the touch screen at an angle and will result in shifting the page to the right.

This problem is actually a easy one to fix but your need to think of a solution that works for, if you simply don't have the time then a simple display:none; will do the trick i.e:

@media only screen and (max-width: 40em){#howsecure, #howsecurerandommix, #tablearearandommix, #howsecurewritable, #tableareawritable, #howsecureshiftless, #tableareashiftless, #howsecurefakeword, #tableareafakeword, #howsecurecommonwords, #tableareacommonwords{display:none;}}

It's also worth mentioning that Google is stupidly trying to cater for iPhones 3G or similar that uses lower than 300px-600px. Nowadays mobiles are commonly found above 600px in the US and UK, and phones that are below that can be rotated in landscape mode. Your tables are readible above 600px so you can serve the table for those below 600 in landscape.

You could use media queries that inform users to rotate their screen while pleasing both Google and your Users experience.

Something like:

<div class="tablewrapper">Table in Here</div>
<div class="notsupported">Sorry your phone is not supported</div>
<div class="rotatemobile">Please rotate your phone into landscape</div>

.notsupported, .rotatemobile{display:none;}

@media only screen and (max-width: 319px){
    .tablewrapper{display:none;}
    .notsupported{display:block;}
}

@media only screen and (min-device-width:320px) and (max-device-width:600px) and (orientation:portrait){
    .tablewrapper{display:none;}
    .pleaserotate{display:block;}
}

Another option would be to change the format of your table using JavaScript using: var width = screen.width; and then insert widths into the TD's like <td width="100%> so then each table field is 100% resulting in be readible in a portrait format.

The other solution I can think of is binning the table all together and use bootstrap, or zurb foundation as its much simplier to address these issues. Simply using <div class="small-12 medium-2"></div> would fix this issue. There's plenty of other ways to address this issue I'm sure, maybe you could just ignore Google :)

Answer 2

I would wrap the tables in a scrollable div. That way they do not affect the 'width' of the page and on mobile it stays at 'device-width'. Something like:

<div class="table-wrapper">
  <table>...</table>
</div>

With CSS:

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

For the 'click targets' issue I would suggest adding some padding to the password blocks (4-5px). That will work better for aesthetics, too.

Finally, I wouldn't really worry too much about the problems shown by this tool. Although Google will be 'penalising' mobile-unfriendly sites, I don't think they're going to be using those metrics directly. See this tool that says your site is mobile friendly

I think as long as you have your meta-viewport tag you should be fine.