Making your website mobile-friendly: an SEO approach

Prepare for Google’s ‘mobilegeddon’ with these top user experience (UX) and design tips

With Google’s mobile-friendly update launch (21 April) fast approaching, lots of publishers are looking to get their website optimised for mobile. The search engine giant has been clear: if your website is not mobile-friendly, it could be heavily penalised, hence it will lose positions on the search engine results pages (SERPs).

Are you thinking of going mobile, but don’t know where to start or how this will affect your SEO? We’ve answered some of your questions, as well as gathered some suggestions from around the web, to show you how to get ready for the so-called mobilegeddon.

webmasters tools, mobile friendly website, meme

 

It’s all about UX and layout

Mobile-friendly optimisation is 80% about design, layout, and user experience (UX). Your website’s skin has to be able to resize fonts, boxes and images as the screens get bigger or smaller.

“How do I know if my website has a responsive design?”

Open up your website on a desktop, then make the browser window smaller. If the elements on the page adjust themselves to proportionally fit the new size and shape of the window, then your website design is mobile optimised.
mobile optimisation, responsive website, viewport, responsive theme

If your website doesn’t resize, you may need to look at changing the following items in your website’s back-end:

  • Viewport configuration – Your site’s developers may need to reconfigure the ‘viewport’ setting or it might have some limitations that need a bigger fix
  • Font – Consider resizing if the text on your site looks too small
  • Pictures – Set images to resize proportionally in your website’s style sheets (aka CSS)
  • Touch elements – Edit buttons, links and other ‘touch elements’ on the page that are too close together on smaller screens, as this makes it harder for users to ‘tap’ them on mobile.

And:

  • Unblock JavaScript and CSS that are not rendering – To test if you have blocked JS and/or CSS, check the ‘Fetch as Google’ option in Google Webmasters Tools, there you’ll see if the Googlebots are seeing your content and how.
  • Avoid Flash and other videos that can’t be resized – Especially with content in Flash mobile pages will often show an empty box, meaning a poor user experience for your visitors. A good practice is to render Flash content into HTML5.

 

The Internet Works recommends:If you haven’t given your website a fresh new look for a while, then this is the right time to do it! Get rid of your current website’s skin and get a responsive theme.

If you can’t get an all-out responsive design implemented, you may choose between dynamic serving and separate URLs options before the update lands. Google explains the different mobile configuration choices you can pick.

mobile optimisation, viewport mobile, viewport configuration

Don’t forget about SEO!

If the mobile optimisation revolution is 80% design, we believe that the other 20% is about creating a flawless UX.

“Are keyword searches affected on mobile?”

Believe it or not, queries change from device to device, especially when they’re typed from desktop and smartphones.

When looking at some of our clients’ website data, we noticed that searches from mobile tend to be shorter – usually with no more than two words. That means there’s less use of long-tail keywords (particularly when looking at non-returning visitors). The reason behind this can be the different approach some target audiences have towards search on mobile.

The Internet Works recommends: “Since every business is different, take a look at your keywords results on Webmasters Tools. Cluster them per devices and check if there are dramatic differences between mobile and desktop. If yes, you might need to adapt your PPC campaigns according to different ranges of keywords and devices.”

 

Push the local (if you have it)

If your business is both online and real-world, don’t waste the opportunity to boost your local side. The customer experience on mobile varies from business to business, depending on the needs of that customer, but being locally present on mobile can really make the difference on a long time perspective.

“How can I reach mobile users through local?”

Here’s an example of two different types of mobile users: one is a tourist strolling along Oxford Street in London at midday, the other one is a commuter on the train after work.

The tourist is hungry and fancies a good old British curry for lunch, she just needs to type “indian restaurants” into the search engine to make Google find the closest restaurants around her. If the website she chooses to browse is mobile friendly, the tourist will have no problems using it on the go to find out the key information she needs quickly to decide if she will eat there.

The commuter wants to kill some time while travelling home and browses online for a present for his baby nephew. He’s not sure of good websites to look at, so he might go for a short keyword search like “newborn babysuit”, then choose a mobile-friendly ecommerce site to browse. That website could be a fully online ecommerce or have also some local branches, maybe closer to his workplace or home. If the commuter experience has been good, he might think of coming back to that website again with his wife, and maybe finally make a purchase – either locally or online.

The Internet Works recommends: “Thinking local can be an ace in the hole to stand out from the crowd. Of course don’t forget to register your business on Google Places as well.”

“Inspire me!”

Do you need some examples of fab mobile optimised websites? These three are our favourite – they cover ecommerce, B2B, and local business.

Ocado: A UK ecommerce supermarket where users can shop all kind of products. Fully responsive, easy to navigate and very fast to load. Can you picture our commuter using this to shop from his smartphone? You bet.

Happytables: A website builder for restaurants and food businesses. The platform provides responsive templates to customise with pictures, opening hours and integrations with third parties. This is a platform the Indian restaurant near Oxford Street needs to use to get found by our starving tourist.

GitHub: A platform that helps developers and digital product guys share code, manage projects and collaborate. Think of it as a social network for programmers, used by small sites to open source projects. The responsiveness and UX are spot on for this.

mobile friendly optimised website, webmasters tools check

Let’s sum up

If you haven’t optimised your website for mobile devices yet, it’s time for you to rush in order to avoid Google penalisations.

The best practice is to get a responsive theme, as its layout is set to adapt on mobile screens.

Although the mobile optimisation is mostly related to design and UX best practices, you can also run some researches on Webmasters Tools to see if you can refine your content and keyword strategy according to queries and searches run by mobile devices.

Written by

Stef Mattana practices the dark art of SEO at The Internet Works. Stef's a fangirl of everything digital, but especially WordPress. She also likes 'ending up' people (in fiction!) in her spare time, thanks to her alter ego Chase Williams. Among other things, Stef dislikes not running and she's a bit of dog stalker.