Getting Your Site Right With the Google Mobile Friendly Update

There’s been a huge uproar over the last few months over the impending Google mobile friendly update. The long and short of it is that Google announced that they’ll be using the mobile-friendliness of websites as a ranking signal. To what extent is still unclear, but the fact remains that having a mobile-friendly website will definitely get you a boost when it comes to organic search.

There’s been an incredible amount of noise surrounding this particular topic, (I even saw a #Mobilegeddon hashtag on Twitter), and rather than buying into the hype and giving you a list of 800 reasons to implement a mobile version of your website today, we opted to give you some useful insights that you can use to keep your website in good graces with the gods of Google.

This article is going to be part tutorial, and part findings and research from an internal audit we did of our own website, and I’m pretty sure you’re going to find a few hidden gems in here that you won’t see on any of the “end of days” posts that have been floating around the internet. We were definitely surprised with a few of the things we discovered.

Getting Started with Google Mobile Friendly Testing

Google has actually made a tool that you can use to test your own website to see if it meets their mobile-friendly standards. You can run any URL on your website through the Google Mobile-Friendly test, and it will tell you whether or not your site’s mobile-friendly, and if it’s not, where the trouble areas lie, and what you can do to fix them.

We’ve had a mobile-responsive website since our major rebranding early last year, so we were sure that we’d pass Google’s analysis without any hiccups at all. We didn’t perform nearly as well as we thought we would. In fact, we ran into some pretty major trouble areas, even though our site looked pretty nice on mobile devices.

It’s About Usability, Not Just Being Pretty

One important discovery we made while looking at how we could improve the mobile design of our website, was that it wasn’t enough just to make different pages fit on different devices. Our site looked fine visually on almost every device we tested, but we were missing the mark when it came to the usability of the site.

We’ll cover several different areas in the following sections, but you’ll see that almost none of them have anything to do with what the site looks like on a mobile device. It’s about how the user interacts with the website that Google’s really trying to address. The end goal for Google is to make using mobile websites easier, not just making them look pretty.

Things to Look For When Making Your Website Responsive

If you’re still trying to get a grasp on exactly responsive web design is, it essentially means making sure your website is mobile-friendly. Your users should come to your website and smile instead of crying themselves to sleep performing a regimen of pinch and zoom calisthenics. Let’s take a look at some of the key areas to look for when optimizing your site for mobile viewing.

Make Your Tap Areas Nice and Big

It may sound obvious, but tap areas are basically anywhere on your website where users tap. I’ve highlighted a few of those areas on our website so you can see some examples.

Size tap areas appropriately and give them room to breath.

Make sure that your buttons and tap areas have room to breath. Anything that makes your website unusable with one hand is probably a mistake. If users need to zoom or scroll at any point during their browsing experience, your tap areas are either sized incorrectly, or smashed together so tightly that they’re impossible to use.

Google gives some pretty specific guidelines regarding tap areas in their guide to sizing tap areas appropriately.

You should ensure that the most important tap targets on your site—the ones users will be using the most often—are large enough to be easy to press, at least 48 CSS pixels tall/wide (assuming you have configured your viewport properly).

To give some context, the “Menu” tap area on our website is about 44px tall, right on the edge of what’s acceptable by Google. Sizing your tap areas any smaller than that is a risk and something that should be addressed as you optimize your site for mobile.

Make it Easy to Type in Search Boxes and Email Inputs

Email fields, search boxes, and other input areas are another sore spot for mobile devices. Think of how many times you’ve been asked to “fill out a quick form” only to spend the next 30 minutes fumbling with your smartphone or iPad. Or that time you wanted to subscribe to a blog and finally gave up because entering your email required the agility of an Olympic thumb wrestler.

Fear not, because Google is addressing that in this mobile update as well. As a general rule of thumb, you’re going to want to provide ample amounts of space inside of input fields, and around them as well.

Take a look at this screenshot from my blog. The search and email input are the full width of the viewport (my iPhone in this case), and you can easily read the text inside. Also take a look at the amount of space around these elements. This ensures that I don’t prematurely hit the search button when I’m typing in my query.

Keep ample spacing inside and outside the input areas

Another important element with forms on mobile devices is the type of input you assign to each field. This becomes a really important decision for users. For example, if I assign a form an input type of “tel” (telephone), that will automatically trigger the phone or tablet numerical keyboard instead of launching the full keyboard. That reduces the number of keystrokes for the user, and ultimately makes them happier.

You can review all of the different types of inputs in this Google course for Choosing the best input type.

Don’t Cram Your Links Too Close Together

The issue of insufficient spacing reared it’s ugly head again on the footer of our website. We didn’t think there would be an issue since we didn’t have any active tap areas, but we did have a series of links that were crammed together too closely. We’ve improved the spacing dramatically, but when we initially performed our mobile audit, all of the links that are shown in the following screenshot were too close together.

Tapping those links independently used to be a real chore.

You’ll notice now that most people, except for those with extremely large fingers should be able to tap all of our footer links without accidentally mashing the links around it. This is almost exactly what the Simpsons warned us about over a decade ago.

As we’ve performed mobile audits of our client sites, we’ve noticed this issue coming up really frequently with twitter widgets and similar feed-type widgets. Lists in general tend to be crammed and not given the space they require for easy navigation and browsing of the site. Don’t be caught handing out dialing wands when you could easily resolve your issue with a few lines of CSS code.

Don’t Block Important Assets in Robots.txt

One common issue that we found while checking and updating sites for mobile-friendliness is that they were sometimes blocking important things like their primary CSS files via their robots.txt file. The robots.txt file can be a really helpful tool for controlling how Google crawls and indexes your site, but you need to be aware of what you’re blocking.

If you’re failing the mobile friendly tests, make sure you don’t have any important assets listed as blocked. If your screenshot in the mobile friendly tester looks strange, chances are you’re probably blocking something you shouldn’t be.

The things you need to pay close attention to are your primary stylesheet and any critical JavaScript files that are used for how your site loads and displays. A general rule to follow for robots.txt is to allow Google to crawl the majority of your site. You only want to block things that are known to cause problems.

During Our Testing, We Found Something Interesting About Disqus Comments…

I wanted to save the most intriguing part for last. I like rewarding those of you who stick around through some of the painful parts with something extra helpful. One of the most surprising discoveries we made when we performed our mobile-friendliness audit, was that the Disqus comment system we had been using previously wasn’t passing the Google mobile-friendly test.

Although their website doesn’t explicitly say that their mobile comments pass the Google mobile-friendly tests, their website definitely gives the impression that their discussion platform should be great to use on any device. Apparently Google disagrees as it triggered a number of warnings on the comment area of our website when we had Disqus comments enabled.

At the same time, we knew that Disqus was an extremely popular commenting platform, and couldn’t figure out how it could possibly be causing issues for our site, when it was actively being used on sites much bigger than ours. We were using the Disqus Comment System plugin, and once we disabled it, and made some styling improvements to the comments area, we passed all mobile tests with flying colors.

So how was it possible that such a widely used commenting platform wasn’t causing mobile-friendliness issues on other WordPress sites much bigger than ours?

Every site we tested that was using Disqus comments was hiding them on mobile until a user takes an action.

Tap required to view comments

Take a look at the 99u comment area above. They use Disqus for their comments, but they hide the comments by default, so that the format and layout of Disqus doesn’t trigger mobile warning for their website. The user has to tap the “load comments” box in order to view Disqus comments, so the mobile issues are hidden from Google.

Google says 99u is Mobile-Friendly

You can see in the search results that 99u has the coveted Mobile-friendly tag that will soon be impacting search engine rankings, at least to some degree.

Now let’s take a look at Politico. They also use Disqus for conversations on their blog, but they display the full comment area by default. No hiding them with a required tap or other similar tactics.

It’s like comment spaghetti

Take a look at the screenshot above. The mobile experience for commenting with Disqus is pretty atrocious. Think back to everything we’ve covered previously. Links are close together, that “Reply” link is nearly impossible to tap. Input areas are tiny and hard to navigate. I’m just as likely to flag a comment as inappropriate as I am to minimize it. The entire experience is pretty dreadful in the eyes of Google, and even more importantly, in the eyes of users.

In light of this information, we’re recommending clients move away from Disqus completely, and revert to native WordPress comments. They’ve worked really well for us, and the interaction on our blog posts is as high as it’s ever been. It definitely takes a bit of styling work to make the experience nice for users, but in the end it’s totally worth it. Not only will your customers and readers be happy, Google will be happy too. And we all know, that if Google’s happy, you’re happy. 🙂

So What’s the Best Way to Get Your Site Ready for the Google Mobile Friendly Update?

Now that you’re experts in knowing exactly what Google wants, how can you go about implementing these changes on your own website? There are a variety of ways but I’ll quickly go over what we recommend depending on your timeline and budget.

Start With a Mobile Responsive Theme

This won’t guarantee your site passes all of the mobile-friendly tests from Google, but it’s definitely a good place to start. You can check out our guide for buying WordPress premium themes, or do a quick search on WordPress.org for responsive themes. Quick Tip: If you’re going to buy a new theme for your site, run the demo of the theme through the Google mobile-friendly test to see how it performs.

Change Over to a Mobile Friendly Theme

This is the route to take if you want to implement mobile changes now and on a budget. The Jetpack plugin has a Mobile Theme that’s free to use and should pass all mobile-friendly testing. The major downside is that you lose the look and feel of your main website. Your branding and style don’t show through at all. An alternative that is also a separate mobile theme, but that has more features like styling, slider support, and some other things to make your site “match” your desktop site is WP Touch. WP Touch is a premium plugin that costs between $59 to $199 depending on your specific needs.

Have Your Current Theme Made Mobile-Friendly

This is likely the most costly and most time-consuming option, but the huge benefit is that your branding and site stay consistent for your users on every single device. You’ll need a responsive design audit, and then some design and development help with making your site mobile-friendly. We’ve helped a lot of clients go through this process, and can likely help you out as well. Get in touch if you’d like a complimentary consultation for our mobile-friendly services.

If you have any specific questions about Google’s crusade to make sites more mobile-friendly, or a specific issue or element that’s giving you trouble on your own site, hit us up in the comments and we’ll get the conversation going (on our beautifully mobile-optimized comments section).