Mobile Optimisation Checklist

Google recently announced that as of 21st April 2015, they will be developing their mobile ranking algorithm to officially account for mobile-friendliness. Put simply, if your site is optimised for mobile, you will rank. If it isn’t, then you may well fall short.

We’ve therefore compiled this mobile optimisation checklist for you developers, SEOs and website managers to ensure your mobile sites are properly optimised for search and user experience. So whether you’re developing your mobile site now, looking to develop one in the future or making tweaks to your current configuration, this checklist will ensure you’re all set and ready for April.

Research

Google have released a plethora of useful resources to help developers with the creation of their mobile-friendly websites. If you rely heavily on organic traffic, then it’s a sensible move to hear what the search giants themselves have to say about it all.

Their Webmaster’s Mobile Guide microsite is perhaps the most extensive, but their Mobile-Friendly Test tool is worth checking out too as your first port of call. You never know, you may already have a mobile-friendly site set up. Their ‘Helping users find mobile-friendly pages’ blog post released November last year is a great read too, especially if you’re looking for a quick introduction to all this mobile optimisation malarkey.

Above: Google’s Mobile Guide provides detailed information on how to properly optimise your site for mobile

Going mobile-friendly will be a massive investment for you, both financially and in terms of your resource allocation. 21st April may well be round the corner but that’s not an excuse to rush this either. Your mobile site needs to be properly planned and executed. Maybe see this as an opportunity to really evaluate your desktop site as well? If you choose to build your site on a responsive design (see point 4), these considerations are all holistic anyway.

It’s worth determining what portion of your traffic use mobile. You can access this via Google Analytics. Head over to ‘Audiences’ on the left hand side menu, then choose ‘Mobile’ and ‘Overview’ from the dropdown menu. This will display your traffic segmented by device. Ask yourself the questions; how is my traffic distributed between devices? And, has there been any upwards patterns in my mobile metrics over the past few months?

If mobile accounts for less than 10% of your traffic and revenue, then you may have more time than you think.

These started to appear on mobile SERPs for android devices in 2013 and we don’t think it will be long until they start appearing on Google’s iOS apps, too. Maybe your web business is better suited for an app platform? Maybe you’re looking at building an app in conjunction with your website? Okay, maybe we’re pushing the boat out a little too far there but it’s all to do with the considerations we outlined in point 2, i.e. establishing your available budget/resource and what portion of your traffic uses mobile.

You need to determine how to best cater for your audience’s needs and how to deliver the best user experience for them.

Above: Twitter app appearing in mobile SERPs for android, accompanied with an ‘Install’ call-to-action button.

In our blog post earlier this month where we investigated the nature of Google’s February 5th mystery update, we stated how Google and Bing both prefer responsive design. However, there are two other options available to you, and, if implemented correctly, Google will support these also. Here’s a rundown of all three:

1. Responsive Design

Responsive design serves the same content to both desktop and mobile by using CSS3 media queries. By defining breakpoints, your site will snap to the size of the user’s browser or device.

The main advantage of this approach is no duplication occurs as you’re effectively working with one site. You have one URL and one piece of HTML code with no need for redirects to be set up. This makes the workload easier from a site management perspective and arguably the user experience smoother. However, you’re unable to have mobile specific content like you can with dynamic serving and parallel URL sites.

2. Dynamic Serving/Adaptive

This option renders your site specific to the device a user is on. You work on the same URL, like responsive, but different pieces of HTML and CSS code are presented to the user agent to render your site.

A major shortfall of dynamic/adaptive sites is the frequency you’ll have to update your code. Since it’s device specific, this will need updating every time a new mobile device is released.

3. Parallel URLs (m. subdomain sites)

Your final option is to create a separate site completely optimised for mobile that lives on an ‘m.’ subdomain. Although this has similar perks to the dynamic/adaptive configuration, it comes with its own bit of baggage, namely with implementing 301 redirects and ‘rel=canonical’ / ’rel=alternate’ tags to avoid duplicate content issues.

It’s also important to remember that you’re potential giving yourself double the workload here. Since you’re effectively working with two sites, whatever change is occurring on one site will need replicating on the other. A potential administrative nightmare, but having mobile-specific content may just be what you’re looking for, especially if you’re considering your customer’s mobile browsing motivations.

Google discovered last year that 88% of searches with local intent are on a mobile device. This implies that users are using their mobile phones as their own personal tour guide. They’re searching for information like local addresses, telephone numbers, opening times, what’s in stock, what’s not in stock etc. So, when developing your mobile site, ask yourself the question; will your customers primarily be searching for your local information on mobile? If so, there’s scope here to enhance the usability of your mobile site by introducing a site hierarchy by locality, i.e. presenting local information first. This is something AHF’s mobile site includes and it makes for a fluid usability experience.

Above: AHF’s contact landing pages on mobile presents all store information first before content

You’ll need to work out how you want your mobile site to look prior to developing. Use InDesign, Photoshop or even online wireframing tools to create some navigation mockups and remember to keep it simple. Don’t jeopardise your user experience for something fancy that hardly works, takes light years to load or doesn’t quite look right on all devices.

There’ll be certain aspects of your desktop site that won’t translate to mobile either, for example, your navigations and menus. You’ll need to be adaptive here and research alternatives. Here’s a list of different navigation and menu patterns that may come in handy.

Remember, hover states cannot be used on mobile either, so if you’re using these to reveal drop down menus then you’ll need to find alternative functionality here also.

Development

This is a factor Google considers whilst determining the usability of your mobile site. Including a meta viewport element in the head of the document will ensure your pages are optimised for a variety of device. To see whether Google has encountered any of these problems, head over to the ‘Mobile Usability’ section of Webmaster Tools. Any errors with meta viewports will be reported here.

This is another factor Google considers when evaluating your mobile experience. Having to pinch the screen to read your text really impacts on the fluidity of your site’s user experience so be sure to make your font size large enough. Google recommends starting at a font size of 16 CSS pixels with a line height of 1.2em. Increase this accordingly to suit your header tags and site’s style.

This consideration ensures that all aspects of a webpage are far enough apart so accidental tapping is avoided. There’s nothing worse than when you’re trying to scroll up or down, or trying to click a ‘buy now’ button and you end up accidentally clicking something entirely different. Avoid this mobile faux pas by ensuring all elements are large enough to tap. The recommended touch targets need to be 44px x 44px with adequate spacing in between. Aiming for these dimensions will adequately suit users, regardless of whether they’re using touch or a stylus.

If you want to see whether Google have picked up on any elements not being far enough part, view the ‘Mobile Usability’ section of your Webmaster Tools profile.

Above: Don’t let your mobile users experience the same problems Homer had in this episode of the Simpsons

This is yet another mobile usability error that will be picked up by Google in Webmaster Tools. Although users are used to scrolling vertically to see content below the fold, users are less used to interacting with content that’s part-hidden to the side of the screen. This looks messy and often resorts to the user having to pinch the screen to zoom out, resulting in a poor user experience. Avoid receiving this error by using relative width and position values in your CSS whilst making sure your images are scaled down.

Mobile site optimisation comes with it’s own considerations for site speed. If anything, it’s arguably more important on mobile as the user’s device and data connectivity also plays an intrinsic part. Obviously, these variables are out of your control, but there are still tweaks you can perform on images, minifying the code and leveraging browser caching that will help your site’s performance out.

Use Google’s PageSpeed tool to find out exactly what needs to be done to improve your mobile site speed. Google have now even introduced the capability of downloading your optimised images, JavaScript and CSS resources. You’re only able to do this for one web page at a time but still, a very handy feature!

Like desktop search crawlers, Google’s smartphone crawlers also want to render content as the user sees it. It’s therefore important not to block any CSS, JavaScript or images on your mobile site. These are now all accessible by modern smartphones anyway, so there’s no reason not to really.

Well, don’t. Flash isn’t available on all mobile browsers so you’ll end up with a discrepancy in your user experience. HTML5 is a better port of call if you’re considering using special effects.

It may sound obvious, but not all input fields on smartphone require text. Consider the field that the user will be filling out and determine whether a text keypad, email address keypad, web address keypad or telephone keypad is required. This will massively increase your mobile usability and in some cases, may result in more leads and conversions.

Let’s face it, copying telephone numbers just so you can paste them back into your dialler app can be a pain. Some users might not even been aware of how to use the copy and paste functionality on smartphones. To be safe, we advise configuring your telephone numbers so they open up in the native dialler app.

As you’re developing your mobile site, you’ll periodically want to see how it’s looking on other devices. Google Chrome and Mozilla Firefox’s ‘Inspect Element’ feature both have a toggle device mode which you can use to view sites on varied devices. Alternatively, use your friend’s or colleague’s phones.

If you’re interested in user testing, we recommend usertesting.com who now offer services for mobile and tablet as well as desktop.

Once your mobile-friendly site has been created, you need to check whether the Smartphone Googlebot can crawl and index your mobile site correctly. You can do this via the ‘Fetch as Google’ feature in Webmaster Tools, located under ‘Crawl’ on the main navigation bar. Simply input which URL you want to be crawled, change the Googlebot field from ‘Desktop’ to ‘Mobile: Smartphone’ and click ‘Fetch and Render’.

Several Fetch & Render statuses can be returned, but you’re ideally looking for ‘Complete’ to be returned with a green tick alongside it. This means that Google can successfully crawl every aspect of that page. You have a weekly quota of 500 fetches so ensure you check your top landing pages first.

Get into the habit of checking mobile and desktop results. You can do this manually or by using mobile-compatible rank tracking tools, like AWR.

If there is a discrepancy between your mobile rankings and your desktop rankings, the usual SEO procedures apply; investigate at ranking page level what on-site and off-site factors are holding you back and implement any changes accordingly. Some competitor analysis will also be valuable at this juncture too as it allows you to see how your competitors have dealt with going mobile friendly.

Summary

So there you have it, our quintessential checklist that’ll ensure your site is mobile friendly and ready for 21st April 2015. This is everything we thought of – can you think of any more? If so, share your thoughts below or by sending us a tweet.

If you’re looking at optimising your mobile experience but you’re unsure on how to action the above, get in touch with Studio-40 today. We have years of experience in digital marketing and user experience, so we’re positive we can assist. Contact us today for a free consultation.