Articles

Google Mobile Friendly Algorithm Change

On April 21st Google have said that mobile friendliness is going to become a factor in the ranking in the search results. If you're signed up to Google webmaster tools then you would of most likely got an email to provide you with a report of some of the changes that are coming to the Google algorithm. This gives you plenty of time to make changes to your site to improve the mobile friendliness.

In this article we will look at some of the common problems you will face in making your website more mobile friendly to get it ready for the algorithm change.

Common Problems

Here are the some of the common problems that you will come across with this change.

Viewport Not Setup

This means that the website view port is not setup correctly on the page, the viewport allows you to define at what widths the webpage will be responsive to.

The viewport meta tag tells the browser how to behave when it renders the webpage, you can tell it how big the viewport will be.

The viewport is the section of the page in view, an example is viewing a web page on a mobile device, if it is zoomed in to display the top left of the page then the viewport has been set to be a certain width. If you can see the entire width of the page but it is zoomed out to fit it all on the screen, then the viewport has been setup to display the full width of the webpage.

An example of using the viewport meta tag is below.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

For more information on how to configure the viewport view one of my previous articles.

Understanding The Viewport Meta Tag

Touch Elements Too Close

This alert is very obvious it means that the click elements on your web page are too close to each other making it very easy to click on the wrong link. This is commonly done on the main navigation of the site where you will have a lot of links next to each you will need to change the styling to make sure there is a big enough gap between the links.

The following article from Google explains the size it recommends between different elements.

Size Tap Targets Appropriately

To summarise Google recommends that links are at least 48 pixels height/width depending on the viewport position.

Small Font Size

Again this alert is obvious, the font size on the website is too small and needs to be larger to be seen on mobile devices.

To view Google recommendations on font size you can use the following article.

Use Legible Font Sizes

To fix this problem you should use the following steps.

  1. First configure the viewport, this makes the fonts scale on different devices.
  2. Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
  3. Use sizes relative to the base size to define the typographic scale.
  4. Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
  5. Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Content Not Sized To Viewport

This alert means that some of your content is not respecting the size of your viewport and are being pushed out of it. This generally will be fixed width elements majority of the time being images, but can also be fixed width divs.

As images are majority of the problems you get with this you need to make sure that you do not have a fixed width on the images.

So instead of having an image on your site like this.

<img src="image1.jpg" width="500" height="500" />

This code will always make your images have a width of 500px, so on mobile devices this will push the image off the page. To fix this problem you should remove the width and height of the image.

<img src="image1.jpg" />

But you still need to make sure that the image is the correct size for your website so you could resize the image with either server side code like ghostscript or using an application like Photoshop.

<img src="image1-500x500.jpg" />

Now you can use CSS to make sure that the images width are never larger than the screen size.

img 
{
  display: block;
  height: auto;
  max-width: 100%; 
}

Testing Your Site

To test your site and make sure that you have met all the requirements of the new algorithm change Google has created a page to let you manually test your pages.

Google Mobile Test

Back to top