Google’s 4/21 SEO Update: Making Your Site Mobile-Friendly
We all know the widespread use of mobile devices, but now it seems that Google is going to start rating you on your friendliness with the platform come April 21st. No, not how much you share on social or use your phone as a part of your business, but rather your website. We’ve talked before on how your website should be responsive in nature—where the website itself responds to the device on which it’s displayed and reacts accordingly. But now it’s not just a “nice thing to have,” being kind to your mobile users is something you have to address to keep (or maybe even improve) your search rankings.
Google regularly changes its SEO structure to fool the bots that offer a first-page ranking for money, and punish those who aren’t using the “right ways” of improving their search rankings. While they have, in the past, mentioned how your site should react on a mobile screen, this is the first time it will actually impact your search results.
But don’t fret; we’re here to help. We’ve taken the three most important parts of their recommendations and laid them out here so you can make sure you’re ready for the changes.
Legibility
You want your site to be readable on mobile, right? Just like you want it to be legible on desktop and tablet devices. We’ve all been to the sites that are impossible to read without zooming in or out, and it seems Google wants to get rid of that practice. They suggest having a base size, and then also a “small” and “large” size.
- Base: 16px
- Small: 12px (75% of base size)
- Large: 20px (125% of base size)
They also suggest using a line height of 1.2em (basically, 120% of the base value).
Web font size can be specified via four common units: pixels (px), points (pt), EMs (em), and percent (%):
- Pixels are “CSS pixels” and vary based on device size and density.
- Points are defined in relation to pixels. A single pixel is 0.75 points*.
- EMs and percent are “relative” units: they are relative to the inherited size and properties of the font being used. 1 EM is equivalent to 100%.
Navigational Ease
Just like you should have your fonts at a legible size for different devices, you also need to make sure the clickable elements on your site are large enough and far enough away from each other to be a pleasant experience for your customers. This is especially true for your CTAs (Calls-to-Action, aka your “Buy Now” button). The general rule of thumb is this:
- When viewed at the appropriate size, your elements (buttons, links, etc.) should be no smaller than 7mm. (This is approximately 48 pixels, though that depends on the device’s display.)
- Each element should be at least 5mm (32 pixels) away from each other to avoid mis-clicks.
Page Loading Time
The assets on your website, such as images, as well as the files that contain the code for your site, are what make your site load slowly. When your site takes what seems like forever to load, you lose customers. It’s very important that your site loads as quickly as possible while still containing all the information that needs to be there.
For the web developer, there are a lot of ways with which you can do this: lazy loading (images only load right before a user scrolls to that portion of the page), minimizing Javascript files, combining CSS files, and dynamically loading only the information that needs to be loaded for each page type.
For the rest of us, there are still things we can do, and it’s largely in the name of images. Images are almost always the #1 “resource hog” when it comes to the speed at which a page loads. Luckily, there are resources you can use to see just where your site is loading slowly and some, like GTMetrix, will even give you the optimized images (without losing quality) should you have any pictures that are larger than they should be.
Google isn’t just giving you these recommendations and then leaving you out in the cold, though. They’ve created a “Mobile-Friendly Test” site where you can input your URL and it’ll analyze your site for you.
As always, we suggest that you test your site. Take Google’s result with a grain of salt, and load your site up on your phone and tablet, as well as a friend’s devices. Make sure to test on both iOS and Android and among different brands as each device can interpret the same site a little differently. But once your site is ready, not only will you look better in the eyes of Google, your customers will also thank you.
