Is Your Website Mobile-friendly? Check Now. - Webmasters

A few years ago, I contacted Seun and pointed out what I thought was a design flaw on Nairaland. He replied that it was not a design flaw and added that Nairaland was designed that way primarily to accommodate users on mobile phones. Fast forward to 2015 and it appears Google has adopted the same philosophy.

As you may have heard, effective April 21, 2015, Google began using what they call the “Mobile-Friendly Criteria” in ranking web pages. They define a mobile-friendly page as a page that does not require mobile users to pinch their screen to make the text bigger or scroll side ways. Simply put, if your pages are not mobile-friendly, it will adversely affect your page rank. As we all know, nothing is more important than a good page rank. It can make or break a website.

Making your website mobile-friendly is not a very easy task. I say this because it is not as simple as fixing the home page or updating a CSS file. Rather you have to fix all the pages on your site or at least the ones you want to rank high on Google. To begin, you have to do the following:

1. Identify the pages on your website that are not mobile-friendly. You can do this by pasting the URL of each page on this Google link: https://www.google.com/webmasters/tools/mobile-friendly/.
If Google considers the page mobile-friendly, then no further action is required.

2. If your page fails the mobile-friendly test, Google will usually tell you what they think you should fix. Adding a Viewport meta tag usually solves all the problems. So do that before trying to fix anything else. This can be done by adding the following HTML code in your page Header:
<meta name="viewport" content="width=device-width, initial-scale=1">
(this must be in the header not anywhere else as far as I know):
After adding the Viewport meta tag, test the page again. If it still does not pass, continue fixing other parts of the page as suggested by Google.

3. One thing that can cause your page to fail the test is over-sized pictures and images. While doing some testing, I noticed that pages with pictures greater than 350 pixels in width were frequently failing. The solution to this is not to make your pictures 350 pixels or less but rather to enclose the image inside a div tag whose width is set to a percentage of the full screen width. For instance, instead of this:

<img src="images/Tiger.jpg" width="720" height="540">

you should have:

<div style="width: 100%;">
<img src="images/Tiger.jpg" style="width: 100%;">
</div>

This will now make the picture fit any screen it is rendered. If you do not want the picture to fill the entire screen, you can reduce the width from 100% (as in our example) to 90, 95% or whatever percent you want.

As I said earlier, making your web pages mobile friendly is not an easy task. But it is a task that can no longer be postponed. It has to be done now if you want your site to continue ranking high. If you know of other shortcuts in achieving this task, please let us know.

NOTE: Apart from the Google link referenced above, another resource to use to see what your site looks like on different mobile devices is mobiletest.me (but always use the Google link to check if your page passed or not).

P.S: In case your are wondering, some of the big websites in Nigeria including Nairaland and LindaIkeji passed the Google test.

Reference: Image div tag code obtained from:
http://stackoverflow.com/questions/21422648/image-resize-to-fit-screen-on-mobile-device-using-jquery-mobile