Mobile Content Marketing: The Definitive Guide For 2024

So what is mobile content marketing?

Well, it used to be a term we used to refer to marketing campaigns that only focused on mobile traffic users.

However, as of July 5th 2024, all content marketing is now mobile content marketing, due to some recent changes in how Google tracks and indexes content online.

In the past, they gave preference to mobile-friendly sites for their rankings index.

This isn’t that. This is the next step.

It’s not just your blog posts that are affected by this update either. It’s every page on your website. So depending on the date when you read this, there’s a chance that your website will have either lost traffic – or will have disappeared from Google completely.

Not for something you did, but because of something you didn’t do.

You see, Google will no longer crawl or index any page on the internet, that isn’t mobile-optimized. Instead, it will be removed from their index.

If you don’t know what that means, basically you’ll no longer appear in the search results.

That’s not a drop in traffic. It will be as if your site no longer exists. So if someone searches for your brand or company name, your site doesn’t show up at all. Nothing. Zero.

Scary stuff right?

But don’t worry though, because in this guide, I’m going to show how to fix this, while also meeting Google’s guidelines for mobile websites and mobile content marketing moving forward.

So let’s get into it!

Sidenote: Because this is a fairly large topic, with a lot of moving parts, I’ve broken this down into 3 articles with step-by-step instructions.

The series breaks down like this:

Part 1: Optimizing your content for mobile. This is the guide you’re reading right now. In just a second, I’ll show you how to optimize your website and content for Google’s mobile content marketing guidelines
Part 2: How to create a Responsive WordPress website. I show you how to make an actual responsive website, step-by-step, and not simply a shrunk-down version of your desktop site. There are a few methods for this, and chances are you might be using a bad workaround
Part 3: How to improve the loading speed of your website. I walk through everything you need to do to make sure your site loads lightning-fast on mobile devices.

Don’t worry if that all sounds super complex, as I said above, I break this all down and show you exactly what to do, so you can get this done easily, step-by-step.

Just make sure to read and implement each of them, as you can’t meet the mobile criteria without it.

Even if Google weren’t doing this update, I would still tell you to make these changes, as they can all affect your sales.

If the site is responsive, then it doesn’t look or handle weird when they try to use it. This makes your users happier, while also making it easier for them to become a customer.
If the site is fast to load, they won’t get frustrated and leave when it takes too long.
If you add in the user optimization techniques (the stuff in this guide), your customers will be able to interact more easily – even if they have accessibility issues. Easier actions mean more leads and sales.

No joke – I used to work in conversion rate optimization, and you would be amazed how often people want to A/B test elements of their site to improve conversions.

But the reality was that fixing these issues first would have the biggest impact on their business. It’s honestly crazy how many people test fonts and button CTA’s when their users are clicking but pages are taking too long to load and leave. The owner assumes the page has a copywriting issue, but the damn thing just isn’t loading fast enough.

Heck, even if you run paid ads for traffic, all of these elements affect ad conversions and performance. You’ll be surprised how often people think ads are not performing well when the reality is that their users are bouncing due to page load time.

OK, rant over!

Before we get into the optimization techniques, let’s take a quick look to see how you’re currently doing, and any glaring issues.

How to check if your site meets Google’s mobile optimization criteria

Rather than downloading complicated dev testing tools, we can use Google’s PageSpeed Insights website.

Click the link here to open up the site in a new tab, and then head across and add your website URL into the search bar.

It will then run a test of the page you give it, and then show that page’s performance for desktop and mobile visitors.

However, it automatically loads the desktop results first, but it’s the mobile results that we care about. Simply because this is where the issues will be, and what Google uses to assess your site and content mobile friendliness.

You’ll often see a drop in performance between the 2 versions.

For example

On the Desktop report my page is pretty great (99/100 score), but on the mobile report, I immediately see issues:

So let’s break this down.

Those numbers at the top of the page, are speed tests for Google’s ‘Core Web Vitals’, which are simply user experience tracking metrics.

They highlight the major things that affect a good user experience and then measure the impact they have on your user.

LCP (Largest Contentful Paint) – This measures how long it takes for the largest visible content element on the page to load. In this example, it’s a photo of me waving, but it could often be a product or header image.
FID (First Input Delay) – Measures how long a user has to wait before they can start interacting with elements on the page. How soon can they get to clicking? This is why speed is important.
CLS (Cumulative Layout Shift) – This measures the ‘visual stability’ of the page, by tracking unexpected layout shifts of visible content on the page. In simple terms, do things move around unexpectedly as the page gets built? This could result in the user clicking on the wrong thing, and getting frustrated. (Often this is due to site structure design which is why it’s one of my guides in this series).

For the other 2 numbers, you don’t have to worry about them too much. They basically impact the 3 factors above, but just so you know what they are:

TBT (Total Blocking Time) – Measures the total time during which the main thread is blocked and unable to respond to user input.
SI (Speed Index) – Measures how quickly content is visually displayed during page load.

As I said earlier, the optimization, structure, and speed are all connected. By fixing one, you usually see an impact on the other issues.

If we also scroll down the page, we can then see more detailed results for this performance, with the current major issues in red and yellow, like so:

You can also click on the arrows to the side of these issues and learn more about each of them.

It’s actually really handy as it will give you advice on what you need to improve, and even information on settings for plugins and things.

If you scroll even further down the page, you also see more reports for this page on:

User Accessibility
Best Practices, and
SEO

I’ll cover these in more detail later when I get into how to meet all these guidelines.

For now though, there’s something you need to do that’s incredibly important, and that’s to check other pages of your site before moving on.

Important: Check out your key page performance ratings also!

Don’t just enter your home page URL in this tool and think that you’re fine to skip this guide. Make sure to also check anything that has a high impact on your site, such as anything that gets traffic, gets conversions, or makes sales.

The reason I recommend this is because homepages are usually fairly well-optimized and can mostly pass these tests, whereas larger pages usually have a lot of things happening, due to how they’ve been built and structured and can fail.

For example

Here are 3 of my main pages from my site, (excluding my home page), and how they performed before I fixed them.

The core blog page performance on mobile

The core blog i.e. where you house all your articles for people to find, is usually one the largest traffic pages on your site. Simply because new users might love your content and take a look around.

It turns out my blog page had an image issue that caused it to take 5.2 seconds to finish loading the LCP image on mobile.

So over 50% of my traffic has been waiting over 5 seconds for this to load, which is not great.

Especially when you realize that site speed directly impacts sales.

Sales page performance on mobile

My sales page is faster loading than the blog page, but still not fast enough.

Also, look at that horrible layout! There’s a random line of text appearing to the side of the header image, which is not good at all. Even if the page was loading fast enough, I would be delivering a bad user experience on mobile devices.

I wasn’t using a theme or structure that was loading this correctly, hence the bad layout.

Blog post performance on mobile

I also inspected one of my larger articles to see how that performed.

Technically it meets all criteria (for now), but it does have a warning for an excessive DOM size.

What does this DOM issue mean?

In simple terms, there is too much code on the backend of the page, and it takes a lot of resources for it to load.

This is because I was using a page builder plugin to create a lot of style functions that in reality were not needed, along with a lot of unused plugins. I could get the same layout and aesthetic for far less code, improve the load time and responsiveness, and lower this DOM size, simply by removing the plugin and changing a few things.

We never really think of the impact of this, but as you scale your traffic up, it can add extra load to your server, increasing the chance that it crashes when traffic gets very high.

If I were running an influencer campaign or a paid ads program to that page, it could potentially break it if the campaign went crazy.

TL;DR

As you can see, the impact on these different pages is much larger than I might have realized, if I only went off the home page test.

You probably have similar issues on your own site too. But the good news is all of these are fairly easy to fix, as long as you implement all 3 guides in this series.

Site structure improvements will solve those design issues and stop things from moving randomly
Site speed improvements and loading techniques will improve the LCP issues
Accessibility and usability improvements will make our users happier

With that in mind, let’s walk through each of these content optimization techniques.

How to meet Google Mobile Content Marketing Guidelines

Remember at the bottom of the PageSpeed Insights tool, there was this section?

It measures how accessible and usable your site is on mobile devices. Not just for the average reader, but also for users with physical difficulties such as vision impairment.

Technically these are not pass/fail criteria (for the time being), but I would still improve these ASAP. Mainly because they’re measuring how easy it is to use your site, and improving how easy it is for someone to make a sale or read a guide, is never a bad thing right?

So let’s get into them.

#1. Set your font size to 16px or larger

Because people are trying to read on smaller screens, you need to make sure your site’s body text is large enough to read on those screens. Google’s recommendation is 16px or larger.

You can change this in your customizer of your theme settings easily enough.

Just choose the body font option and set it to 16 if your current font is smaller than that. If it’s larger then leave it as it is.

#2. Make sure that your headers follow a logical progression

This is actually a good tip for writing in general, but make sure to use H1 for the main title, H2 for section titles, H3 for subsections, etc. This helps both users and search engines understand the structure of your content.

Not only that, but it also helps your visitors who have vision impairment to navigate the content easier with a page reader tool.

#3. Let your content breathe

Always try to break down larger sentences and paragraphs, where possible, as it makes it easier to read – regardless of screen size.

Notice how in this article, there’s a lot of white space around?

This is less effort on the eyes, which improves mobile use.

Use:

Short paragraphs
Headings
Bullet points, and
Images to break up the text

#4. Make sure your content can be viewed on a sunny day

Because people use their phones in all types of conditions (such as a bright sunny day), Google recommends adjusting your body text color and background color contrast to 3:1 for all users, so that they stand out easier.

This will not just help if there’s glare on the screen, but it can also help visually impaired users to read more easily.

A simple check for this is by using this color contrast testing tool.

Simply add your background color and text color from your site into the tool, and check to see if it passes.

If you’re not sure what your current color settings are, open up your site and go to appearance and colors, and then copy the hex number across, and test them out.

If the contrast is not enough, consider making one lighter and the other darker, or even darker colors.

#5. Make sure your site is using the viewport meta tag

This tag helps to make sure that your site scales correctly on different devices, by setting the width of content to the screen size.

Here you can see the incorrect version, although drunk down, is basically just a very difficult version of the desktop site. Whereas the correct version is readable and responsive.

Most new themes and platforms have this built-in, but it doesn’t hurt to check, and then add it if it’s missing.

Here’s how:

Open your site and press F12 to open the developer tools option.

It loads at the bottom of the page and looks like the Matrix.

With this open, press CTRL +F or CMD + F so that you can search inside this tool, and then search for the word ‘viewport’ and hit enter.

If the tag is in your code, it should come up like so:

If not, then you need to add it, either via the header.php file of your site or with a plugin that allows you to add code in the header.

The plugin option is usually the better option, as new theme version updates can remove any code added to the header file directly. Whereas the plugin will ensure it keeps getting added, even if the theme updates.

I use the ‘header footer’ plugin for this, but there are a lot of options out there.

The code you want to add is:

				
					<meta name="viewport" content="width=device-width, initial-scale=1.0">

#7. Make sure that you have the srcset attribute in place for responsive images

The srcset attribute allows you to specify different image sizes for different screen resolutions and devices.

This helps you to improve performance and user experience by serving the most appropriate image size for the user’s device – be it a phone, tablet, etc.

Basically, when you upload an image, your site then creates multiple different versions of the same image, and standard sizes for different user screens. Then, when the site loads on a different screen, it can source the best image option to fit.

Now, there’s a good chance that this code may already be baked into your site, but it’s worth checking and adding.

You can do this the exact same way as before, by searching in the dev tools for srcset.

If it’s not there, then you have a few options. Either upgrade your theme, or you can use a combination of plugins. You will however have to also create and save multiple image sizes.

Honestly, if your theme doesn’t have this, I would highly recommend saving a lot of effort and upgrading.

#8. Make sure your videos are responsive for each device

You need to make sure that if you embed a video on your site, it fits the screen or section where it’s been added.

YouTube is pretty good with this because their embed code is responsive by default.

However, if you’re running an older theme, it can have issues with running these or displaying them correctly. Especially if it’s running outdated methods.

There is however a solution. We can add some custom CSS code to our site and wrap the video in a <div>, to make it both work and be more customizable. You can then adjust margins and have the video adjust in size and still keep its aspect ratio.

Here’s how to set this up.

First of all, we want to add some CSS to our site theme.

In WordPress, you can just go to the customization settings, and then open the ‘Add custom CSS’ option:

Then copy and paste in the following:

				
					.responsive-video {

position: relative;

padding-bottom: 56.25%; /* 16:9 aspect ratio */

height: 0;

overflow: hidden;

max-width: 100%;

background: #000;

}

.responsive-video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Now that we have that, every time we add a video to the site, we want to add some code around the video or ‘wrap’ it.

You need to do this in 2 stages.

Step #1. Add the wrapper code

First add the code below to where you want your video to appear (making sure to add it in the HTML version of your page).

				
					<div class="responsive-video">

<iframe loading="lazy" src="about:blank" frameborder="0" allowfullscreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.youtube.com/embed/xyz?controls=1&#038;autoplay=0"></iframe><noscript><iframe src="https://www.youtube.com/embed/xyz?controls=1&autoplay=0" frameborder="0" allowfullscreen></iframe></noscript>

</div>

Step #2. Then customize the code

See the part of the code that says youtube.com/embed/xyz? We need to replace that section with the code of the video we want to insert.

So head over to YouTube, grab the embed version of the video, and then copy and paste the part that starts at src=.

Basically, you want to copy everything that’s between the two “”:

So in the image above, we would grab from the ‘https’ part, all the way to the ‘0b3k7o’ part. Copy that, and then swap in inside of the src section in the wrapper code and you’re good to go.

You’ll notice that the wrapper also has some additional code that will also give the user some video controls and disable any auto-play options.

Why disable autoplay?

Autoplaying videos can be disruptive and annoying, especially if they start with sound. Users prefer to have control over when a video starts playing, which is why Google recommends this also.

Not only that but autoplaying videos can also use up bandwidth and resources, potentially slowing down the page load time.

#9. Make your navigation as simple as possible

Because your user is on a phone, it can make it a little awkward to find things.

With that in mind, there are some best practices to use.

Make it easy to jump back to your home page

The home page is the easiest location to find things, and where most of your audience will want to return to if they make a mistake, or simply want to browse further.

Most sites do this as standard, but make sure you let your logo image let the user jump back to the home page.

Again, this is all in your theme settings. If it’s not working right now, you probably just need to add the URL of your site in the settings for your logo.

Use shorter menus

Because mobile screens are smaller, you don’t want to cover everything with huge menus. So instead, try to limit the number of top-level menu items and use submenus.

You can always set up deeper access menus once a user has clicked, to help limit the overlay in the original screen, and then add depth in the new screen.

For example

If you have a drop-down in your menu for a blog page, you could then have separate blog topic sections in a blog page-specific menu.

That way the home page or other pages are not covered in topics, but the relevant page helps them to filter down further.

Add search functionality and use smart search features like autocomplete and spelling corrections

Even easier for your user, is if you add a search bar to your site and let your users search for what they want.

You’ll be amazed at how well this can keep people on your site – as long as you implement it well.

Basically, you need to:

Make sure your research bar gives relevant results, and
Make sure your search bar is secure

In a recent study by Google, they found that if the user searched and couldn’t find the most relevant result immediately, they would often leave the search function and assume it didn’t work correctly.

But the inverse was also true and people would stay longer if they could find what they wanted.

So clearly, setup is important.

You can improve your search bar performance by adding autocorrect features to help send your users to the correct thing that they’re searching for.

A great plugin that solves this is SearchWP for WordPress.

Not only does it help with autocorrect, but it also allows for a better site search than the standard WordPress options, while also improving site security for SQL injection attacks via the search bar.

What is an SQL injection attack?

Some search functions are not that secure and can be manipulated into sharing information, passwords, personal details, etc.

It works a little like this:

Imagine you have a library catalog search, and you type “Harry Potter” to find all books with “Harry Potter” in the title.

Normally, the librarian looks through the catalog and shows you all “Harry Potter” books right?

Well, in a SQL injection attack, instead of typing “Harry Potter”, someone types a special code that tricks the librarian into showing all books in the library, not just “Harry Potter”.

This special code can also make the librarian do other things, like giving out private information or even deleting books from the catalog.

So yeah – not great, and it’s insane how many sites this works on.

However, the Search WP plugin will solve all of this, while also allowing you to add secure search functionality for your users.

If you have a lot of pages or products, you would be crazy not to implement this.

Users can search directly, vs going back to Google and searching for a solution that you might provide, but doesn’t currently rank in the top 10 for.

It’s lost traffic to an already warm user.

#10. Make things easy to click

Interactive elements like buttons and links play a crucial role in how users interact with your website. If they can’t click them or worse, click them by accident, it’s an incredibly frustrating experience.

This is why we need to add both padding and margins for these elements:

The padding makes them larger and easier to click
While the margins provide space around them to prevent missclicks, if they are near other elements

We can set this up with code, but a lot of themes and page builders have these customization options built in – we just need to tweak them.

You can usually access this by editing the page, selecting the button you want to edit, and then going into the layout styles to find the padding and margins.

That being said, some themes will also allow you to set global settings for all buttons, under your theme customization.

This is handy if you’re always going to use the same color, margins, padding, etc.

That being said, customization for specific button features, like animations or drop shadows is usually in the specific button customization. (More on this below).

#11. Make interactive elements obvious to click

It seems obvious, but adding a call to action on a button or link can increase the click-through rate – especially if you explain what happens or what they get in that CTA.

The user understands that if they click that button, they will be taken to my blog page. Simple.

We can also make it even more obvious that it’s a clickable element, by replicating things from real life.

We can:

Add depth or shadow so it stands out on the page
Add mouse-over effects, such as a pulse or changing the mouse cursor to a hand, when the user hovers over the button
As well as add a color change on click, to help indicate that the button has been pressed

Again, all of this is normally editable in your theme – you just need to change your settings.

Margins and padding are usually a global option, while shadows and specific customizations are usually inside of your page builder options when you have the button selected in the editor.

#12. Pop-ups and adverts are ok on mobile – as long as you use them correctly (but you might not want to)

Here’s the thing. Yes, you can use popups and adverts (overlay or simple embed) on mobile devices.

Google is fine with this, as long as you follow some implementation criteria.

However, you might be better off not using them anymore, and instead going with a simple embed optin form direct on the page vs a popup.

The reason I say this is because all iOS devices come with popup blockers installed as standard now, as well as some web browsers – meaning that your pop-up will either no longer appear on the screen, or won’t be interactive on some devices.

iOS accounts for around 30% of all mobile device traffic across the world but with a larger 60% in the US. So, if you’re targeting the US market or SERPS, you’re going to be losing 30-60% of your interactions from popups.

Ouch… (I used to get around 83% opt-in rate from 2-step pop ups so trust me, this sucks).

You could potentially use targeting to only show an inline opt-in form to iOS users, and then a popup to Android users, by using JavaScript and some conditional display options.

Basically, insert both versions and have one or the other to show depending on the user. But, it’s probably not worth it unless you’re getting very high traffic and also see a significant optin rate difference with popups.

Either way, if you do want to keep using them, here are Google’s current guidelines for both.

How to use pop-ups on mobile pages

Ensure pop-ups do not cover essential content or navigation elements
Provide a clear and easy-to-find close button
Use fixed positioning or specific screen areas to display pop-ups
Ensure pop-ups are responsive
Don’t go crazy and have them on every page, or even multiple times per page

Here you can see one of my older pop-ups that fails this criteria.

Not only is the navigation unable to be used (it seems to have blocked out the page access while the popup is loaded), but the CTA button is offscreen!

The only redeeming feature is that the close button is easy to use.

The good news is, that most page builder tools will have pop-up builder options in them nowadays.

You can simply build it to be responsive, with a margin and padding, and set the location to be always below the navigation bar.

How to use adverts on mobile

The setup and usage of adverts on mobile are fairly similar to pop-ups, with just a few extra criteria.

The main thing is that adverts can’t match your branding.

If your popup or advert is for an internal page of your site (such as a lead magnet etc), then it’s okay for it to match your branding. However, if that advert or popup is for a link to any external 3rd party site, it cannot match your branding and must be obvious that it’s an advert and not an internal link.

The reason for this is that people don’t mind clicking off your site, as long as they were not tricked into doing it.

So, the criteria for adverts are:

If you’re going to make the advert a popup, follow the same guidelines as above, as well as the ones below. But, if you’re making the advert a direct embed, just follow the tips below this
Make sure to use distinct styles for ads, such as different colors, borders, or labels, and make it clear they are different from your internal content
Include a small label such as “Advertisement” to clearly identify the ad
You can style the ad widget using the Elementor panel to make it visually distinct from other content

Notice the use of different colors from my brand, the offer, and the note of an advertisement.

#13. Maintain consistent content across different page versions

If you have 2 versions of your site (mobile and desktop), make sure that the content is the same on both the desktop and mobile versions.

Why care?

Well, it used to be common practice to remove some content or imagery on a mobile version of a page to help it load faster.

However, because the crawler is using the mobile version to understand and rank your page, it will inevitably make it rank for less – simply because the mobile version is now missing elements that the desktop version has. Every little helps!

#14. Make sure you’ve correctly set meta tags and meta descriptions

Likewise, if you have 2 versions of a page (mobile and desktop), make sure they have the same meta tags and meta descriptions.

This next note is relevant to everyone though!

Regardless of if you have a single responsive page or 2 versions. Because the web crawler only references the mobile version, make sure your character limits reflect this when writing your meta information.

Currently, you want a maximum of:

64 characters in the headline, and
160 characters in the description

However, I recommend using 63 and 159. This way your descriptions won’t be cut off on mobile devices, or have ellipsis after them, and you can increase your CTR in the SERPS.

If you’re not sure of your character count, you can check it with this tool.

#16. Schema markup targets the correct page version

Another tip for those of us with 2 versions of a page. If you’re running a desktop and mobile version of your page, make sure the information in your Schema markup references the correct mobile URL version.

I.e. it has the ‘m.yourpage’ version in the Schema.

#17. Create discernable links

Your users need to know when a link on your page is actually a link – so they can choose to click on it or not.

We’ve already covered buttons, but what about images and text links? These aren’t always immediately obvious that they are a link.

Links colors can sometimes be very similar to text, which can be very hard for people with vision impairment.
Images sometimes are not clear that it can be clicked
And for people using page readers to view the information on the page, if the image isn’t tagged as a link, they won’t know that it is.

Fortunately, this is all very easy to fix.

How to create discernible image links

For image links, make sure they have relevant alt tags when uploading them so that a page reader can inform the user where each link is taking them. Ideally, this is something your SEO person is doing anyway but might be getting skipped.

How to create discernible text links

For text links, there are a few tweaks we need to make. First off, make sure that they have the underlined setting so it’s clear that the text is a link.

Some themes have more accessibility features nowadays, so be sure to check.

I use the Astra theme, and it has this feature in the customization options, under typography, and then at the bottom of the options.

If you don’t have this option in your theme, then you can download and use the WP Accessibility plugin.

This will help with a lot of the accessibility guidelines that we’re going to cover, and more.

Such as:

Add skip links with user-defined targets. This is so vision impaired users with a page reading app can choose to skip around to different sections of the content
Add language and text direction attributes to your HTML attribute if missing.
Add an outline to the keyboard focus state for focusable elements. (Some themes have this built-in but are helpful if not).
Add a long description to images. Use the image’s “Description” field to add long descriptions.
Enforcement for alt attributes on images in the Classic editor.
Identify images without alt attributes in the Media Library, so you can find any that are missing and fix easily
Add labels to standard WordPress form fields (search, comments, etc, so that people with page readers know what section they are on at the time)
Add post titles to “read more” links.
Remove tabindex from elements that are focusable. (Also fixes plugin-caused problems.)
Remove user-scalable=no to allow resizing.

I’ll cover a few of these in just a second, but for now, the option we’re looking for here for improving our text links is in ‘accessibility fixes’, and it is the force underline option.

This helps to highlight the link, but we can also take it a step further by adjusting the color of our links so that they stand out even more.

Remember earlier when we talked about our background color and our text contrast ratio? Well, we can do the same with our links, by comparing them with our body text, and our chosen link color.

We could use the same tool as before.

However, this new WP accessibility plugin also has a contrast checker for you at the bottom of the options that you can use also.

If you’re not sure what your current color settings are, open up your site and go to appearance and colors, and then copy the hex number across, including the #, and test them out.

Simply enter your body text color and link color and see if they pass or fail, and then adjust to fix.

An alternative option for contrast – add an accessibility toolbar

However, if you have a specific brand theme and don’t want to change the color of your links too much, you can always turn on the accessibility toolbar option inside of the accessibility plugin instead.

It’s a tool that with a single click, can change the color of all elements of your website so that it’s easier to use for visually impaired people.

Once you’ve turned it on, the toolbar looks like this on the page:

The user can then click this and change the contrast of the page, like so:

I know it’s not beautiful and gives PTSD flashbacks to early Web 1.0 websites from the 90s, but it helps your audience so it should be an option.

However, just be aware that although this toolbar option helps you to solve this contrast issue and help your user, it doesn’t technically meet a ‘pass’ criteria for your site just yet.

This is because you haven’t technically changed the core colors of the text and links on your site to meet the contrast ratio, so it will still technically flag this as an issue. Again though, it’s not a fail issue, but just so you know.

How to only show the toolbar to people who need it

Having the toolbar floating over your main page might mean that it gets clicked by your users by accident. Which is not great.

So here’s how to make all your users happy.

With a little bit of code, you can set this toolbar into your footer instead. That way it’s easy to find for users who want it, but not overlaid over content for users who might not need it.

I have mine set up in the footer like so. This way, if someone clicks on that text, the toolbar button appears and they can then set the contrast visibility options 😁.

I’ll walk you through how to do this also.

Start by changing the settings in the accessibility toolbar, so that the toolbar is no longer selected. Then, select the option that says ‘Support Accessibility toolbar as shortcode or widget’.

Then, go ahead and add an HTML widget into the footer of your site, so that we can add in some code.

Just make sure you have this in the footer also to use this method, as the code I’m about to share is specific to the footer.

Then, paste the following code into the new footer widget.

				
					<a href="#" id="toggleToolbar">Accessibility Options</a>

<div id="accessibilityToolbar" style="display:none;">

  

<div class="  ltr  default a11y-toolbar-widget">
	<ul><li><button type="button" class="a11y-toggle a11y-toggle-contrast toggle-contrast" id="is_normal_contrast" aria-pressed="false"><span class="offscreen">Toggle High Contrast</span> <span class="aticon aticon-adjust" aria-hidden="true"></span></button></li>
	</ul>
</div>


</div>

Save that widget. Then, go across to your site and add this next code to your footer.

				
					<script>

document.addEventListener('DOMContentLoaded', function() {

  document.getElementById('toggleToolbar').addEventListener('click', function(event) {

event.preventDefault();

var toolbar = document.getElementById('accessibilityToolbar');

if (toolbar.style.display === 'none') {

   toolbar.style.display = 'block';

} else {

   toolbar.style.display = 'none';

}

  });

});

</script>

If you’re not sure how to access your footer to add this, you can use various plugins to allow you to add this in. (Some themes have it as an option already built-in also).

As I mentioned earlier, I use the ‘header footer’ plugin.

Once this is saved, the new accessibility option should be in the footer, and once clicked, the toolbar will allow the user to change the contrast!

#18. Make sure that interactive controls are keyboard-focusable

Due to physical difficulties, some of your users rely on being able to use their tab function on their keyboard or phone to move through the interactive elements on your page.

They click the tab and it starts at the first element, then moves to the next logical one as it moves down the page.

Most themes will have this built-in, but I just wanted you to be aware of this, as it is one of the accessibility criteria. If you don’t have this though, you might want to speak to your developer or look at upgrading your theme to one with better accessibility options, as this is a little complex to talk about here.

#19. Make sure that interactive controls follow a logical progression

One thing they will need to be aware of when they implement this step above is a logical progression of interactions.

What I mean by this, is that when the user tab clicks from one element to the next, they need to follow a logical progression through the interactive elements and don’t just bounce around the page to different sections.

For example

If you were filling out a form that was:

First name
Last name
Address
Email

Then you would expect it to tab from first name to second name and so on. However, if your code is a mess, it might jump to a menu item, or even something off-screen by accident, which would be super frustrating.

This is fixed by making sure that each element in your DOM follows a logical order of how it appears on the page. Basically, the line of code for the first name appears before the line of code for the second name, etc.

If you’re using a responsive site design, this should all cascade like this anyway just because of the design.

#20. Make sure to highlight interactive elements when being used

Notice how there is a blue border around the item I am tabbed onto?

This makes it much easier to understand which element of the page I’m interacting with, and is great for all users, but especially those with vision impairment.

There are a few ways you can set this up.

Adjust the accessibility settings in your theme

Option 1 is to check your theme, go to customize, and see if it has accessibility options that you can turn on.

For example

In the Astra theme on WordPress, you can go to Customize>Appearance>Global>Accessibility:

From there, there is a button to turn this on, and then customize the settings.

In this theme, we can also set colors to help further identify which element of the page is being highlighted when it’s been tabbed onto.

I like to use either a very clear different color, or the same color as what I use for a hyperlink, so that it stands out as the current focused element.

Here you can see that I’ve tabbed through the elements of my page, and am currently highlighting the ‘Learn more about me here” link.

Adjust the accessibility settings in the WP Accessibility plugin

If your theme doesn’t have this option, there is also a setting in the WP Accessibility plugin that you can use, and also customize the color.

I told you this tool was handy right!?

So what are you waiting for? Go make your own content mobile-optimized today!

And there you have it – twenty simple but effective mobile optimization steps that you can implement in the next 1-2 hours, and improve the accessibility of your own website

Not only will it help you get higher scores on the PageSpeed Insights tool and help future-proof you for any further pass/fail optimization criteria., but you’ll also have greatly improved the user experience for all your users on your page.

All that’s left to do now is go back through the post, and follow along as you read through.

Then, check back in for parts 2 and 3 of this series soon! 😀.

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.