On Tuesday, Google announced a new label in search results that states whether or not a site is “mobile-friendly.” Now when you’re on your phone, you’ll know ahead of time if the site you’re thinking about visiting is optimized for your device. Accompanying that announcement, Google said that they are also experimenting with a ranking boost for sites that pass their “mobile-friendly test.”
mobile-friendly
Portent: where all mobiles are welcome
If this still doesn’t convince you, remember that mobile traffic is likely already exceeding desktop traffic and that mobile visitors typically convert at a higher rate than desktop visitors. Mobile isn’t the way of the future or even the “next big thing.” Mobile is here and it’s been here for years.
Because of this, I grabbed a bunch of sites and ran them through Google’s own Mobile-Friendly Testing Tool that lets you know whether or not Google views your site as optimized for smaller screens.
Here are the 5 most common things that cause a seemingly mobile-optimized site to fail Google’s Mobile-Friendly Test.
1. Blocking CSS or JS Resources
This was one of the most common mistakes, and by far the most heartbreaking. You’ve spent all this time making a beautiful, responsive site. But what you don’t realize is that when Google crawls it, it’s just seeing this:
mobile-bad
Noooooooooo
Google has already specifically stated that blocking Image, CSS, and JavaScript resources from their bots is against their webmaster guidelines and can negatively affect your indexation and ranking. But what’s worse, those are the elements that search engines need in order to render your mobile site. That means all of those painstaking hours you’ve spent making break points, image resizing instructions, and minimized design elements go completely unnoticed to the search engines.
The solution here is simple: don’t do it. Get rid of those meta robots instructions. Check your robots.txt files; especially if your resources are delivered via a CDN. Show off all those beautiful images and stylesheets to the search engines!
2. Using Too Small a Font Size
This one may seem obvious but it’s an easy thing to miss. Your text has to be big enough to read on tiny screens or else mobile visitors are going to give themselves headaches trying to read your new Top 5 Beyoncé Themed Holiday Dishes blog post.
Obsessed teenager girl with the mobile phone technology
Does that say 2 cups of glitter or 3?
This is a super easy one for search engines to check and, because of that, it’s a super easy rule to follow.
Google recommends using a base font size of at least 16 CSS pixels, then resizing based on the font’s properties. For detailed instructions, follow their actual guidelines here.
3. Placing Buttons Too Close Together
Another thing that Google looks at is how close your links are. Fingers are much clumsier than mouse pointers (especially if you’re me) and, because of this, Google uses the size and proximity of links as a mobile-friendliness factor.
To make sure your site passes the tap-test, be sure that important buttons have a height and width of at least 7mm (or 48 CSS pixels). You can make less important links smaller, but you need to be sure that there are no other links within 5mm (32 CSS pixels) of them. Again, Google has more detailed instructions on their own developer’s site.
4. Not Making All Pages Mobile-Friendly
This was the other common mistake I saw. Google’s “mobile-friendly” badge is awarded on a page-by-page basis. That means if your homepage is a shining example of responsive cross-device beauty but your product page still is full of tiny text, tiny images and tiny buttons, it’s all for nothing.
So, when you’re doing your next mobile-makeover, be sure to hit every page on your site. If you don’t, those internal pages are going to start losing out on all that precious, high-converting mobile traffic.
5. Content Is Wider Than the Screen
This last one, admittedly, happened primarily with sites that didn’t seem to be going for mobile-friendly designs in the first place, but it’s definitely worth mentioning. Making sure you don’t have to scroll sideways to view your page may seem like a no-brainer but it was one of the most common flags that the Mobile Tester threw out.
Typically, your best solution for managing widths is proper use of the viewport meta tag. This allows you to instruct browsers to display a page’s dimensions based on screen size. Out of everything described in this post, this is the most difficult to fix since this happens when you have an element that is larger the defined veiwport width. Fortunately, there are a few guidelines out there on configuring a viewport, including this one from Google.
Do you have any tips that weren’t mentioned here? Post your questions and advice in the comments below!
Yes…can’t tell you how many times I’ve found mobile versions of websites with cramped buttons and text that hscrolled out of view. Very important tips here.
Thanks for explaining about Blocking CSS or JS Resources point. I have had little knowledge about that.
This is one of the most useful post which i have read in recent times. Am having little bit knowledge on CSS. Thank you so much for providing information in detail. Loved it.
So would the size of the images be well reduced? Or just a robots.txt that doesn’t allow the Google spider to scan them? I understood well? Thanks.
Hi Daniela,
We want to make sure our images are compressed for small file size, and we want the image dimensions to match it’s size on the page. We don’t want to block images from robots.txt either. Any resource required for rendering a page should be available to search engine crawlers.