4

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"?

  • FWIW I think your site is very friendly on mobile and I don't have any trouble tapping on the passwords. The tables almost fit when viewed in landscape and are easily viewed and navigable otherwise. However, one thing I would perhaps change is that you seem to actively block the ability to zoom maximum-scale=1,user-scalable=0 - any reason for this? If Google was to actively penalise your site as being "not mobile-friendly" then they aren't doing mobile users any favours - IMO. – MrWhite Mar 18 '15 at 15:43
  • Thanks @w3d -- I've found Google's mobile friendly suggestions helpful and relevant for most of my other sites. Overall I'm glad they provide visibility into how their heuristics are evaluating sites. I guess this is better than many of their algorithms where you can't even find out what Google thinks is wrong with your site. – Stephen Ostermiller Mar 18 '15 at 15:50
  • I rather suspect since this seems to be new in that it is more wide-spread, as in the "let out the hounds", that this notice is ahead of some other future process that will score sites and that there will be growing pains as Google realizes the various previously unrealized "ooopppsss's". I believe that they are pinging people and that some of these pings might be somewhat out of line as they mature the process. – closetnoc Mar 18 '15 at 16:38
  • Apple recommends clickable elements to be a minimum of 44px target area. Most usability studies I've seen say something similar or larger. – Rob Mar 18 '15 at 18:16
3

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 :)

  • I like your idea for hiding the content but saying that it can be seen when the screen is rotated. I'm thinking that :after text might be an easier implementation: @media(max-device-width:479px){.widetable table{display:none;}.widetable:after{content:"Rotate your screen to landscape to see this table."}} – Stephen Ostermiller Mar 18 '15 at 17:17
  • Unfortunately chrome mobile browser on my Android doesn't re-apply the css media rules when you rotate the phone. I'm not sure how other mobile browsers handle it. – Stephen Ostermiller Mar 18 '15 at 17:24
  • @media only screen and (min-device-width:320px) and (max-device-width:600px) and (orientation:portrait) will only work on devices between 320 and 600px, it sounds like your phone is above that. Also, you can remove (orientation:portrait) and just use the between. I do a lot of mobile ux design and Android is one the easier phones to do. – Simon Hayter Mar 18 '15 at 17:27
1

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.

  • I implemented bybe's suggestions and the tool now says that it is mobile friendly. It hadn't been before. Why don't you think they will be using the same metrics that they tool suggests? I don't see why they would have released the tool unless they were basing their rankings on its analysis. – Stephen Ostermiller Mar 23 '15 at 21:49
  • Were you using that same tool that I linked? That one doesn't list the issues with click targets or prioritising visible content. – DisgruntledGoat Mar 24 '15 at 12:36
  • Yes. I updated the page since I asked the question. The passwords are no longer clickable on mobile and the tables at the bottom of the page are hidden when portrait mode is too narrow. – Stephen Ostermiller Mar 24 '15 at 12:38

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.