How to Fix Mobile Usability Errors

How to Fix Mobile Usability Errors

 In Google Search Console

You are  now living in Google Mobile First Index ranking World, that means the new Google Search Console Mobile Usability Report should not show any errors when you want to see higher Google rankings.

Although #RankYa how to video tutorials are aimed at simplifying Google, WordPress and digital marketing, this particular tutorial on How to Fix Mobile Usability Errors in Google Search Console could be tricky if you are not familiar with Web Development. In all cases, I still tried to enlighten you as best that I can. Furthermore, if your website (or your clients website) is still experiencing issues with Mobile Usability, then, simply comment on this post and let’s find a solution for you.

Video Tutorial for How to Fix Mobile Usability Errors in Search Console

Search Console Mobile Usability Errors

Below are errors that can appear in the Mobile Usability report in Google Webmaster Tools (The New Search Console)

Uses incompatible plugins errors

The page includes plugins, such as Flash, that are not supported by most mobile browsers. Google recommends redesigning your page using modern, broadly-supported web technologies, such as HTML5. Read more about web animation guidelines. For most WordPress setups, this won’t show up unless you are using a functionality that uses incompatible plugins.

Viewport not set issues

Your page does not define a viewport property, which tells browsers how to adjust the page’s dimension and scaling to suit the screen size. Because visitors to your site use a variety of devices with varying screen sizes, from large desktop monitors, to tablets and small smartphones, your pages should specify a viewport using the meta viewport tag. Learn more in Responsive Web Design Basics.

Viewport not set to “device-width” error

Your page defines a fixed-width viewport property, which means that it can’t adjust for different screen sizes. To fix this error, adopt a responsive design for your site’s pages, and set the viewport to match the device’s width and scale accordingly. Read how to correctly Set the Viewport.

Or you could just add this to head portion (located at public_html > wp-content > themes > yourThemeName > header.php (find <head> and place it just after it and save))

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

Content wider than screen errors

This report indicates pages where horizontal scrolling is necessary to see words and images on the page. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px). To fix this error, make sure the pages use relative width and position values for CSS elements, and make sure images can scale as well. Read more in Size Content to Viewport.

CSS usually fixes this error img{width:100%;height:auto} or you may need to use display:block for the containing element (usually <div>s)

Text too small to read errors

This report identifies pages where the font size for the page is too small to be legible and would require mobile visitors to “pinch to zoom” in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes. Depending on your level of knowledge of CSS, you could try your hands in responsive font sizes, if not, at least stay safe with font-size:16px

Clickable elements too close together errors

This report shows the URLs for sites where touch elements, such as buttons and navigational links, are so close to each other that a mobile user cannot easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to correctly size and space buttons and navigational links to be suitable for your mobile visitors. Read more in Size Tap Targets Appropriately. This is where you can use paddings and  margins for the elements Search Console Mobile Usability report is complaining about.

Best Practices for Ranking Higher in Google in 2019

Long ago, I’ve advised RankYa fans to prepare for the future of Google rankings by suggesting to just have 1 version of a website that renders well across all devices (desktop, laptop, mobile smart phones, IPads, Iphone and smartphones). This is still the best option to consider.

If you are lucky to be using WordPress as Content Management System, then, you do not need to hire Web Developers, instead go to Google and search for premium WordPress Themes and just change your WordPress theme to be using one of the latest mobile ready and mobile responsive themes (RankYa recommends Jupiter Theme). Got any questions?

Recommended Posts
Showing 6 comments
  • Elmar
    Reply

    Hi, thank you for the great tutorial. Can you answer the following questions:
    1. You seem to type ” #site-navigation ul li” in a random place in style.css file. Is that so always or there are exceptions?
    2. My style.css file looks like this and the last line bothers me :
    ————————————————————-
    /*
    Theme Name: CoralDark – child
    Version: 1.0
    Description: A child theme of Coral Dark
    Template: coral-dark
    */
    @import url(“../coral-dark/style.css”);
    —————————————————————-
    What does “@import url(“../coral-dark/style.css”); ” means? Can I still make changes to padding values here?
    3. Is there a way to fix unresponsive theme in WP by using tricks like making sure text lines are no longer than 10 words in English or by editing the code of embedded images/videos?
    4. In your video about fixing “clickable elements too close” you say that 1rem is relative to body font size. I checked my site and the body font size value is 14 pixels, however with padding of say 2 rem the padding new value goes to 32 pixels instead of 28 pixels (2x14px=28px). Is there anything I am missing?
    5. In Chrome dev tools console when “Elements” tab is active just under the window of the page code there is a bar (line) with bits of info like tags, hashtags etc. looking like the phrase/notation ” #site-navigation ul li” you used. Is there any connection between the info in this bar and how the notation will look?
    6. The notation ” #site-navigation ul li”, how it could change in different scenarios. Are there popular notations/examples you can share or learning resource/link?
    7. Can you make a video or explain in the comments here how to size and space out buttons which are part of a widget. For e.g. i have a widget containing social media icons for sharing to several channels and since all attempts to space more the nav menu elements trough the style.css file did not make any change I suspect that these icons are too close together for the mobile user to click on without clicking a neighbor element.

    • RankYa
      Reply

      Hello Elmar, let me try to answer your questions about fixing Search Console Mobile Usability issues for WordPress Theme you are using.

      1: Is that so always or there are exceptions? There are always exceptions, but the rule of thumb is always modify the already existing CSS .class (or #id) values.
      2: seems like your child theme is importing ../coral-dark/style.css which is the parent theme CSS (this is usually normal) so its easier for you to make adjustments. That means, any new CSS rules you want to add, you would do so AFTER the line @import url(“../coral-dark/style.css”);
      HERE and browser will render your new rules.

      3: sure, you can fix mobile usability issues (as in make everything responsive). RankYa has a video on making YouTube videos responsive. With images, this could be tricky but you can try to methods in the video.

      4: you could remedy this (in fact, I would surely use this as it makes things easy).

      body{font-size:16px;} just add that to your child theme style.css and now you know 1rem is 16px

      5: that is always tricky part of CSS (because of specificity) that means, I would first test: e.g. #site-navigation ul li (something here) to see if the declaration and value wins. If so, all is good continue, if not, then, I would try article #site-navigation ul li {to see if this wins} I found this approach better (knowing #id’s always have higher value in CSS.

      6: perhaps Google would help, but then again I learnt a great deal from Google search and https://css-tricks.com/forums/ over the years (CSS is complex, but main things to note are #id’s have higher value then .class.

      Another example for you for fixing mobile responsiveness of HTML.

      #site-navigation ul li{color:green}

      nav #site-navigation ul li{color:red} THIS WILL WIN

      header nav #site-navigation ul li{color:blue} THIS WILL WIN

      nav #site-navigation ul li{color:orange !important} THIS WILL WIN because you are adding !important

      The more specific your declaration, the higher CSS value that will be calculated by browsers. Having said that, as you learn more and more, your job then is to use LESS CSS Declaration

      7: this is a challenge (because of the way widgets work from external sources). There are many ways you can tackle this. The easiest way is to find exactly which CSS rule is making the widget work, then, create a new rule that is more specific. E.G .widget a {padding:.5rem} (just find what is above in terms of CSS) e.g. aside .widget a{padding:1rem} etc.

      This is easiest way, if this does not work (and IF the widget is loaded dynamically, then, I am afraid, more advanced techniques are needed. Perhaps Jquery https://stackoverflow.com/questions/3452778/jquery-change-class-name

      What do you think? Will above insights assist with How to Fix Mobile Usability Errors shown in Google search console?

      • Elmar
        Reply

        Thank you for your long explanatory answer for each question and the useful links you provided . Few bloggers would do this when having actual business to work on a side. Appreciated highly!!! I hope this Q&A session is helpful for new readers of the article as well.
        At the time of sending this questions I had already seen only the video on your YouTube channel from few years ago about fixing mobile usability issues and my questions were related to the old video. By accident I saw at the end of the article the new video and would suggest that you place it immediately after the title so others won`t miss it after following the links to help sections from Google you provided , as I did initially. Thanks to the new video at the end of this article I better understand the theory and practice of fixing them but success rate is still zero with my site due to one of the following :
        1.Small things missed during watching that are not exactly stated. Sometimes just for split second as you talk to yourself (in order to recall what you did to fix your issue) you kind of browse trough the code in the Elements tab/window in search for the right place where style changes need to be made. ..What is the exact criteria by which you decide to select this specific line of code? After reading the video should be “find what is above in terms of CSS” as you stated in your answers I guess?
        2. Plugins I have installed like a free mobile plugin making a mobile version of my site or the social media widget. Can you recommend another free plugin to create a mobile version of a site without problems with Dev console tests afterwards or free plugin for social media icons?
        3. Not enough understanding of how to use even better Developer console as a marketeer who never did a complete course on JavaScript and always looks for shortcuts since there are so many other things a marketeer is involved in or has to learn. Maybe you can make a tutorial on basics of JavaScript and developer console for marketers without solid/any JavaScript knowledge.
        4. All your explanations work on the mobile screen simulator (paddings/margins changes are visible) on the left side of dev console but when “Publish” button is hit in WordPress dashboard (after the style.css edit or when using the code editor of “Customize” dashboard link) none of the changes (paddings/margins) actually appears live on the site when seen on a mobile device. What could be the reason? My WordPress theme, plugins…
        5. I have noticed that when “Toggle device toolbar” icon from developer console menu bar is clicked and the mobile version of my website appears I am not able to inspect elements from the Menu (the icon with the 3 parallel lines) . For e.g. i click on the Menu, it opens the drop-down options and I want to select “Contact” page (one of the nav menu elements) it always contracts so I can never select it. So I can only inspect nav menu elements if I switch back to full desktop preview but then I am not sure how this affects the styles declarations compared when a nav menu elements from the mobile version of the site is inspected.
        Is it possible the free version of the mobile plugin I use to cause issues when testing things in developer console?
        How to avoid this contracting menu so I can inspect the nav menu elements of the mobile site?
        6. About “Page loading issues” you said not worry when issue is on URL that does not belong to my site. I have the following issues and URLs are from my site but not pages created by me but plugin related folders/files/functions:
        – What should I do with “plugin script” blocked by robots.txt? Allow them for craw and index or else?
        – What should I do with plugin stylesheet blocked by robots.txt?Allow them for craw and index or else?
        – What should I do with “jquery script” blocked by robots.txt?Allow them for craw and index or else?
        As a side note I would mention that I use a popular plugin creating automatic robots.txt file (you have made videos using the same plugin)

        • RankYa
          Reply

          What should I do with “plugin script” blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW
          – What should I do with plugin stylesheet blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW
          – What should I do with “jquery script” blocked by robots.txt? Allow them for craw and index or else? If on your site, ALLOW

          if not on your website, then, you only have 2 options, either remove the functionality from your site (FB plugin etc.) or ignore the message.

  • Alejandro
    Reply

    I would like to know if you can help me repairing the issues that I have in search console. I left you, my email in the information box. Thank you so much.
    Best Regards,
    Alejandro

Leave a Comment

0

Start typing and press Enter to search

Search Engine Optimization of Web Pages