How to Make Your Website 100% Mobile-Friendly Before Google’s Update on April 21st

How to Make Your Website 100% Mobile-Friendly Before Google’s Update on April 21st

Google is updating its algorithm on April 21st to make mobile-friendliness a large factor in ranking websites in search results. Are you ready for it? Is your site mobile-friendly?

Google’s updates generally confuse masses of inexperienced site owners, and the only way to avoid becoming a part of that confused mass is staying up to date on Google announcements and fixing potential issues before any major algorithm change. Although not every update requires site updates, the important thing to know right now is this: if your site isn’t mobile-friendly, your chances of ranking well in Google search results will suffer starting April 21.

So what can you do to ensure that your site’s rankings and traffic won’t be affected? Keep reading to find out how, using the following 3 tools from Google:

Step 1: See if Google thinks your website is mobile-friendly

Go to the Mobile Friendly Test and enter your homepage URL.

If your site is mobile-friendly, Google will say something like, “Awesome! This page is mobile-friendly.” If that’s the case, you’re off to a great start! Go to step 2.

If your site isn’t mobile-friendly, you will presented with a few potential reasons. However, these are very general issues, and may not directly apply to your page.

If you’ve never taken any steps whatsoever to make your site mobile-friendly, then you have a lot of work to do. However, there are several options for making that happen. Here are a few posts that will get you headed in the right direction:

If you have taken steps in the past to make your site mobile-friendly, but Google says it isn’t, there’s a chance that you just need to fix some minor issues. Go to step 2.

Step 2: Check your site in Google Webmaster ToolsGMWT mobile usability

Log into your Google Webmaster Tools Account and find your site’s profile. If you don’t have your site set up here, then you’ll need to do that first. Go ahead and set it up by following this guide from Google.

Once you are inside your website’s GWMT account, find the “Mobile Usability” tab within the “Search Traffic” folder. (See image)

Hopefully you see this message.


If you do, great! However, there still may be some usability issues on mobile devices with your site. Make a list of the most important pages on your site that you want to be in tip-top shape. If you’re not sure, these might be your top ranking pages. Now go to Step 3

Screenshot_2On the other hand, if your site has some issues, you’ll need to determine what is causing them.

You should see a list of errors with the number of pages that reflect that error. Drill down to each of these errors and locate the pages that need checked out.

GWMT allows you to export these pages if you want to compare them all in a spreadsheet. This might be particularly useful if you have hundreds of errors.

Once you’ve identified the pages that need fixed, make a list and go to step 3 to determine the exact causes of each page’s issues.

Step 3: Identify your issues

Now that you have a list of pages to check out, head on over to the PageSpeed Insights tool.

This tool is typically used to find ways to speed up a site, but there is also a section for mobile user experience that can give you wealth of information as to how you can fix your mobile problems.

Go ahead and enter your first page into the tool. If your homepage has issues, that’s a good place to start.

After the tool has run successfully, find the “User Experience” section within the mobile tab. If you get a 100/100, then you can go to the next page on your list! That one is as mobile-friendly as it gets, at least in Google’s eyes.


Even if your site is mobile-friendly, you may find that a few pages have room for improvement. Your score may be in the 90s, but even so, you might find one or two items that could easily be fixed. To resolve them, go to step 4.

Step 4: Resolve any problems

Under each item that Google says you should “Consider Fixing” you should see an option to “show how to fix.” This is extremely helpful! Click it and you’ll know exactly what’s going on.

The tool should indicate exactly what HTML elements are causing problems. If you’re lucky, you’ll even get a screenshot of the issue within the mobile preview to the right.


Sometimes, it’s a site wide issue. If you use a Content Management System like WordPress, then you may be able to fix something in one fell swoop. On certain occasions, your CSS might be throwing something off on every single page just enough to flag Google of a mobile usability issue.

If you see some of these site wide errors, try to fix as many of them as you can. This can quickly trim down your number of problem pages.

Unfortunately, not all issues are that easy to fix. Pages with a very specific error will need checked out individually. In my experience, these errors are often caused by an image that is too big, or a few links that are too close together.

Repeat this process for every page on your list! Your score will update if you refresh the PageSpeed Insights tool page after each change you make. Try to get as close to 100 as you can!

If you do fix something, please note that GWMT won’t show the update immediately, and it might take a few days for Google to notice that you’ve resolved your site’s mobile usability issues. That can be frustrating, especially if you’ve put in several hours of work, but be patient. Your work towards a more mobile-friendly site will pay off.

This might seem like a daunting task. However, come April 21st, you can relax, knowing that your site is well-equipped to handle Google’s algorithm update. And if you’re lucky, you might even see some improvement in rankings over competitors who neglected to stay ahead of the curve.

Have you gone through this process already? What kinds of things did you come across that I forgot to mention in this post? Or, if you have yet to start, do you have any questions I didn’t answer? Feel free to leave your feedback and questions in the comments below!

  • Haliya

    I find that a lot of sites – and particularly busy small business owners
    – don’t know the answer to this question, but it’s a crucial starting
    point for understanding how urgent and the degree of impact an update
    like this will have on your business.

    Web Design Firm

  • Lynn

    I fixed some problems and got up to a 67, but the only problem that I have now is the “Content Wider than Screen” message. I put the code in that they suggested, and now the site is too wide. It fit in screen shot before I put the code in so I’m confused. Here’s the code that was suggested: Thanks for any help you can give me.

  • Dan Shaffer

    Hey Lynn! If your content is wider than the screen, chances are there is an image or block of content that is stretching the screen width. The viewport meta tag is usually for setting width for different devices and might not necessarily fix your problem.

    Try opening the page on your phone and scrolling horizontally, then see if you can spot what part of your page is too far over. Whatever is going over the edge is what you will need to edit.

  • Pingback: Whiteboard: Google's Changing the Rules for Websites | Elexio()