Thinking of updating and optimizing your WordPress site for mobile but not sure how to go about it?
The good news is that this is really easy to do. However, there are a few different methods to achieve this, and some of them are not as efficient as others.
In fact, you might even have a site that ‘technically’ loads on mobile right now, but not be aware of some issues you might have, or the improvements you could make with just a few clicks.
Don’t worry though, because not only am I going to share with you:
- How to check if these methods are affecting your site
- The 4 ways that don’t quite work
- The best option to fix this
- And how to set it up correctly
But we’re going to do all of this, totally for free, in about 15 minutes, step-by-step. So grab a drink and make sure to follow along right this second, because there’s something I haven’t told you.
Simply put – if your site isn’t mobile optimized yet, then there’s a good chance you’re losing 100% of your Google traffic and don’t even know about it…
Why you could be losing all your traffic
It’s been around 8 years in the making, but on the 5th of July 2024, Google stopped using their desktop crawler to crawl the internet and build their index.
What does this mean?
The crawler is the tool they use to track everything online. It looks at sites, figures out what they are about (including all the pages), and then uses that to build a master list or ‘index’. The index is what is then used when we search online to find things.
Why care?
Simply because, if your website doesn’t show up on mobile devices, then it won’t show up in Google anymore, because their mobile crawler can’t access it.
People can search for you but you won’t exist in the results. They’ll have to enter your exact address to be able to find you.
But answer me this:
- If you search for a company and it doesn’t appear in Google anymore, will you keep looking for it?
- Heck, if you found it but only by adding the exact URL, would you trust the site? Or would you think something weird was happening?
I’m going to guess you’ll either stop looking for it or find it and not risk being hacked right?
It kind of sucks, but Google realized that around 60-80% of website traffic is now on mobile devices, and it’s only growing higher.
So this is them making sure that all the websites they recommend in search engines provide the best experience for their users, on the device they use to browse.
TL;DR
You need a fully optimized mobile website as of last month, if you want to even appear in Google or be found by people.
If you don’t have this, then get it done ASAP.
How this guide works
This guide is Part 2 of a 3-Part series on how to make your website (and blog content, pages, products, etc), fully web-optimized.
Each guide focuses on a specific key area to get this done:
- In Part 1 I covered all the aspects of mobile content marketing and accessibility. Basically, all the boxes you need to tick that Google recommends so that your users have the best experience and can interact with your website.
- In Part 2 (which is the guide you’re reading right now), I’m going to walk you through how to create a fully responsive WordPress website, so that it loads properly on mobile devices.
- Then in Part 3 I walk you through everything you need to do, to make your site load lightning-fast. Even on older phones.
It’s easy to do all these things, but there are a few steps to each of them which is why I’ve broken this down into these 3 guides. I walk you through it all step-by-step, so don’t worry about not being able to set this up.
However, I do want to stress that you need to implement all 3 of these guides, if you want to succeed with this and be future-proofed against any other changes.
This is because this stuff doesn’t work properly if you don’t have all the parts up and running, because they’re all interconnected:
- Your site needs to be accessible and usable on mobile devices
- It needs to be responsive and load correctly on all screen sizes
- And it needs to load fast enough that they don’t get frustrated and leave before it they can do anything
OK, rant over!
With that out of the way, let’s get into this.
The 5 different methods to build a mobile site (and why responsive is best)
Because this update has been around 8 years in the making, there have been multiple different methods introduced over the years to let people visit your site via a mobile device.
Although they all technically do the job, the performance and set up between them is very different.
Let’s have a quick look at each of them so we can see which we’re using, and where it might struggle.
Method #1. Building mobile versions of every page
The absolute maximum effort, and one of the earliest methods. Basically, you create 2 different versions of your website:
- Your normal desktop site (yoursite.com)
- And then a mobile version (m.yoursite.com)
This meant duplicating your desktop content and layout, but in a way that would load for mobile. This often led to structure or layout changes, or reducing the content on a page so that it could load fast enough.
As you can imagine, this was a lot of work, But worse still, when Google prioritized their mobile crawl results a few years back, it meant that if your mobile pages had reduced information, your pages now ranked for less and got less traffic.
So yeah, not a great option.
Method #2. Accelerated Mobile Pages (AMP)
Then in 2015, Google tried to create an alternative mobile site option and launched its ‘Accelerated Mobile Pages’ framework, otherwise known as AMP. (Nothing to do with me or this blog).
It was designed to make web pages load faster on mobile devices, by stripping down HTML, using a streamlined version of CSS, and limiting the use of JavaScript.
Basically, it used less code so it took less time to load.
However, there were a few issues with the method. The stripped code meant a lot of features were lost. For example, you couldn’t capture emails or add plugins. All features that you needed if you wanted to make conversions from your traffic.
Not only that, but AMP pages often have different URLs, such as amp.yourwebsite.com.. This meant that backlinks would redirect to Google’s AMP cache instead of directly to your site, helping them rank and not you.
So yeah, not a great option either. Some of this has been improved over time, but generally it’s more effort than it’s worth if you’re a small business or one man blog.
Method #3. Using a mobile-friendly theme
If I had to guess, you’re probably using either this option right now, or a combination of this option and the next on this list.
It technically works, but you could make your life a lot easier, and your site a lot faster if you use the last method on this list.
Here’s why:
Mobile-friendly design is a clunky workaround.
It lets your site load and appear on mobile devices, but it doesn’t adapt dynamically.
Instead of appearing on the screen to fit, it instead uses a shrunk-down version of your desktop site.
For example
Here you can see on the SpaceJam movie site, that the page loads on mobile – but it’s super small.
This is because it uses fixed layouts to build the pages.
So while the site technically fits on smaller screens, it often requires users to zoom in and out or scroll horizontally to view content properly.
This can be incredibly frustrating and lead to a poor user experience – especially when things are hard to read, don’t load properly and elements are off the screen, or when you click something by accident.
This was the best option we could have for a while, and a lot of WordPress themes moved toward this solution.
Method #4. Building responsive pages with plugins on mobile-friendly sites
Site creators and plugin builders knew that our current mobile-friendly experience needed to be better, and so a lot of page builder plugins started to offer responsive design in their page creation features.
To be clear, responsive design is different from ‘mobile friendly’.
Sure, both methods are designed to adjust your content so that it can be seen on mobile.
However, instead of offering a fixed width or shrunken-down version, responsive design is all about making your website look good and function well on any device, whether it’s a desktop, tablet, or smartphone.
It does this by using fluid grids, flexible images, and media queries so that content widths and layout design changes automatically and resizes across different screen sizes.
For example
Here we can see a site that adjusts once I check out how it looks on different mobile devices.
In simple terms, your website responds to the user’s device, changing to suit them best – hence the name ‘responsive’.
Responsive design is the absolute best option for websites today.
However, overly relying on page builders to do this can impact a lot of our mobile performance, because they can generate excessive HTML, CSS, and JavaScript.
This additional code can slow down your site, negatively impacting load times and user experience.
That performance above score is the mobile version of an incredibly popular wordpress theme, taken from their own website.
Don’t get me wrong. You can definitely still use page builder plugins. It’s just more of an issue that if you have them doing a lot of extra things, it adds additional code bloat in an effort to make your site become responsive.
It’s kind of like putting bucket seats and a new stereo in an old car. Sure, it feels and may even look slightly better, but it’s still going to be fairly slow and can never improve past a certain point.
(Although it does look badass).
What we want instead is a Tesla. Something high performance from the ground up that doesn’t need the workarounds, and this is what we get with our next option.
Method #5. Using an actual responsive theme
Rather than have an ‘ok’ theme with excess code and multiple plugins and features – why not just use a responsive theme from the start?
These themes are built responsive so you don’t need anything else to achieve this.
Not only that, but they’re a lot faster and easier to use – thanks to us being able to adjust all of the responsive settings on a sitewide ‘global’ level vs page by page with a builder.
Not bad right?
This score is on a page with around 7,000 words, a video, and multiple images, and it hasn’t even been fully optimized yet!
And yet it’s still much faster than the other WordPress site we saw.
TL;DR
If you want to not only smash Google’s new mobile criteria, show up in the SERPS, load crazy fast, and have a better user experience – then you need to swap to a responsive theme. It’s as simple as that.
And to help you decide which to use, here are 3 that I recommend and have experience with, compared with a popular mobile-friendly theme.
Which theme to use? Divi vs Generatepress vs Neve vs Astra
Each of these themes are awesome. However, there are some definite speed and structure differences to take into account.
Usually it breaks down to this:
- If it has more features and customizations built in, then it’s generally slower – even if you’re not using those features.
- While the less features it has in the base code, the faster it is (Usually anyway)
- And the more that code is designed for mobile, the faster it is again
So let’s start off by looking at one of the most popular mobile-friendly themes and how it performs on mobile, and then compare that with our responsive options.
Divi
Divi is one of the most popular WordPress themes in the world.
It’s known for its extensive customization options and built-in features, which includes a drag-and-drop page builder that allows users to create custom layouts without any coding knowledge.
Divi also comes with hundreds of pre-made layouts and modules that can be used to quickly set up a website for various niches.
However, Divi is not specifically designed with a mobile-first approach. It’s designed to offer a lot of options to a lot of different site builders, and these extra features and code bloat impacts its performance metrics.
Divi Performance:
- A mobile PageSpeed Insights score of 77/100
- A First Contentful Paint of 3.0 seconds
- And a Speed Index of 3.2 seconds
Divi’s total page size is around 600KB, and it makes about 30 HTTP requests, which contributes to its slower load times.
Don’t get me wrong. That’s still pretty damn good, but we can get better when we use responsiveness from the start.
A quick note on Core Web Vitals
If you’re not sure what these performance numbers mean, they are part of Google’s Core Web Vitals metrics, which measure site user experience performance.
They look at load speed, as well as how long it takes to interact with a site, and if a page moves around while you’re trying to use it.
Site load speed is incredibly important (and why I have an entire guide on this in this series).
In simple terms, the longer it takes for your site to load, the more of your audience leaves before ever seeing your site. And spoiler alert, but one of the best ways to improve site speed is improving the theme itself. This is because the site infrastructure directly affects how fast things can load.
It may not seem like much, but a single second difference in load time can be worth thousands of dollars, and have a direct impact on your bounce rate – especially if you’re going from 3-4 seconds load time.
So now that we have our baseline, let’s see how it compares to our responsive theme options.
Option #1. GeneratePress
GeneratePress is known for its lightweight, fast, and highly customizable design. It’s ideal for performance-focused sites, offering a clean codebase and stability.
GeneratePress also supports major page builders like Elementor and Beaver Builder and ensures optimal performance on all devices with built-in responsive design capabilities.
GeneratePress Performance
GeneratePress performs well on mobile with:
- A PageSpeed Insights score of 96/100
- A First Contentful Paint time of 1.4 seconds
- And a Speed Index of 1.6 seconds
Option #2. Neve
Neve is a versatile and lightweight WordPress theme designed to be fast, responsive, and user-friendly. It’s an excellent choice for a variety of websites, including blogs, small business sites, startups, and e-commerce stores.
Like each of the themes on this list, it also integrates smoothly with popular page builders like Elementor, Brizy, and Beaver Builder, allowing users to create custom designs without coding.
Neve Performance
Neve is designed from a mobile-first perspective, which means that it has insanely good performance on mobile devices:
- It has a mobile PageSpeed Insights score of 100/100
- A First Contentful Paint of 1.0 seconds
- And a Speed Index of 1.2 seconds, with zero Total Blocking Time
Not bad right?
Option #3. Astra
Astra is built to be insanely fast, highly customizable, and suitable for a variety of websites, including blogs, portfolios, business websites, and WooCommerce stores.
Just like the other themes, it also offers extensive customization options through the WordPress Customizer and is compatible with major page builders.
Astra Performance
Ready to blow your mind?
Astra has:
- A mobile PageSpeed Insights score of 100/100
- A First Contentful Paint of 0.8 seconds
- A Speed Index of 1.1 seconds, and zero Total Blocking Time
Not bad right?
There are some faster themes on the market, such as Hello Elementor, but the faster you get, the more features are stripped out.
(Elementor’s theme loads insanely fast at around 0.4 seconds!)
So which responsive theme should I choose?
Honestly, they are all great.
If you need the extra customization options, Divi can still work as long as you check those fixed width and static issues for mobile.
The main consideration is basically do I want more features for less speed? Or more speed for less features?
You can still get a lot of the same customization options from these 3 responsive focused themes, if you add in more features or page builders, they may just slow down slightly.
(However, they will still perform faster than a lot of other theme options, because the core code is so fast).
- GeneratePress is the slowest of the three options here but has the most built-in feature options.
- Neve is faster, in part due to its design, but also slightly fewer features and less code bloat.
- Astra is the fastest because it’s stripped back the most, but with enough base features to build most sites. (You can still build e-com on it with woocommerce plugins).
If you’re still not sure, why not try them all out?
Each of them is free to download and use with the base level features, so you could try each of them and see how they feel, measure their performance and see which you prefer.
You might be surprised at the impact they can make…
How to test your site speed and appearance on multiple devices
Like I say, it’s worth testing these 3 different themes and see how they perform. You can also do this for your current setup now, and then compare, before you add them.
For example
I used to have Neve installed and it was great. But in the process of improving my site for these Google updates, I realized I could potentially get a faster load time, and decided to test out all 3 against each other.
Astra ended up improving my load time by 40%, while still providing all the features I needed!
So go ahead and check for yourself now.
How to check how your site looks on different devices
The first thing we want to check is if the site is loading up responsively.
We could use fancy tools like BrowserStack if we wanted to dive deep into actual usability on every different mobile device.
For a super quick check though, we can just use Dev Tools that come with all web browsers.
So, go ahead and open up your website, and load up a page that’s pretty resource heavy such as a blog post.
The reason for this, is we want to test on pages that will technically be the slowest or most resource heavy, vs our home page which is probably our best performing page.
With the page open, press F12 to open up the developer tools at the bottom of the page.
If you scroll across to the right of the Dev Tools, you’ll see a button that looks like 2 pages overlapping called ‘Responsive Design Mode’.
If you can’t see it, you can access it by pressing CTRL + SHIFT + M while the Dev Tools are open.
This will then load up your page and show you how it looks on a mobile device. You can then click on the menu options at the top of the page to filter through different devices, as well as portrait and landscape mode.
Go ahead and check out your page on different devices and layouts.
Basically, you just want to see that everything is loading correctly, and that nothing is off the screen or can’t be clicked on when it should be.
For example
Here we can see that this popup can’t be closed when on an iPhone (which is around 60% of all US mobile traffic). Not only that, but it’s messing up the header.
How does your theme look currently? Is it working correctly?
It might be that your current theme is doing a good job of this and if so, that’s great. However, how fast is it loading while doing this?…
How to check your current site speed
Keep your blog page open and open up a new tab. In that tab, go ahead and check out Google’s PageSpeed Insights tool.
Copy and paste your page into the browser and then wait for it to load.
Once it does, make sure to check out the mobile performance (not desktop) and then scroll down to look at the speed scores.
Here we can see that this particular blog page loads up the first page elements in around 2.2 seconds.
However, the header image takes around 4.7 seconds to load, so we would be waiting for that before we could start looking at the rest of the page, or the page might move around as soon as it’s loaded which is frustrating.
In fact, that’s more than likely what’s happening as the Cumulative Layout Shift shows that things are moving around the page for 0.2 of a second.
If we look at Google’s recommended speeds for this, we want to aim for:
- First Contentful Paint (FCP) of 1.8 seconds or less
- Largest Contentful Paint (LCP) of 2.5 seconds or less
- Total Blocking Time (TBT) of 200 milliseconds or less
- Cumulative Layout Shift (CLS) of 0.1 second
- Speed Index of 3.4 seconds or less
So in this example, this site is actually failing all but one of these on mobile. Not great.
- How does your site currently compare?
- Is it passing these scores?
I recommend grabbing a screenshot for now, and then checking again once you set up one of these other themes.
How to set up your responsive WordPress site
Grabbing and installing the new theme to use is incredibly easy. However, there might be some settings on your current site design that we need to tweak to improve, before we retest your site.
So let’s walk through it real quick.
Open up your WordPress dashboard, and head across to Appearance, and then Themes.
Click on the ‘Add New’ button at the top of the page, and then click on ‘Upload theme’.
This will open up an install box, like so:
Then we need to download the theme file so we can install it.
A quick sidenote: Each of these themes offers a free download to test it out.
However, it might not be immediately obvious where.
For example
Once you click across to Astra, you need to then go to their pricing page, and then scroll down till you see ‘Download The Free Astra Theme‘, like so:
Add your email address and hit enter, and the theme will download to your downloads folder.
Then you just need to open that folder, and drag the file onto the install box in WordPress and then click ‘Install Now‘, like so:
Simple!
Setting up mobile accessibility settings
Astra is responsive right away, so we don’t need to do too much.
We will need to adjust the mobile content accessibility settings such as:
- Optimizing image sizes
- Making sure srcset and viewport tags are in place (They are in Astra as standard)
- Adjusting our typography font sizes and contrasts so they can be seen easier
- Designing an accessible menu
- Adding accessibility for users with assisted requirements
- Optimizing buttons and link settings, for sizes, padding and margins etc.
I cover how to do all of this in Part 1 of this series.
However, none of this is required right now for our responsive design test. I just want you to know that if you move ahead with this theme or any theme, you would still need to set those.
Fixing potential pre-existing responsive issues
However, if you’ve been using a page builder in the past, there might be some settings that you have in place that might cause issues and not be fully responsive.
Such as:
- Fixed Width elements, and
- Static Elements
So let’s walk through both of these, what they are, and how to fix them.
Fixing mobile fixed width issues
Fixed width elements are those with a specific, unchanging width defined in pixels.
A lot of websites that were initially designed for desktop use fixed widths for containers and elements, making them non-responsive on smaller screens. While this can provide a consistent look on larger screens, it often results in poor usability on smaller screens, like those of mobile devices.
If you noticed that parts of your page were too wide when doing your dev tools inspection earlier, then you probably have this issue.
The good news is that the solution is quite simple. Instead of making these a set pixel size, we set them to a percentage or ‘viewport width’ size instead. That way, they always adjust based on the screen size.
For example
Let’s say that you built your page in elementor, and maybe your sidebar or header image was too large.
Open up the page in Elementor (or whichever page builder you used), and then click on the section you want to edit.
We want to change the setting from a fixed pixel width, to a percentage or ‘vw’ width instead.
This can vary depending on the tool you use, but in Elementor, you go to ‘Style’ with the element still highlighted.
Then go onto ‘Maximum Width’ and change the settings from pixels, to percentages, and set a number.
Then simply adjust the number to fit.
In my example, I have a header image that is the full-width of the container that my blog post fits in. So I set that to 100% rather than 1024 px.
It will still appear as 1024 on desktop or similar, but on mobile it will now load to the correct width for the device instead.
Simple!
Fixing mobile fixed position issues
Fixed position elements are elements that stay in the same position on the screen, regardless of scrolling.
While they can be useful for keeping important content visible, such calls to action, they can pose significant issues on small screens:
- This is because they take up a disproportionate amount of screen space on mobile devices, which have limited display area.
- This can also affect usability, and make it harder to interact with the main content if a fixed element is constantly overlapping part of the screen.
This is what was happening earlier with the popup example. It was covering the header and also not being able to be closed.
There are a few ways to fix this, depending on what element is causing the issue. If it’s a popup plugin, you’ll need to go into the settings for that. Likewise, if it’s an element in one of your articles, you need to go into your page builder again.
The solution is pretty much the same, but let’s walk through a page issue example.
Simply click on the element that needs adjusting, like before.
In the “Advanced” tab, look for the “Positioning” section. Then, make sure that the element is set to “Default” rather than “Fixed” or “Absolute”.
Simple!
Repeat that for any element that has this issue, and boom! All responsive issues should now be fixed for this page.
Don’t forget to compare the performance!
And that’s all it takes to make your WordPress site fully mobile responsive!
By now your site should pass the criteria to be crawled and appear in Google, and provide a much better user experience. And better still, it was super simple to do 😀.
All that’s left to do now is:
- Recheck the appearance of your page in different mobile browsers
- As well as your new page load speed, with your new theme installed
So if you haven’t already, save your page and theme changes now, and then refresh your cache. This is so the new changes will show up when the page loads.
Give it a few minutes to let the changes take place.
Then:
- Use the Dev Tool check again to see how your page handles. It should have now fixed everything and be fully mobile responsive. (F12 and test settings)
- Then, reload the page in PageSpeed insights and check the speed to see how that’s improved.
Important: If the page seems slower, it can simply be that you checked while the page changes were still being made, so check again in a few minutes. You should see it improve again.
How did you do?
Be sure to open up your screen grab from earlier and take a look at the difference:
- How did the changes work out for you?
- Did you test each of those 3 themes?
- How much faster was your load speed?
I’m going to go out on a limb and say it’s probably a second or two faster already right?
What’s next?
Remember that there are 3 parts to making a completely mobile optimized site:
- If you’ve been following along, then you’ve completed Part 2 which was making sure the site loads correctly and responsive on mobile.
- You also need to tick all the boxes and settings for mobile accessibility that we covered in Part 1. These will affect everything from your content marketing, to product pages and more, so do that now if you haven’t already.
- Then be sure to check in again soon for Part 3 where I’ll show you how to make sure your site loads lightning fast.
This is the final key to making this all work.
If you didn’t see major jumps in speed from the theme change, then chances are you have a technical issue that needs to be fixed. Probably slow LCP or FCP issues perhaps?
It’s all fixable. I’ve taken a page from 15 secs load time, down to 1.3 seconds, so we can make this work.
However, don’t worry too much about that right now. I’ll cover all that in the next guide, including what to do, what settings and more so stay tuned, and great job so far!
Just make sure to get the steps done in this guide, and Part 1 before then.
Whenever you’re ready, there are 3 ways I can help you:
1. Future Proofed Content: This is my comprehensive writing training. It’s the exact systems I’ve refined over a decade of Content Marketing – improved with AI assistance. The course walks you through my entire writing process step-by-step, so you can follow along and create content of your own.
In just 90 minutes, you can create a long-form, unique, Google-friendly article from scratch, with zero worries about Google penalties or plagiarism.
The post you just read? Yep – it was created with this process.
2. Subscribe to the AmpMyContent blog: I share in-depth case studies, guides and tutorials every month. All designed to help you get more from your efforts. Perfect for small teams and one man blogs who want maximum results.
3. Subscribe on YouTube: Watch video versions of all articles, as well as quick tips, advice, behind-the-scenes, and more.