How to pass the Google Mobile-Friendly Test, for legacy sites

They’re calling it mobilegeddon, but some call it mobilepocalyse.  That was the date when Google released its mobile-friendly algorithm to give an advantage in mobile search results to those sites that can pass its Mobile-Friendly Test. Here is an excerpt from Google

“Starting April 21, 2015, Google Search will be expanding its use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in Google Search results. “

Sites that pass this test get a Google mobile friendly tag when their site shows up in search results.

Note that this only affects mobile searches. google-mobile-friendly-label-300x152 How to pass the Google Mobile-Friendly Test, for legacy sites

 

 

 

Here is the Google Mobile-Friendly Test:

https://www.google.ca/webmasters/tools/mobile-friendly/
lucarinfo-mobile-friendly How to pass the Google Mobile-Friendly Test, for legacy sites

If your site passes this test, you are rewarded with a green tag containing the message,“Awesome! This page is mobile friendly.”

This test is connected to another test called Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/

To pass the test, you need a score of about 80% on both Page Speed and User Experience for Mobile. Also note that your webpage has to be mobile friendly for a minimum width of 375px, not 320px, to pass this test. And it might even pass for 480px or more if your score in other aspects is high enough to give you an average of 80%.

If it’s a newer site, it’s much easier to make it mobile friendly. Older sites can be a bit more challenging. This blog post has some helpful tips for retrofitting older sites that might use floats, legacy code, or tables for layout.

What to keep in mind:

1- the goal is to make it mobile friendly for at least 375px wide
2- it’s best to view your mobile optimized site on Google Chrome for this test if you’re viewing it on a desktop. You can always adjust it later for other browsers.

5 main checkpoints that you’ll need to watch out for:

  • Incompatible Plugins – avoid using Flash and the kinds of plugins that most mobile browsers don’t support. YouTube Videos are fine. More about that below.
  • Content Wider Than Screen – try to make your content fit within the viewport for mobile users, so there is no horizontal scroll
  • Links Too Close Together – make your links and buttons large enough for mobile users to press
  • Text Too Small To Read – make your font big enough for mobile users to read
  • Mobile Viewport Not Set – specify a viewport for your webpage, or make sure it adapts to different devices

Set Mobile Viewport – HTML

Some sites are considered mobile friendly even without their viewport set, because their text is large enough, and the page doesn’t need horizontal scrolling.

But this is pretty easy to add to your webpage, in the head section. Here is the line of HTML code to add. It is preferable to use the first one:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

or

<meta name="viewport" content="width=device-width" />

 

How to update your CSS stylesheet for mobile:

Assuming that you have a div id=”wrapper”, and it has a min width of 980px for desktop. Then what you might add to your CSS stylesheet could look something like this. Explanation below:

@media only screen and (min-width:980px){
#mobile {display:none;}
#desktop {display:block;}
}
@media only screen and (max-width:979px){
html, body {font-size: 16px;} 
#wrapper {width:100%; max-width:100%; min-width:375px;}
#mobile {display:block;}
#desktop {display:none;}
.sidebar {float: none;}
img, input {max-width:100%; height:auto;} 
a {word-wrap:break-word; padding:0 10px;} 
table {max-width:100%;}
ul#menu {max-width:100%; margin:0 auto;}
#menu li {display:block;text-align:center;} 
.video-container {position:relative; padding-bottom:75%; padding-top:35px; height:0; overflow:hidden;} 
.video-container iframe {position:absolute; top:0; left:0; width:100%; max-width:420px; height:100%; max-height:315px;} 
}

 

EXPLANATION

Uses Incompatible Plugins – CSS

This is the code for YouTube Videos. You could give them a class=”video-container”. Then in your CSS stylesheet:

.video-container {position:relative; padding-bottom:75%; padding-top:35px; height:0; overflow:hidden;}
.video-container iframe {position:absolute; top:0; left:0; width:100%; max-width:420px; height:100%; max-height:315px;}

 

For other plugins that aren’t supported, you could try an image replacement. Then give the unsupported plugin an id=”desktop”, and the image replacement an id=”mobile”.

@media only screen and (min-width:980px){
#mobile {display:none;}
#desktop {display:block; }
}
@media only screen and (max-width:979px){ 
#mobile {display:block;}
#desktop {display:none; }
}

 

Text too Small to Read – CSS

Font size 16px is what Google recommends for a baseline.

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

 

Links Too Close Together – CSS

Another problem you might have in addition to links that are too close together, is links that are so long, they force the page to be wider than it should be. The following CSS code addresses both problems:

a {word-wrap:break-word; padding:0 10px;}

Content Wider Than Screen – CSS

Images can sometimes be too large for the viewport. So can input fields for forms and searches. Here is a line of CSS code that can handle both problems:

img, input {max-width:100%; height:auto;}

 

Tables used for data and Tables used for layout

table {max-width:100%;}

What about tables used for layout?

You could either remove the widths, give them CSS  classes, change px widths to percentages, or use this neat trick. Say for a table with a fixed width of 500px (HTML):

<table style="display:block; max-width:500px;">

Floats

Assuming that you have a sidebar (class=”sidebar”) with a float, then this is what you would add:

.sidebar {float:none;}

Menus

Assuming that you have a horizontal menu with an id=”menu”. Then

ul#menu {max-width:100%; margin:0 auto;}
#menu li {display:block; text-align:center;}

 

In Conclusion – CSS

Again, putting it all together and assuming that you have a horizontal menu with the id=”menu”, a sidebar (class=”sidebar”) with a float, then this is what you might add to your CSS stylesheet. Of course, you would have to modify it for your particular site, but basically:

@media only screen and (min-width:980px){
#mobile {display:none;}
#desktop {display:block; }
}
@media only screen and (max-width:979px){ 
#mobile {display:block;}
#desktop {display:none; }
html, body {font-size:16px;} 
#wrapper { width:100%; max-width:100%; min-width:375px; } 
img, input { max-width:100%; height:auto; } 
a {word-wrap: break-word; padding:0 10px;} 
.sidebar {float: none;}
table {max-width:100%;}
ul#menu {max-width:100%; margin:0 auto;}
#menu li {display:block;text-align:center;} 
.video-container {position:relative;padding-bottom:75%;padding-top:35px;height:0;overflow:hidden;} 
.video-container iframe {position:absolute;top:0;left:0;width:100%;max-width:420px;height:100%;max-height:315px;} 
}

 

Final Check

Tried to cover all the bases, but there might still be some elements that stick out from the viewport, stretching the page to make it wider than it should be and making horizontal scrolling necessary. Just do a final check to see if you missed anything.

Hope some of this helps 🙂 Let us know by commenting below..

{ 4 comments… read them below or add one }

Farooq March 23, 2017 at 7:58 am

you made my day,,, bookmarked this page and going straight to apply these steps on my blog..
Thanks for the hardwork.

Reply

lucarinf April 3, 2017 at 7:09 am

You’re welcome. Your WordPress blog appears to be mobile-friendly too.

Reply

Justin March 23, 2017 at 11:27 am

Hey there,

Any idea on a simple way to get my site to pass mobile friendly test? I’ve tried all the methods listed in your article, and not quite getting it there. Any help you can provide me would be greatly appreciated. I’ll throw you a backlink if you can help me.

Thanks,

-Justin

Reply

lucarinf April 3, 2017 at 7:00 am

Your WordPress site’s homepage does pass the mobile-friendly test. https://search.google.com/search-console/mobile-friendly?id=gkEwoIqTQFb3ORaNsQwEIA

For more information on how to make a WordPress site mobile-friendly, you can check out this page by Google: https://developers.google.com/webmasters/mobile-sites/website-software/wordpress

Reply

Cancel reply

Leave a Comment

Previous post:

Next post: