: Google wrongly marks my mobile friendly site as not-friendly I have a site for creating random passwords: http://passwordcreator.org I was very surprised to get a notice that the site has mobile

@Cofer257

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.

Vote Up Vote Down

@Turnbaugh106

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

Vote Up Vote Down