Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Assessing Mobile Usability With Google Webmaster Tools

Back in 2013, Google officially announced1 that it would begin to penalize websites that provide a faulty user experience on mobile devices. Specific examples included redirecting inner URLs to a home page when viewed in a mobile version of a website, as well as showing 404 errors to people attempting to access pages on mobile.

Toward the end of 2014, a Google spokesperson hinted that the mobile user experience would become a ranking factor2. In January 2015, a number of website owners received messages warning about mobile usability issues on their websites, linking to a section of Webmaster Tools where they could review the problems.

Mobile usability warning sent to owners of sites registered in Webmaster Tools3
Mobile usability warning sent to owners of websites registered with Webmaster Tools. (View large version4)

In this article, we’ll review how to flag mobile issues in Webmaster Tools, explain the most common issues and learn how to assess mobile usability problems on your website based on these flags. Because mobile usability has become a greater priority in Google’s ranking algorithm, ensuring an optimal mobile experience on every website has become more important than ever. See the search results below, where Google has marked a dedicated mobile website (DP Review) and a responsive website (CNET) as being mobile-friendly. The result for PC Magazine lacks this label.

Example results from a Google search on a mobile device5
Results from a Google search on a mobile device. (View large version6)

Taking a look at each URL shows us clear reasons why DP Review and CNET earned mobile-friendly labels and why PC Magazine did not and ranks below the others. Not only does the PC Mag link not go to the proper mobile version of the website (which does exist), but it also delivers a popup promotion with a tiny close button that’s awkward to tap on mobile.

Mobile pages for each search result from the previous image7
Mobile pages for each search result from the previous image. (View large version8)

Setting aside the legitimate mobile issues, not only will people drop off of your website after a poor experience, but also your organic search traffic might decline because rankings can suffer in mobile search results. On the flip side, when you do improve a problematic website, you could see a vast improvement in organic search traffic, as we’ll see in the following example.

My agency built a new website to replace one that had many of the mobile problems we’ll review in this article. The original website contained a number of Flash elements, lacked any viewport configuration, and contained tiny text and touch elements when viewed on a mobile screen. The new website was built in a responsive format, eliminating these issues. Within two months of relaunching, the website saw a 44% increase in new users from organic Google searches on mobile devices, twice the increase seen on desktop. While a number of other factors certainly played a role, such as content refinement, the fact that mobile showed such a significant increase reflects the value Google ascribes to mobile usability.

Finding Mobile Problems In Webmaster Tools Link

In order to review mobile issues flagged on your website, you’ll first need to install Google Webmaster Tools. While many websites already run Webmaster Tools, some do not, and so here are brief instructions to set up. Navigate to the Webmaster Tools9 page, and log in with your Google account. You’ll see a field to enter your URL. Then, select “Add a Site.”

Next, you’ll need to verify the website. Webmaster Tools will show the various methods of doing so, including uploading an HTML file to your website, adding a meta tag or signing into your domain name’s provider. You can also verify via Google Analytics or Google Tag Manager if either code is in place on your website and you have access to the account. If you’re running a WordPress website, a plugin such as Yoast’s WordPress SEO will allow you to verify Webmaster Tools easily by copying and pasting a number from the meta tag into a field in the plugin.

After setting up Webmaster Tools on your website, you might not see any data in the interface for a few days. Submitting a site map10 could speed up the process of crawling and indexing your website.

You’ll find the “Mobile Usability” section under “Search Traffic” in the left navigation bar. This will show you what errors, if any, have been found on your website. Click any of the error categories to see specific URLs flagged for each.

Mobile-specific warnings in Webmaster Tools11
Mobile-specific warnings in Webmaster Tools. (View large version12)

Google shows mobile issues in six main categories:

  • Flash usage,
  • viewport not configured,
  • fixed-width viewport,
  • content not sized to viewport,
  • small font size,
  • touch elements too close.

To fix these issues, look at the flagged URLs and determine what edits need to be made.

Regarding “Flash usage,” any Flash elements will not render properly on most mobile devices. For example, when I try to access We Choose the Moon13 from an iPhone, it prompts me to download Flash to experience the website. Well, I obviously can’t install Flash on my iPhone, so I can’t experience this website at all on mobile.

This website contains Flash features unviewable on a mobile device
This website contains Flash features that are unviewable on a mobile device. (View large version14)

Fixing this problem simply means restructuring the website to not include any Flash when served on a mobile device.

“Viewport not configured” means that the website is not scaling properly to the device’s size. See the website below, parts of which are cut off in small browsers.

Site with improperly setup viewport15
A website that is improperly set up for the viewport. (View large version16)

Use the meta viewport tag to ensure that the height and width of the website change based on the size of the phone or tablet’s screen. Inserting the following code into the head of the website will cause it to resize and rearrange elements to fit various screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1">

In this code, width=device-width will automatically size the width of the website to the size of the window in which it is being viewed. And initial-scale=1 will set the zoom level of the website to 100%, scaling the website to fill the window regardless of the screen’s size. With this attribute in place, content will reflow when the phone or tablet is flipped from vertical to horizontal orientation.

“Fixed-width viewport” refers to pages that are set up to show at a specific pixel width. This is problematic when a website does not properly scale to an unexpected screen size. So, utilizing device-width in the viewport meta tag, as in the previous example, will enable the website to scale based on any device’s screen size.

Site with fixed viewport17
Website with fixed viewport. (View large version18)

For instance, note how the navigation cuts off on the right side of Anthem’s website, shown in the screenshot above. This website includes the viewport meta tag but uses it to define a specific width.

<meta name="viewport" content="width=1100" />

Replacing width=1100 with device-width would cause the website to scale to the width of the browser, fixing the issue. Of course, the developer would likely want to address issues with how elements on the website adapt to changes in size, as well.

“Content not sized to viewport” indicates that the users with small browsers need to scroll from side to side to view elements (as in both the fitness and Anthem examples). This can prove annoying, especially on a phone. Replacing absolute positioning with relative positioning in the CSS would likely help to fix this problem. For example, note how elements in the website below are side by side in a larger browser but stack on top of each other when the browser is smaller.

Scaling the placement of elements on a responsive website based on screen size19
Scaling the placement of elements on a responsive website based on screen size. (View large version20)

“Small font size” flags text too small to easily read on a page. This can occur both from fonts that are too small as well as from insufficient vertical spacing between text. To avoid this, Google recommends21 starting with a base size of 16 CSS pixels and modifying up or down from there.

This website with a small font size is practically illegible on an iPhone without zooming.22
This website with a small font size is practically illegible on an iPhone without zooming. (View large version23)

“Touch elements too close” indicates that a user might have trouble tapping a specific button, navigation element or form field if it’s too small and jammed next to other clickable elements. This problem can cause frustration because a user might select a different button than intended. For example, see how several links in the following image are stacked close together, making it difficult to select a particular one on a phone.

Webite with touch elements too close on a phone24
Website with touch elements too close on a phone. (View large version25)

To fix this problem, put enough space between buttons and links so that even on the smallest devices users will not have trouble selecting one. Adequate spacing is least at least 7 millimeters or 48 CSS pixels26 for these elements. Tweak this spacing to ensure that users do not encounter annoyances on a mobile device. In addition, think about what elements you will actually need to show phone users. In the example shown above, these users likely wouldn’t need to see all of the links and could have a much simpler experience with a few important links.

Beware Of False Flags Link

In the example shown earlier, I took a closer look at URLs flagged for “Flash usage.” I found that several of these pages include blog posts with embedded YouTube videos, whose content is served within an iframe (via the default embedding code). While these videos do show up as Flash at times, such as when viewed on a desktop page, they appear in HTML5 format on phones, playing with no problem. Ironically, even though it owns YouTube, Google has not picked up on the fact that YouTube changes the format of videos served when embedded on websites, depending on the device.

So, be sure to actually check the flagged pages to see whether issues are indeed legitimate. Keep in mind that Google’s automated crawling might not always show 100% accurate results. Although you can’t keep warnings about these pages from showing up, you could select an issue and choose to recheck the live version. Over time, Google will likely refine its methods for testing to filter out false flags.

Don’t Rely Completely On Google Link

On the other hand, don’t expect Google to pick up all potential problems with mobile usability. Just because you don’t see any errors, your website might not necessarily appear perfectly on all mobile devices. Test your website thoroughly across multiple devices and browsers to ensure a positive experience with website speed, appearance and interactivity.

Keep an eye on mobile metrics in Google Analytics to find potential usability issues. A key report to watch is found in “Audience” → “Mobile” → “Overview,” showing data for mobile, tablet and desktop traffic and engagement. For example, watch to see whether a high percentage of users on mobile devices are bouncing, especially if this number is much higher than for the desktop. Also, look at the average session duration for mobile devices to see whether the experience seems abnormally short or long. Overly brief or lengthy time spent on a website could indicate that people are either leaving right away out of frustration or are confused, taking too long to find what they wanted.

In addition, use heatmapping tools such as CrazyEgg27 and HotJar28 to analyze website usage beyond what Google’s tools can tell you. All of these tools show how users interact with mobile specifically, including data such as where they click and how far they scroll. This data could reveal problems, such as users not scrolling all the way to the bottom on a long mobile page or not clicking buttons that appear too small on a mobile device.

For instance, based on heatmap data, we discovered that few users on phones were scrolling down to a form on a particular landing page. We then added functionality to allow users to tap a button at the top, causing the page to immediately scroll to the form. Afterward, we experienced an increase in form submissions.

Google Webmaster Tools is a helpful starting point for analyzing mobile issues on your website. If you receive warnings, don’t ignore them. Take time to look at the problems and identify opportunities to improve your website’s mobile usability. Ultimately, your goal is to make the website the best experience possible for mobile users, not just to obsess over your rankings in Google. However, Google will reward positive user experiences.

Final Notes Link

(da, al, ml)

Footnotes Link

  1. 1 http://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-of-smartphone_11.html
  2. 2 http://searchengineland.com/google-may-add-mobile-user-experience-ranking-algorithm-205382
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/03/01-message-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2015/03/01-message-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-mobile-results-opt-small-1.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-mobile-results-opt-small-1.jpg
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2015/03/03-mobile-page-examples-opt.jpg
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/03/03-mobile-page-examples-opt.jpg
  9. 9 https://www.google.com/webmasters/tools/
  10. 10 https://support.google.com/sites/answer/100283?hl=en
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/03/04-mobile-usability-warnings-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/03/04-mobile-usability-warnings-opt.jpg
  13. 13 http://www.wechoosethemoon.org
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/03/05-flash-site-opt-small.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/03/06-viewport-problems.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/03/06-viewport-problems.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/03/07-fixed-width-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/03/07-fixed-width-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/03/08-site-scaling-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/03/08-site-scaling-opt.jpg
  21. 21 https://developers.google.com/speed/docs/insights/UseLegibleFontSizes
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/03/09-small-font-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/03/09-small-font-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/03/10-touch-elements-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/03/10-touch-elements-opt.jpg
  26. 26 https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately
  27. 27 http://crazyegg.com
  28. 28 http://hotjar.com
  29. 29 https://www.distilled.net/training/mobile-seo-guide/
  30. 30 http://www.thesempost.com/new-google-mobile-algo-google-begins-reducing-visibility-non-mobile-friendly-sites-received-warnings/
  31. 31 http://searchengineland.com/google-mobile-friendly-ranking-factor-runs-real-time-page-page-basis-216100
  32. 32 http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
  33. 33 http://blogs.bing.com/webmaster/2014/11/20/bing-and-mobile-friends/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

As Director of Digital Strategies at Overit, Tim Jensen oversees web advertising and analytics for a number of small and medium-sized businesses in a variety of industries. With a degree in Mass Media and experience ranging from freelance work to a full service agency setting, he has worked on countless campaigns that touch multiple aspects of both digital and traditional marketing strategy.

  1. 1

    Google needs to keep it’s nose out of people’s website business. Who cares if someone’s site is mobile-friendly or not? It’s the company’s loss if it isn’t, right?
    It’s like saying you need to wear a helmet when you ride a bicycle. Why is someone telling me what to do with my own head? It’s my head and if I want to break it open I should be able to.

    -31
    • 2

      It is Google’s business to make sure that people searching find what they need. If a person is on a mobile device that means a good mobile-friendly site is what is best for them.

      Likening this to ‘forcing people to wear helmets’ is probably not a good analogy. This isn’t a law that can be enforced by a ticket or arrest by the government that is for public good (just like seatbelts btw). This is a privately-owned search engine that makes money by displaying ads people click on paid for by businesses that get value from those clicks somehow.

      You are still more than welcome to go to non-mobile friendly sites on your own. They don’t stop people via the browser (or does any other mobile browser)…

      18
      • 3

        Sometimes what I need is the information on the page I searched for, not a 404 or redirect to a homepage just because I’m using my mobile phone to search for it at the time. I’m all for Google showing me which results are mobile friendly, but not limiting my browsing based on that info.

        8
      • 4

        “It is Google’s business to make sure that people searching find what they need.”
        If that’s the case then why do paid search results come before organic? Google is in the business to make money off advertising, not to give people the best results.

        6
    • 5

      You should fax them a strongly worded letter. Google is a search giant ignoring what they say is shooting yourself in the foot with both barrels. It frustrating but in many ways they are right we would still be building sites with tables if it was not for this sort of pressure on the industry that comes from search engines. I suppose you don’t want to add schema.org to your site either, they are new features and say what you like about google. If you used the internet in Altavista days you would be fighting the porn sites for every search on the planet.

      -2
    • 6

      It’s google’s reputation at stake. If they provide search results which are not usable to the user, they loose credibility – so don’t worry, they are not poking nose in your business rather making theirs strong…

      2
  2. 7

    Hi Tim,
    Thanks for the great information. I am so glad that Google provided a mobile-friendly app for everyone. Keep sharing great stuff like this!!!

    -1
  3. 8

    To be honest I think that mobile optimization is the responsibility of the ‘WordPress Theme’ Designer. They should provide an update that automatically makes the mobile issues google friendly.

    That’s part of what you pay the money to buy the templates for. Just my opinion.

    Regards, Damien

    0
    • 9

      Michael Ward

      March 27, 2015 5:09 pm

      I’m not using WordPress, but based on your advice I am currently lambasting a WordPress Theme designer because my site is not mobile friendly.

      You’ve helped greatly! :)

      0
    • 10

      Well, that’s really the beauty of WordPress. If your theme is not mobile friendly, you can just change to one that is and you’ll still have all your content.

      1
      • 11

        I believe WordPress will also allow you to use two themes, if desired – one for desktop visitors and onr for mobile visitors.

        0
    • 12

      I am a web/user experience designer who designs primarily for WordPress, and we often have clients ask us if they can just install a plugin or “make” their website mobile-friendly. While there are ways to reprogram websites to literally just respond, I appreciate Tim pointing out that mobile-friendliness is more than just a website responding to your screen.

      Many people need their static sites redesigned, not just converted, because of things like button design and placement, typography issues, hidden content or overloaded content, and disorganization. As a designer, I am glad to have Google backing us up on the importance of user-friendly design, and as a user I’m happy to have search results that I can easily navigate!

      1
  4. 13

    I loaded a “light” dedicated mobile site within my “classic” site rather than going the dynamic route as Google suggests. While Google “suggests” dynamic, they also say dedicated mobile sites are also acceptable. Users on mobile sites don’t always need all the information of the classic website. If a user has a larger mobile phone screen they can turn their phone sideways hit refresh and they can see the classic website. Mobile users with the larger screen phones get the best of both worlds because they can actually toggle between mobile and classic websites using this method. Two distinct webpage styles give both the mobile and classic users web experiences designed specifically for them without having to go to the one style cookie cutter dynamic website that is only mediocre for both types of users.

    Yes I know it is more time and energy to maintain two formats and not what the pros are suggesting (dynamic), but it can be more affordable to businesses without the money to rebuild a whole new website and can also provide a boutique browsing experience to both mobile and classic web users.

    -5
  5. 14

    It is a difficult task to get your mobile website tested across multiple devices, but if doing so can improve your sites usability, then I think every site owner should try to get it done. Thanks for mentioning the tools to improve your mobile sites. The post is very helpful.

    1
  6. 15

    Shannon Margel

    March 28, 2015 4:00 am

    I’m impressed, I have to admit. In fact rarely will i encounter a weblog that’s both educative and entertaining, and without a doubt, you could have hit the nail about the head. Your notion is outstanding; the problem is an concern that not enough men and women are speaking intelligently about. I’m pleased that we stumbled across this at my search for some thing relating to this.

    -3
  7. 16

    I wish there was some intelligence to “content not sized to viewport ranking”, right now the only content on my site that fits that description is banner ads… and it doesn’t really impact user experience of the actual content. As a publisher, you’re kind of stuck between not displaying ads, either “display: none” or different themes by viewport size, or hiding content outside the viewport, which likely violates the TOS of whomever ad provider you’re serving, or getting google warnings for banner content that’s outside the viewport.

    2
    • 17

      I totally agree with Jeff. I have several responsive websites designed and it never was any issue with them displaying correctly on mobile devices. Ever since this crap with “content not sized to viewport ranking” they started to drop in rankings. It’s simply another trick to manipulate search results, if you ask me. I never hear about Yahoo and other search engines changing their standards, policies and algorithms as often as Google. The “impartial” notion is long gone with Google and if you ask me is probably the most biased and manipulative search engine that ever existed on this planet.

      0
  8. 18

    Hi Tim,
    This is nice article of information, and I love it. From your article I learn that from now I will have to start learning more about mobile usability for my site.
    Thanks again Tim, I will try to apply this information from yours to mine.

    0
  9. 19

    Jonathan May

    April 16, 2015 5:14 pm

    A question: for some (not all) of the WordPress websites I maintain, Google is displaying “not mobile friendly” warning messages in Webmaster Tools for FOLDERS in the WordPress file structure. These are folders within the /uploads directory. For these folders, they are flagging the font size being too small, the link elements being too close together, the content extending beyond the viewport. Obviously, these errors don’t apply to folders — a folder isn’t displayed to the user! Is this just an example of Google needing to refine their mobile-friendly algorithm? Is there something I can do to eradicate these messages? My client is concerned their site won’t be tagged as the “Mobile friendly” due to these warnings, and that their search ranking will fall.

    3
    • 20

      Jonathan May

      April 16, 2015 5:15 pm

      By the way, thanks for the article! Good info indeed.

      0
    • 21

      I’d like an answer to this too. Very strange of Google to be grading folder indexes as if they were seen by anyone. It worries me, too. Should those folders be disallowed in robots.txt?

      0
    • 22

      I would love to see and answer to this too! Pretty much all of my “page issues” are folders to images etc. Anyone have an answer?

      0
  10. 23

    Robert Jezyk

    April 17, 2015 4:39 pm

    Thanks for pointing this issue out in an article, but it is still early day for Webmaster Tools, I think. Tool is very imperfect and way it judges of “mobile friendlines” of site matches imperfections of another Google tool – https://www.google.com/webmasters/tools/mobile-friendly/.
    I’ve seen really bad websites being marked as Mobile Friendly there.
    PS.It looks like Smashing Magazine’s website is not being flag as “mobile friendly” in searches yet.

    -1
  11. 24

    Alisha Desai

    April 24, 2015 7:38 am

    @Leadwire
    Thanks for the awesome post about mobile usability . I really like this blog and i appreciate the work done by admin.

    3

↑ Back to top