Mobile-Friendly Websites and SEO

Illusrtation of 7 different devices viewing the same website, relating to responsive web design

Check your analytics: you probably already have at least half of your site traffic coming from mobile device users. Google will start to send traffic elsewhere if your site doesn't offer a good experience for these mobile users

Google has set an official deadline for your website to be mobile-friendly: 21st April 2015 - view the announcement here [opens in new window]

After that date, Google will impose even harsher ranking penalties on sites which aren't mobile friendly. The process has been going on for a while, with a special "Mobile-friendly" callout added to certain search starting in November 2014.

search result example from Google with grey text saying Mobile Friendly

Google's discreet but highly important comment "Mobile-friendly" started to appear in search results on mobile devices in November 2014, and things just got more serious

Probably not coincidentally also in November 2014, (Microsoft) Bing decided mobile-friendliness ought to be a more important ranking factor.

graph showing line of growth of mobile and desktop traffic in global users, 2007 to 2015 with the lines crossing over in 2014 when mobile got bigger than desktop

Mobile traffic surpassed desktop browser traffic during 2014, and is growing faster than desktop - comScore graphic via Bing Blogs

Test Your Site

Google provides their own mobile-friendliness online test (per web page, not per domain) - check it out here.

screenshot of Google Mobile-Friendly test saying not mobile friendly for the BBC websites

BBC News pages about Samsung S6 Edge: not mobile-friendly according to Google!

Google Webmaster Tools also has a section "Mobile Usability" which highlights errors in terms of things not being easy to read/view/navigate in small size.

Screenshot from Google Webmaster Tools showing the page highlighting a few mobile errors such as Touch elements too close

More Technical Mobile Website Testing Tools:

Google Developers PageSpeed Insights has long featured a mobile screen and bugged you with a wide range of alerts if your site isn't fast and up to date with technical optimizations, especially with speed, which makes a big difference with Mobile users.

To view your site (approximately) as it appears on a wide range of devices, try out the Device Emulation Mode in the Chrome Browser.

screenshot of Chrome device mode emulation showing the interface and shortcut, which is ctrl shift M

The Chrome/Chromium Browser's built-in developer tools include mobile device emulation

For those delving into the code of a website (who need more reasons to pull their hair out), another useful tool is the W3C mobileOK Checker.

Get Help Improving Your Site

We'll help out with impartial advice about improving your site for mobile accessibility. Our team includes a technical optimization specialist and web designers experienced with WordPress and custom template design.

Contact KnowledgePower for free priority recommendations about your site within 1 working day.

Mobile Accessibility Top Areas To Improve

Since no website is ever finished, no website is ever done improving for mobile. But right now (early 2015) there are a lot of sites out there which weren't designed with mobile in mind at all.

If you've been considering a completely new website design for your business, now might be a good time to take the plunge. (A new design doesn't have to mean losing your content and Google rankings, assuming your website is currently working OK and you are not changing domain name!)

If you are not changing your site design, then it's a matter of tweaking the template and styles that are already in place. You don't have to change lots of things at the same time: every little improvement will help your users.

Here's our top 10 used as an informal mobile improvement checklist when we discuss the topic of mobile accessibility with our business clients:

  1. Speed (test your own site in 3G... or even 2G!)
  2. Text size (give the mobile phone to your elderly parents to try reading)
  3. Layout, spacing of overall template - when squashed into a small physical screen size (and possibly lower pixel resolution)
  4. Consider alterations to the normal page flow, to put important things "above the fold" instead of a clutter of navigation links or banners normally at the top of your homepage
  5. Presentation of images and video (size and responsiveness)
  6. Navigation, links, and buttons - for touch/tap, not cursor/click
  7. Forms and input fields (simplify!!)
  8. Get rid of design elements which aren't visible/useful to the user when very tiny
  9. Get rid of website elements such as popups, sliders, etc which block the main viewport in small screen view
  10. Don't use Flash (e.g. use an HTML5 video player)

*Although this is by no means unique to mobile users, slow-loading pages could be slower for mobile because of users on 3G (or worse!) connections and using browsers without a lot of CPU/RAM power for rendering complex pages. Read an in-depth case study of the effect of page speed on SEO here [Moz: "our conclusion is that sites with faster back ends receive a higher rank, and not the other way around"]

A useful mobile website improvement checklist is Google's own advice from 2013.

Blackboard illustration showing sketches of a website layout for different screen sizes especially mobile

Will it be "back to the drawing board" for your whole website template? How much work...time... cost is involved? Contact KnowledgePower for a free assessment.

Further mobile optimization issues

  • There are cases (such as complex websites with many company departments collaborating,  and large ecommerce sites) where it makes sense to have a separate, mobile-only website. In these cases you'll need to check how your (temporary) redirects work, watch out for duplicate content issues, and ensure you give users reasonable options to 'force' use of the full-fat desktop version if they want.
  • In all other cases, it's considered best practice to have a responsive website which serves up the same pages/URLs to mobile devices, but scales down correctly when viewed on smaller screens ... or to be truly correct we should say, scale UP well onto desktop screens [click here to read more about "Mobile First" web design principles]
  • In general you may have to take a more critical look at your website content and navigation when you start looking through the eyes of mobile users. You might find yourself simplifying fancy bits of design and improving colours and contrast for readability. And mobile users shouldn't be expected to pay as much attention or expend as much effort as desktop users. Masses of text and complex navigation may be OK for desktop skimmers, but are more likely to make mobile browsers give up. It's important to think about the mobile (touch) input usability of your contact forms and search boxes, too.

Assistance from KnowledgePower

KnowledgePower is a digital marketing agency based in Hampshire, UK. We assist local and international businesses with online advertising campaigns, and this includes improvement of the design and content of web pages. Your AdWords and other ads will work much better if your pages display well for mobile users as well as desktop users. As we've seen above, being mobile friendly is increasingly important for SEO.

Contact KnowledgePower for free priority recommendations about improving your site for mobile viewing.