How to Make Websites More Mobile-Friendly in WordPress

Last Updated on May 17, 2023 by Michael Brockbank

There’s no doubt about it; mobile users make up the majority of visitors on the Internet. And recently, Google has put far more emphasis on mobile performance of websites. As such, you need to make websites mobile-friendly if you want to succeed.

After all, you want people to have a great experience when visiting your site. This is regardless of any device they are using, right?

Today, I’m going to show you how to make your WordPress site a bit more mobile-friendly. Below are several methods you can implement right now that will almost instantly have an effect on those users.

Table of Contents

Let’s Make Some Websites More Mobile-Friendly!

Trying to make a website mobile-friendly can be an arduous task, depending on how your site is set up. In some cases, it may seem like no matter what you do, Google is still not happy.

Although I cannot guarantee your success, as every site is different, I can show you all the things I’ve done and what other experts suggest.

I’ve ran tests on a few of these methods using PageSpeed Insights with excellent results.

Consider Using AMP

If you want to score well with Google, consider using the AMP Project plugin. This tool streamlines your site specifically for mobile devices.

Though, it does come at a cost. A lot of the bells and whistles you have on your site now may be removed for the site to vastly improve its speed for smartphones and tablets.

For example, AMP will remove non-AMP-friendly AdSense ads you may have. I’ll go over this in a few moments.

Not to mention that it may take quite a few adjustments to get it to work perfectly on your site. But, that also depends on what you have installed and running on your pages.

However, the trade-off could be a site that performs exceptionally well from hand-held devices.

In my tests, it was one of the best ways to make WordPress mobile-friendly. In one instance, the AMP plugin increased the PageSpeed Insight score by more than 50 points before I made any adjustments.

Optimize Your Images!

One of the biggest issues when it comes to make websites mobile-friendly is the use of imagery. Photos, logos, in-article graphics, banners, and header images all play into a site’s performance.

In fact, it’s such an important factor that newer versions of WordPress implement lazy loading by default. This is when the image only loads when someone needs to see it.

You can also save images as a medium to high-quality JPG, which should still look good on any device. But, the size of the file will be much smaller and easier to download.

Then, you can install plugins like EWWW Image Optimizer. Not only will this plugin compress the images for you, but you’ll also be able to utilize WebP images.

WebP is the next-gen graphic that Google has been trying to push for years. Think of your JPG image but about one-third the file size.

Optimizing your images also contributes to reducing the “Longest Contentful Paint” in PageSpeed Insights. This is part of Google’s Core Web Vitals used as a ranking factor in search.

Optimize the Coding

Now, you don’t need to know much about coding in order to optimize it. In fact, there are a lot of plugins for WordPress specifically designed to streamline how your site operates.

This includes things like minifying javascript and CSS, aggregating files, or even optimizing HTML.

For example, I use the Autoptimize plugin to control all of those aspects. Plus, it gives me a caching plugin that improves performance even further.

Not only that, but I also eliminated “Cumulative Layout Shift” in PageSpeed Insights using Autoptimize. This is when elements on your site shift around while the page is loading. And, Google will penalize you for it.

Because this tool had such a positive impact on making my WordPress site more mobile-friendly, I’ve installed it on all of them.

Test Your Current Theme

Themes can greatly affect the performance of WordPress. Especially when you trying to make a website mobile-friendly. Not all layouts will work on every device.

Case in point, I am currently looking for a replacement for WriterSanctuary. It works great for desktop users but doesn’t have the same allure on a smartphone.

Also consider how you can use a more minimalist theme when using plugins like AMP.

In reality, how many bells-and-whistles do you really need for someone reading your content on a five-inch screen?

There are two great ways to test your theme for mobile devices.

You can use the Mobile-Friendly Test from Google. This test will show you what the site looks like on a mobile device while giving details and insights. If there is a problem, Google will let you know.

And secondly, load your site up on your own mobile device. Nothing works better than actually seeing what your site looks like in the real world. Though, you don’t get all the details that are going on under the hood.

And sometimes that bit of information is invaluable when trying to fix performance issues.

Make Font Sizes a Bit Larger

Part of mobile-friendliness comes from being able to actually read your content in the first place. Increasing the font size a bit for those visitors can make a world of difference for retention time.

I’m not saying that you need to make the text giant. But, somewhere around 16px should be more than plenty. Coincidently, 16px is what this website uses.

The bottom line is the better the reading experience of the visitor, the more likely they will stay on your site. And the longer they stay on your site, the higher your content appears in search.

It’s really that simple to make websites a bit more mobile-friendly.

Create Buttons for Your CTAs

Links work great as calls-to-action. This is when you’re prompting someone to click to buy, visit, read, or even share on social media. However, a link really isn’t finger-friendly from a mobile device.

I know I’ve missed tapping a few.

In WordPress, you can create a CTA button that is far easier to tap than a link. And they are quite easy to make when using the Gutenberg editor in WordPress.

For More About WordPress, Visit the YouTube Channel

See what I did there? That is a tappable button leading to my YouTube channel.

Then again, you can technically use any image as a button and make it a link. In fact, I’ve made thousands of “buttons” just using Photoshop and adding an emboss layer.

Don’t Be Afraid to Hide Widgets on Mobile Devices

Not all widgets on your site are going to look great on a hand-held device. However, it’s easy to hide them with plugins like Widget Options.

This plugin greatly expands what you can do with WordPress widgets. And in this case, you can set it to hide on mobile devices.

For example, I have a gallery widget that doesn’t look very good on the front page of one of my sites from a smartphone. With this installed, I can tell it to simply not show the gallery if WordPress detects anything smaller than a tablet.

What if you have a social widget that is hurting your PageSpeed Insight scores? This lets you improve mobile performance without sacrificing the social widget for desktop users.

Limit Your Popups

A lot of people will use popups for a variety of reasons. Building email lists, posting surveys…I even use them to run giveaways.

However, not all popups work well when you’re trying to make a website mobile-friendly. In fact, the wrong popup can hurt your scores in Core Web Vitals for Google.

When setting up your popup, test it out on your own smartphone. Make sure that it looks nice and gives adequate access to your site’s content.

This is one of the reasons why some people will set time limits of when a popup appears. It gives Google and visitors a chance to see your site before a popup covers the text.

Routinely Test Your Site

And lastly, it’s always a good idea to routinely test your site. Especially when you add new plugins or make any adjustments other than writing content.

Personally, I prefer PageSpeed Insights and GTmetrix. I also have the GTmetrix plugin installed on my websites, so I can test from the backend of WordPress.

Regardless of what platform you want to use, it’s best to keep your thumb on the pulse of your site. That way, you can address issues that arise before Google starts penalizing your content.

What About AMP and Mobile-Friendly AdSense?

So, what’s this about AMP removing AdSense from your site? Yes, non-AMP-friendly AdSense ads will be removed when you install AMP. This can sharply cut your revenue if most of your visitors are using mobile technology.

However, there are a couple of ways you can get around this problem and still make money from your site.

Advanced Ads

I use Advanced Ads on my sites as it easily connects to my AdSense account. I can then enable AMP auto ads from the settings panel. Though, you need auto ads enabled in your AdSense account.

And in the pro version, I can also set individual ads to only show AMP-friendly versions.

Turn On AMP Ads in AdSense

If you don’t have a plugin for running ads, turning on AMP Ads in AdSense will make a world of difference. That is as long as your sites are set to Auto ads.

All you really need to do is click to enable AMP Ads and Google will do the rest. From what I can tell, enabling this works almost instantly.

Make Your Websites Mobile-Friendly and Reap the Rewards

In the end, it all comes down to a visitor’s experience. Are they able to read your content without waiting forever for the site to load? Does the site look good on every device?

These are the things Google is looking for…high-quality delivery of high-quality content.

Showing you how to make your site more mobile-friendly is only the beginning. You have to do the leg work to provide a great experience.

Author
Recent Posts

Follow Me...

Michael Brockbank

Michael has been a freelance writer since January of 2012 and has contributed to a long list of blogs throughout his career. He is also a published author and continues to help other writers find their own paths. Maintaining both the WriterSanctuary blog and YouTube channel, he covers topics that relate to writing in all forms.