How to Make Mobile-Friendly Websites that Make Google Happy

Two years ago Google added a label to its search results to indicate mobile-friendly websites. This has meant for quite a while that lightweight, mobile-friendly websites have dominated search results. Recently, they also took a stand to punish intrusive advertising on mobile devices, and now they’re finally taking the next step with mobile-first indexing. Mobile-first indexing will ensure that mobile-friendly websites dominate search results now more than ever, so the importance of making a mobile-friendly website is higher than ever.

In this article we’ll discuss how you can make sure that you’re running a mobile-friendly website and how you can change your WordPress site to be mobile-friendly, too.

google-mobile-friendly-sites-what-makes

In April 2015 Google looked to promote mobile-friendly websites in their search engine, making a huge change in web design. Not having mobile-friendly websites stood in the way of Google’s main goal: giving users quick, accurate, accessible information based on their searches.

So what were the problems that Google looked to stomp out in 2015?

  • Unreadable text. A lack of scalability meant that users would have to swipe back and forth to continue reading paragraphs as opposed to steadily scrolling downward in a comfortable manner.
  • Dependence on plugins. Flash and Java perished for many reasons, their poor security being one of them. This was another: before HTML5, sites depended on these plugins to have dynamically-displayed content. With HTML5, however, these plugins became redundant and weren’t supported by mobile devices. Therefore, Google struck them down in search results.
  • Poor link spacing. Google also had an issue with poorly-spaced links. Because of the size of a phone screen, clicking a link that’s directly beside another can sometimes result in you selecting the wrong one. For this reason, they prefer sites that space out their links.
  • Long load times. Last but not least, load times. A well-optimized site should load quickly on even a 3G mobile connection.

These are the main points to avoid if you want to have a mobile-friendly site. Using a responsive theme for your site will allow you to avoid readability issues, and as long as you avoid spamming plugins and links in close proximity to each other, you should be perfectly fine.

An easy way to make a mobile-friendly website is to use WordPress. WordPress is a common platform used for blogs and news sites all over the Web, and due to a wide variety of custom themes (in addition to the ability to customize said themes/create your own from scratch), WordPress remains a viable platform for web creators. Plenty of WordPress themes support both mobile and desktop layouts, and in the section below we’ll give you a list of some of the ones we recommend.

For now, we’ll tell you how to check if your current theme is considered mobile friendly and what improvements you can make to improve your site for mobile browsing.

Is Your Theme Mobile Friendly?

To check if your WordPress theme is mobile friendly, plug your homepage URL into the Google Mobile-Friendly Test Tool.

google-mobile-friendly-websites-test

If you get a result that looks like this, you’re doing fine! If you don’t, however, it’s time to take a much closer look at your WordPress site and the theme you’re using.

Step 1: Make Sure WordPress (And Your Theme) Are Fully Updated

This may go without saying, but many webmasters forget to update their WordPress platform and WordPress themes. Often, WordPress updates will appear as notification banners within your WordPress admin platform. Many times you can click this link to go ahead and start the Update process, but you can also head to “Dashboard” and then “Updates” if you don’t see that banner.

To update your current theme, go to “Dashboard -> Appearance -> Themes,” and then select “Update Now.” However, before performing this update, it’s a good idea to back up your current theme. Additionally, any customizations you’ve made to this theme will be lost in the update unless you set up a child theme on WordPress. (Child themes are sub themes that inherit everything from the base WordPress theme and allow you to safely modify a theme without losing everything each update.)

Now, run the tool again. Still doesn’t work? Proceed through these steps.

Step 2: Diagnose

If a site isn’t mobile friendly, Google’s tool will give you a few tips telling you what’s wrong with it. Usually, the issues will be with small text and a lack of a mobile viewport. Small text requires viewers to manually zoom in on the page, while pages lacking a mobile viewport will always display as if they are on a desktop monitor. If your WordPress site isn’t mobile-friendly, this is usually the reason why.

Other issues the tool may flag include long loading times or excessive on-page plugins. Make sure your web site doesn’t rely on plugins like Java or Flash. If you need those functionalities, use HTML5 instead. Also, advertisements that pop up or take up too much screen real estate can be an issue: only use non-intrusive advertisements and don’t allow pop-ups in your WordPress theme.

Step 3: Get a New Theme

Unfortunately, if a theme isn’t mobile friendly, even after being updated and removing excessive plugins, there’s not a lot you can do to fix that problem. At this point your only real choice is to get a new one if you don’t have the web design know-how to change your existing theme into a mobile-friendly custom one.

google-mobile-friendly-sites-wordpress

We’re going to give you a few choices for WordPress themes. All of these are made for mobile-friendly websites, and you’re welcome to customize their colors and layout to get them to better suit your individual brand. We’ll primarily list free options, but also a few premium ones.

  • Lola is a great, free theme for blogging sites. It’ll look instantly familiar to longtime Tumblr users.
  • Newsmag is a free theme for magazines, news sites and other more formal settings.
  • Accelerate is a popular, free WordPress theme. It’s very flexible but is most useful for emphasizing art and photos, less so for text-driven content.
  • Divi is a premium WordPress theme that offers a powerful visual editor, not requiring users to dive into code to make changes to colors and layouts. Its ease of use makes it popular, and it’s fortunately flexible for multiple content types.
  • Uncode is a premium WordPress theme that offers a visual editor and focuses on clean, modern-looking interfaces. It’s also great for sclaing images across multiple screen sizes.
  • Avada is a fairly popular premium WordPress theme and sees usage for all kinds of different sites. It also enjoys regular, frequent updates.

Hopefully this article will help you make a mobile-friendly website in WordPress or ensure that your pre-existing site is already mobile friendly. Do you have any other themes to recommend or advice to give people in the same boat? Feel free to sound off below!

Leave a Reply

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.