E-mail from google.
Example of an e-mail received from Google about how to fix a website that is not mobile-friendly

We have been approached by a number of potential clients that have received emails from Google like the one above. In response we have written this handy guide about what to do if you have a similar one appear in your inbox.

Current mobile usage

According to an Ofcom study produced earlier this year the number of people in the UK using their mobile phones or tablets to access the internet is still increasing rapidly.

2013 2014
Proportion of UK adults with a smartphone 51% 61%
Proportion of people who use their mobile handset to access the internet 49% 57%

Source: http://media.ofcom.org.uk/facts/

 

However tablets are now the preferred device. Those that use desktop, laptop, tablet and smartphone rate the tablet as their most important device for internet access. With more people browsing in the relaxed ‘iPad mode’, the tablet is increasingly important for ecommerce, outstripping the smartphone for accessing the internet.

Because of the rapid increase in using mobile devices to access the internet, Google are now testing websites to see if they have any critical mobile usability errors.

Any errors can severely affect how mobile users are able to experience websites. As shown above, Google have said that

“pages which do not display correctly will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users.”

Basically this means that if your web pages are not mobile-friendly then they will not rank as high on searches made on a smart phone as any of your competitors who have fully responsive websites.

Google has been dropping hints that they understand mobile experience for some time now. They recently launched mobile usability reports, a feature to help webmasters find issues with their mobile web sites. They now recommend testing your site in the new Mobile-Friendly Test tool, review their mobile friendly guidelines and use various third-party tools to go mobile-friendly with your web site.

If your website passes the test you should see the following page. It will detail how GoogleBot (Google’s web crawling bot, sometimes also called a “spider”) sees your webpage and tells you how many resources on the page have been blocked so there might still be a bit of work to do to improve the page. There are also links to other mobile-friendly help pages.

Mobile friendly pass
Screen shot for a mobile-friendly website that passes google’s test.

If your website fails the test you will see this page. It will detail the reason why it failed the test and provides links to how best to rectify the issues.

Mobile friendly fail
Screen shot for a mobile-friendly website that fails google’s test.

Once your website has passed the test it should start to show the grey Mobile-friendly label in Google searches.

Screen shot with mobile-friendly website
The grey label shows that this site has been approved as a mobile-friendly website.

When customers click through on to these websites the display fits to the screen perfectly so only vertical scrolling is needed.

Screen shot of mobile-friendly website
This website doesn’t require any horizontal scrolling.

How can I make my existing website mobile friendly?

So how do you qualify to show such a label for your web pages? Google said it depends on if GoogleBot detects the following criteria:

  • Avoids software that is not common on mobile devices, like Flash
  • Uses text that is readable without zooming
  • Sizes content to the screen so users don’t have to scroll horizontally or zoom
  • Places links far enough apart so that the correct one can be easily tapped

To achieve a mobile-friendly website you have two basic options. You can have distinct desktop and mobile sites, or better yet a single responsive site which displays on any device.

For the first option you can redirect mobile users to a completely different URL where you host a mobile only version of the site. This approach has the advantage that it’s easier to develop a lightweight mobile only version of your site. One disadvantage is that you will have two websites to maintain – desktop and mobile. Secondly, if your mobile site has another URL, such as one with a subdomain, search engines may or may not find it. Both Bing and Google advocate a one-URL approach for findability and search engine optimization.

The other option which we would recommend is the responsive approach. Responsive design is a more affordable solution that uses CSS (Cascading Style Sheets) technology to create a single version of a website that auto-adjusts to display properly on all devices. Adapting an existing website template to make it responsive can be done, however our advice is to build a new framework from the ground up as this will prevent any coding conflicts.

A responsive site allows you to reach the most active web audience. As an example, go to http://www.thebsa.org.uk Click on the right edge of the browser window and drag it to the left, shrinking the page from full screen to an area the size of a smartphone. No matter how small you make the display area, the site’s responsive design looks good and is easy to read.

What if I cannot afford the time and money to rebuild my website?

If you love your site or can’t afford to rebuild it to make it fully responsive, creating a mobile site that links to your main site isn’t the worst strategy, however ignoring your mobile audience altogether probably is! Here are some alternatives to getting a rebuild.

Simplify your site design.
View your website on a smartphone and you’ll probably see the need for design changes. To display well on mobile incorporate the following:

  • simpler page designs,
  • large font sizes,
  • critical information placed “above the fold,”
  • big, touchable buttons that are fat-finger-proof.

As a first step simply put your name, phone number and a link to a map at the top left of your home page where it is easy to find. Doing this will help you go a long way toward delivering key information on any device.

Commit to future-proof your website.
As you prepare to make investments in your business in 2015, put website redesign high on your list so you’ll be ready to reach consumers via their phones, tablets, PCs, TVs or, soon, refrigerator doors, bathroom mirrors and more.

Finally, once you get the technology right, turn your attention to creating great website content. Remember, especially on mobile devices, people access websites for four main reasons:

  • to save time
  • to save money,
  • to connect with others
  • to waste time.

So give them quick and easy access, put your contact information front and centre, provide clear call to action buttons on every page, give them links to maps and directions, and then add video or social media feeds to keep them on your site for as long as they want to stay.

If you’re interested in hearing more about mobile-friendly websites, why not get in touch? Call us on 01305 542000 and speak to one of our friendly web design team.