Optimizing Your Site for Mobile

Most consumers view your site through a smartphone, but there’s an even more important reason to design for mobile first. Back in 2011, when only one in three U.S. consumers owned a smartphone, you could get away with designing your site for desktop first. Now that over 80 percent use a smartphone, anything less than mobile-ready is bad marketing.

If you’re not sure how your site stacks up, Google’s Mobile-Friendly Test will fetch your URL, analyze it, and tell you how easy it is to use on a smartphone.

Google’s report is useful for a couple of reasons. One is obvious – it can help you create a better user experience, which should yield you a higher conversion rate. More important, though, is knowing what you need to do to please Google. The company’s smartphone bot helps determine your search rankings. In fact, the mobile bot is the first one to see your site, meaning that the mobile version of your site is what counts toward SERP results.

To make sure your site is getting a fair review from the bots, and to help optimize the customer experience, it is essential that you optimize for mobile traffic. Here are a few tips to help you get started.

1. Try It Out

The first step toward optimizing your site for Google’s mobile-first indexing is running Google’s Mobile-Friendly Test we talked about earlier. Don’t rely solely on the bots, however.

Pull out your phone, pull up your site, and see how easy it is to use. Here are three common issues to look for:

• • The text is too small to read. The right font size depends on the font. A good place to start is using Google’s Responsive Web Design Basics suggestion of having 1em as the base. Try not to use anything smaller than 16px.
  • The clickable elements are too close together. Make sure that all links are easy to click and that you can’t accidentally click on a nearby link.
  • You have not configured the viewport for mobile users. The viewport is the area of a browser’s window that is viewable. By default, devices render the width of a webpage as if it were on a desktop screen. Configuring a mobile viewport is easy enough. You just need to add a meta viewport tag (<meta name=”viewport” content=”width=device-width, initial-scale=1″>) to your pages.

If your site looks responsive at first glance and you don’t remember optimizing it, then you may have a plugin doing it for you. It’s a good start, but you may want to fine-tune the experience.

2. Check for Page Speed

Some developers over-optimize their site and accidentally increase its load time. Page speed issues are also caused by hosting problems. Whatever the reason, if your site is running slowly, then your customers are more likely to bounce, and Google’s bots will ding you, resulting in poorer SERP performance.

Google offers a PageSpeed Insights tool that scores both the desktop and mobile versions of your site. Remember, the bots are looking at the mobile version of your site first. You should, too.

Even if your site has always performed well for page speed on desktop, that may not be true for mobile. It is important to check both. Google’s tool will offer specific advice on how to update the mobile version of your site for page speed.

3. Take a Needle to Bad Popups

Check your popups on mobile to see if it hampers the user experience. Keep in mind that Google has penalties for certain types of popups:

• • • Google will punish you if they cover too much of the screen or are difficult to close.
    • You will also be in trouble if the popup makes it harder for the user to go from the SERP to your website’s content.
    • Please note that Google claims that these rules do not apply to popups that display essential information.

You can use popups. Just make sure they are mobile-optimized and follow Google’s guidelines.

Choosing Between a Responsive or Dynamic Mobile Site

Which is better: a website that adapts to the user’s screen size or one that creates a unique experience based on the user’s device? Google prefers the former, but a fully responsive design is not always possible, especially on landing pages when you want to tweak the experience to make sure the call to action catches the consumer’s eye. It’s why some companies choose to create a separate mobile subdomain. They want full control over the mobile experience. Whichever path you choose, try to follow the tips listed above.

If you are creating a new website from scratch, we recommend looking into Google’s Accelerated Mobile Pages (AMP) web component framework. Some reasons Google gives for using AMP include better page speed, reduced developer overhead through easier coding, and sustainability.

Always consider mobile. Before a page goes to production, you should test it on mobile. Remember, when your customers bounce, they are heading to your competitor’s site. Optimizing for mobile is a great way to keep them on your site.