Mobile Friendly Websites for SEO

Mobile Friendly and Google – Introduction


Google recently announced two important changes regarding its results. First, from April 21 2015, it will be using how mobile-friendly your website is as a ranking factor. Mobile users will find that high-quality relevant websites which have been optimised for their devices will show higher in the search engine results pages (SERPs).This change will be rolled out globally, and is expected to have a massive impact on rankings.

Secondly (since Feb 26th 2015), Google has been using information from apps that it has indexed as a ranking factor, but only for signed-in users that have installed the app. Google has been indexing apps in the same way it does websites for some time now, and placing deep links to specific content within the apps in its search results. Now, users with a particular app installed will find that content from that app which has been indexed is more likely to surface higher in the SERPs for them.

These changes reflect Google’s ongoing commitment to a positive experience for mobile users who are making up an increased portion of their user-base. Some 80% of internet users now own a smartphone – and the majority of users ‘multiscreen’, which means that they access their favourite sites on both their laptop/PC and mobile phone. Ensuring that your site delivers a consistent experience for both PC/laptop and mobile users has never been so important. Over and above, the majority of smartphone users use Google over any other search engine:

Smart phone users search engine share

What is a Mobile Device according to Google?

google mobile device definition

Google defines a mobile device as a smartphone, which includes Android, iPhone and Windows phones. Smartphone browsers are very much like desktop browsers – they are able to render much of the HTML5 specification, but of course, the screen size is far smaller and the default orientation is usually vertical.

Google views tablets as a separate class of devices and so the recent changes do not require website owners to optimise for tablet devices as well. Google note that tablet screens are larger in size and therefore, unless you optimise your website for tablets, tablet users will usually see your site as it appears on a desktop browser. However, in reality, tablet users will know that many websites do not render properly on their device and are difficult to use. With 47% of internet users now owning tablet devices, it makes sense to optimise for both tablets and smartphones.

Google also does not include multimedia phones in its definition of a mobile device. Multimedia phones have browsers that support HTML5 Markup but may not support a number of the extension APIs within the HTML5 standard. The changes therefore do not require optimisation for this type of phone, although Google want to encourage owners of websites targeted at multimedia phone users to follow the same best-practice advice given for smartphones.

What makes a mobile-friendly website?

Since November 2014 Google has been highlighting websites that it considers to be mobile friendly within its search results as follows:

mobile-friendly

So what makes a site ‘mobile’ friendly? Google says that there are three parts delivering a great mobile website user experience: layout, content and speed. Google provides the following criteria for a website to be eligible for its ‘mobile friendly’ label:

  1. The website must not use software that is not common on mobile devices, such as Flash.
  2. The website must use text that can be read without the need to zoom in. A minimum font size of 12 pixels is suggested, with a clean, easily readable typeface. Image-based text should be avoided where possible.
  3. The website must size content to the screen, so scrolling horizontally or zooming isn’t necessary.
  4. Links on the website must be positioned with sufficient space so that it is easy to tap the correct one. Google advises that the minimum recommended touch target is 48 dp (density independent pixels), and at least 8 dp should be left between touch targets.

In addition to the above four fundamentals, Google suggests that you should avoid using mouse-overs which don’t work on touch screens such as smartphones and tablets. Instead, replace these with buttons that can be tapped to open up deeper menus. Pop ups should be avoided too – these are just as irritating on mobile sites as they are on desktop sites.

Interstitial screens are also on the list of things to avoid –instead, you should embed a prompt in your website to drive your app downloads. Use of clearly labelled buttons is encouraged, as are breadcrumbs and concise category names to aid navigation.

Different Ways to Build a Mobile Friendly Website

As noted above, it is essential to resize your content so that it displays clearly in the user’s browser window without the need to scroll or zoom. You also need to ensure that your website is usable regardless of the device it is being viewed on. There are three options for achieving this: responsive web design, dynamic serving, and separate URLs. We will look at the pros and cons of each here:

Method 1: Responsive web design (preferred)

Responsive website design is Google’s recommended design pattern. Responsive sites serve up the same HTML code on the same URL, regardless of what device the website is being accessed on. However, the website displays differently based on the user’s screen size.

Pros of responsive web design:

  • Your content uses the same URL, regardless of what device it is viewed on. This makes it easier for people to share and link to it. It also makes it easier for the search engines to find and index it.
  • The display of content is customised to the device and device-specific features can be implemented. This creates a streamlined user experience.
  • Both portrait and landscape device orientation is catered for.
  • There are no redirects needed, so load time is cut and performance improved.

Cons of responsive web design:

  • As all HTML is shared, a lot of planning can be needed to make responsive design work for every device and user.
  • Responsive designs can still deliver a poor experience if they are not implemented properly. A common mistake is data bloat where, for example, mobile users are forced to download full-size images that are better suited to bigger screens and faster connections. Good responsive design includes reducing the number of HTTP requests, minimising CSS and JavaScript, and loading visible content as a priority.

TIP: Never block Google from accessing your CSS, JavaScript and image files. These are needed for Google to understand the responsive nature of your site and without access, Google will not label your site as ‘mobile friendly’.

Method 2: Dynamic serving

Websites built with dynamic serving use the same URL, regardless of what device the website is being accessed on – but serve different versions of the HTML for each device, based on what the server can determine about the user’s browser.

Pros of dynamic serving:

  • Dynamic serving provides a customised user experience where your content is tailored to their device.
  • It is easier to tweak the layout or content for a particular device, without worrying whether your changes will affect other devices.
  • You have greater flexibility to optimise your content for the fastest load times on any given device.
  • Like responsive web design, dynamic serving uses a single URL, making it easy to share and link to.

Cons of dynamic serving:

  • Because you have multiple pages with the same content on, any updates to a particular page or article will require an update in several places. This can be difficult to manage.
  • Although servers are generally good at detecting the correct device, this doesn’t always work 100%, particularly if detection scripts are allowed to go out of date. The wrong version or orientation of your website can be served up as a result.
  • Customisation for each device can sometimes mean that users get a difference experience, depending on what version of the site they are on. This can be confusing and feel inconsistent.

TIP: Search engine bots won’t be able to tell straight away that you are serving different versions of your HTML depending on the user’s device. To get round this, implement the standard HTTP header method to indicate to bots that that server response varies depending on user agent. As for responsive sites, make sure Google has access to all of your resource files.

Method 3: Separate URLs

Some websites attempt to detect which device is being used and then redirect the user to a different URL which has different code depending on their device.

Pros of using separate URLs:

  • Separate URLs give you the greatest flexibility to customise the user’s experience as you will build a site specifically for mobile devices.
  • You can easily change the layout or content of the mobile site, without having to worry about how the changes look on other devices.

Cons of using separate URLs:

  • Having multiple URLs means putting redirects in place depending on the device. A common mistake is redirecting mobile users who land on a deep desktop page to the mobile site’s homepage. You also need to make sure that when a mobile user shares a page and the link is visited by a non-mobile user, a redirect sends them to the correct page on the appropriate version of the site. The redirects can lead to longer loading times.
  • Managing and updating two sets of identical content is always more complicated and time consuming.
  • Bidirectional annotation is necessary to help Google understand the relationship between the duplicated content on the desktop and mobile sites. Missing annotations can be confusing and cause bots to treat the content as separate entities (and therefore duplicates).
  • The customisation of two separate sites can deliver an inconsistent experience which is confusing to the user, if implemented poorly.

Mobile optimisation fundamentals

Whichever option you choose for serving mobile-friendly content, there are three fundamental rules you must follow:

1)    You must provide the appropriate signal to Google to tell it that a page is either formatted for mobile, or to show it where it can find the equivalent page that has been formatted for mobile.

2)    You must ensure that all of your resources are crawlable and avoid using robots.txt to prevent search engines from accessing any files that are required to render the page. This includes any images, JavaScript or CSS that are needed. If Googlebot cannot access these resources, it may not be able to detect that the page is mobile friendly, and may not therefore label it as such.

3)    You should avoid mistakes that are frustrating to mobile users – examples include use of Flash as the core content of the page. Where a page offers a poor experience for the user, it is likely to see a drop in rankings, or be displayed in the search results alongside a warning.

Common mistakes with mobile friendly websites

Although many people are embracing the idea of making their site mobile-friendly, a lot of websites still include mistakes that impact the user experience for mobile users. Here are the most common:

  • Slow mobile pages: A fast loading site delivers a better user experience and this is even more important for mobile users where connection speed is generally poorer than for desktop users. Google’s PageSpeed Insights tool has its own mobile tab which includes resources for optimising the speed of your website to suit mobile devices. Speed optimisation includes eliminating render-blocking JavaScript and CSS in above-the-fold content, leveraging browser caching, optimising your images, minifying HTML, CSS and JavaScript, avoiding landing page redirects, enabling compression, prioritising visible content, and having a fast server response time.

refugeeks Page Speed

  • Blocked resource files (CSS, JavaScript, images): It is unwise to block Googlebot from accessing your resource files as this prevents Google from ‘seeing’ your website like a typical user, and can negatively impact your rankings. It also prevents Google from detecting that your site is optimised for mobile.  Use the ‘Fetch as Google’ tool in Webmaster Tools to check what Google ‘sees’ on your website. Test your robots.txt file using Google’s Robots Testing Tool. Finally, use the Mobile Friendly Test to make sure Google spots that your website is mobile-friendly. If you have opted to implement a mobile-friendly version of your website on a separate URL, make sure you test both the desktop and mobile versions of your site using these tools.
  • Irrelevant cross linking: Quite often, where there are two versions of a website on separate URLs, the links can get confused and you will find links from the mobile version to the desktop version and vice versa. Check your links carefully to ensure they are necessary and point to the correct pages within the correct version of the site – In particular this is a problem with mobile sites set up on subdomains or subfolders – when links are hard coded.
  • Mobile-only 404s: Sometimes a mobile user will see a 404 if they try to access a page that is meant for desktop users only. To avoid this, you need to detect if the mobile user has landed on a desktop page and redirect them to the equivalent mobile-friendly page.
  • Unplayable content: Some videos and types of content won’t display on mobile devices and when a user tries to access them, they will see an error message. To avoid this, you need to make use of HTML5 standards for animations, use video-embedding that can be played across all devices, and provide transcripts of your videos for users that cannot access, view or play the video for whatever reason.
  • Using interstitials: Sometimes when landing on a page, you’ll see an interstitial page inviting you to download the mobile app for the site. This disrupts the user experience and can cause problems with bots indexing your content. Google advises that you should instead user a banner to promote your app.
  • Faulty redirects: Sometimes, website redirect users from the non-mobile to the mobile version of a page (or vice versa) incorrectly, perhaps taking them to the homepage rather than equivalent content page. This often happens when you are using dynamically generated pages, which don’t map perfectly to mobile equivalents. If you use Google’s Webmaster tools you’ll see these problems in the ‘Crawl Errors’ section.

Mobile Friendly in Webmaster Tools

Interestingly Webmaster Tools has been giving specific instructions and links to help solve Mobile Friendly issues:

Mobile Support Message Webmaster Tools

However you can still try and use the mobile friendly tool to help fix issues if your webmaster tools account doesnt have specific advice.

Using the Mobile Friendly Testing Tool

The mobile friendly testing tool assesses your website against Google’s criteria for a mobile friendly site and gives you instant feedback on what you need to improve, if anything.

If a page is mobile friendly, a green message displays: “Awesome! This page is mobile friendly”. You’ll also get a preview of the website so you can see what it looks like to a mobile user.

refugeeks

If a page is not mobile friendly, a message will be displayed showing you what you need to correct – for example:

not-mobile-friendly

Google checks the site against its mobile criteria and flags issues such as the text being too small, links being too close together or mobile viewport not being set (so the website does not resize for mobile devices) (https://developers.google.com/speed/docs/insights/ConfigureViewport).

The tool also detects if robots.txt blocks Google from seeing any of the page’s resources, which can sometimes lead to it determining incorrectly that the page is not mobile friendly.

Using the Mobile Usability tool

To use the mobile usability tool your site will need to be verified within Webmaster Tools. Once your site is verified, you’ll be able to select it from the drop down list and you’ll see detailed feedback about the usability of your site for mobile users. This tracks your whole website rather than a single page and allows you to click through and see which pages are affected by each problem.

mobile-usability-tool

For each problem, detailed information on how to fix the issue and a live test tool is available:

mobile-usability-tool-2

Further Reading

  1. 25% of UK Brand sites Fail the Mobile Friendly test! 
  2. 10000 sites out of 25000 tested failed the mobile friendly test!