Home     Contact Us

Google Mobile Friendly Guide

Mobile Example

Mobile Search Example

In November 2014 Google announced that they would introduce a “mobile-friendly” label to search results delivered over a mobile device. This label would be given to websites which had features that made them easy to view and navigate on mobile devices; things like automatically resizing text, space between links to make them easy to tap, not using technology that mobiles can’t deal with (like Flash) and no vertical scrolling. At the time Google said they were experimenting with using a measure of mobile friendliness as one of their ranking criterion.

Well they have experimented and as of April 21st 2015 mobile friendliness will be used as a ranking factor in their MOBILE search results (only affects mobile search results, not desktop). To reiterate, this will only affect a websites ranking results for searches performed on a mobile device using Google Search. Google have not given us any idea how much weight mobile friendliness will be given compared to other ranking factors.

Is Your Site “Mobile Friendly”?

First of all have a look at your analytics data and see how much you rely on mobile traffic.  If you do rely on mobile traffic then you need to ensure that your site is considered to be Mobile Friendly by Google and ideally you need to do that before April 21st. If you don’t rely on mobile traffic then you have more time to make the necessary changes. It’s worth bearing in mind that you might not have much mobile traffic or many mobile conversions because your site is so difficult to use on a mobile device – maybe if you improved the mobile experience for users then mobile visits and conversions would follow.

Google have a clear idea of what makes a website mobile friendly and they have provided a couple of tools to help us determine if a website has a mobile device display issue or not. First of all use Google’s Mobile-Friendly Test to quickly assess how “mobile friendly” a website is.

Mobile Friendly Test

A Mobile Friendly Test Result

Not Mobile Friendly

A Not Mobile Friendly Test Result

There is a simple pass/fail result. The image on the left shows a website that passes. The image on the right is for a website that fails the test and is not considered to be mobile friendly by Google. Google do provide a few clues about what the website needs to do to pass the test by providing a list of features it considers important that the tested website did not possess. Google provides explanations of these terms on this page.

If your website fails the test then you should log into Google Webmaster Tools and navigate to the new “Mobile Usability” report; see the diagram below for an example. This report provides some more specific information on the particular issues your website has and if these issues are restricted to specific pages.

Webmaster Tools Mobile Section

Webmaster Tools Mobile Section

How To Improve

If you need to improve your websites performance on mobile devices you will need to do one of two things;

1) Mobile Version. Adding code or a plugin (e.g. for WordPress sites you can use a plugin called WPTouch) to change how your website is displayed on mobile devices leaving its design and performance on a full size monitor unaffected. In many cases this is quicker and cheaper however it is not the most elegant solution.  Mobile devices are so varied; ranging from compact smartphones through to phablets and tablets that in some cases the website will not display perfectly on all of these device screens.

2) Replace your website with a Responsive Design website. A responsive design is fluid and it can automatically adjust itself to any screen size delivering a good experience to any user on any device. This is best illustrated by looking at an example. The BBC have just replaced their website with a responsive one. View this page on a full sized PC screen. Now reduce the screen size making it narrow – notice how the design changes gradually, at a certain width the navigation changes from a full horizontal one to a single MENU button with three horizontal lines which expands vertically when clicked.  You can reduce the window size until it is as small as a mobile and see how it would appear to a mobile user.

Flat html & php Sites

If you have an old website or one built using flat html or php files then your website is highly unlikely to have any design elements that make it suitable for a mobile viewer. As a minimum you will need to add a css sheet to control the design for a mobile device. Typically this will change the font size, remove flash elements and large images and restructure the navigation. The benefit of this method is that it can be quick and easy because there are some example css sheets you can use as a starting point. Also this method uses the same content as your existing website it just displays it differently. Sadly for most websites this does not work well as it’s just too hard to rewrite the website so its works well on a mobile and still looks appealing. If your website relies on good images simply hiding them all in the css will make it mobile friendly but it won’t help you keep or sell to your viewers.

The second alternative is building a second website just for mobile viewers. There are some simple templates you can start with to make this quicker and cheaper but you now have two websites to maintain and it only works well for PC users or mobile users; what about your tablet and notebook users?

In practice it is actually quite difficult to convert an old website to a high quality mobile friendly one. In addition the result is often relatively difficult to maintain and keep performing well on all devices. You will often be better off taking the opportunity to replace your website with an up to date CMS and a fully responsive design.

CMS Systems

If your website is built using a CMS system such as wordpress or Joomla then this job should be a lot easier. There are lots of free and commercial plugins that will serve a mobile friendly version of your existing website to relevant devices. An off-the shelf plugin might not be a perfect solution because they can be quite basic and not match your original websites design scheme however they are customisable especially if you buy a commercial one. Again this solution does not always work well for intermediate screen sizes and it may not work well for certain websites or provide consistent branding. In that case you might consider replacing your current theme with one of the many fully responsive themes now available.

Misterweb

Misterweb is a search engine optimisation expert providing high level organic SEO Services in the UK.