I think it’s safe to say that smartphones aren’t a fad.

Jokes aside, mobile Internet usage has been going up year after year.

In fact, the number of mobile users has now exceeded the number of desktop users.

All that means is that if you’re not optimizing your content and your website as a whole, you’re likely not making the most of your traffic.

Additionally, it may be preventing you from getting more traffic.

In 2015, Google announced that it created a mobile-friendly algorithm, which the industry dubbed “mobilegeddon.” 

It didn’t have a huge effect, but some sites that were not mobile-friendly took a significant traffic hit.

Keep in mind that Google usually tests the waters before scaling things up.

Google has made it clear that it wants to serve mobile users mobile-friendly web pages, and it will likely become more and more important over time.

I hope I’ve convinced you that optimizing your website and content for mobile is worth the effort even though it might seem like another chore to do.

Not only will it help you get more SEO traffic in both the short and long term, but it will also help you with your conversion rates because a smaller percentage of your traffic will bounce.

In this post, I’m going to show you the five main ways you can optimize content for mobile. I encourage you to put as many of them into effect as possible.

A quick definition of mobile-friendly

I don’t want to jump ahead too far.

If you’re already familiar with what mobile-friendly means, feel free to skip ahead to the next section.

Otherwise, it’s really not that complicated.

As the name implies, mobile-friendly content just means that content appears well not just on desktop computers but also on smaller mobile devices.

That means that the text is easily readable, links and navigation are easily clickable, and it’s easy to consume the content in general.

Let’s begin with a test: It’s important to know where you stand. If your content is already mobile-friendly, you won’t need to do all the things in this post.

There are two main ways that you can test your site for mobile-friendliness.

The first is with Google’s own mobile-friendly test tool, which is something that everyone should use.

Another option is to use a site like this mobile phone emulator, which lets you see what your site looks like on a variety of different phones. It won’t give you a grade like Google’s tool will, but you’ll be able to see if anything shows up weird.

A quick note on responsive design

You’ve probably heard about “responsive” design.

It’s typically used as a synonym for mobile-friendly design although that’s technically not true.

There are a few different strategies to create mobile-friendly websites, and using responsive design is just one of them.

It means that as the screen’s size changes, the content adjusts to match that size:

That being said, responsive design is a clear winner in most situations.

Because of that, some of the tactics I’m about to show you are based on the assumption that you will implement responsive design as opposed to one of the other methods for creating mobile-friendly pages.

1. Widths should be in terms of percentages

All HTML elements (e.g., “divs”) have some sort of width assigned to them.

If you right-click any element on a web page and then choose “inspect element” (in Chrome), you’ll see a panel come up.

If you click on an element in the left window of the panel, the corresponding CSS (style properties) values will be displayed in the right window.

You will typically see a value for “width” specified, like this example shows:

This value can be set in terms of pixels (essentially tiny blocks on the screen) or a percentage.

When you assign 50% as a value, that tells the browser to make that element 50% of the width of the screen (or of the section that it’s contained in).

This is a good thing because if the screen is smaller, that section still shrinks to fit half the screen, which keeps things looking how they should.

If you instead specify widths by pixels, the widths of those elements do not change as the screen size changes.

If the width of a section in pixels is bigger than the screen size (common for phones), the user will have to scroll horizontally, which is a pain on mobile devices.

What you should do about widths: If you bought a good theme or hired competent developers, you don’t have to worry about this too much.

However, if you ever design your own landing pages or modify your theme, keep in mind to specify widths as percentages.

If you’ve used pixels in the past, track those down and fix them now.

This is a simple change that will make a big difference.

There is one exception, though. You can specify pixel widths if you know how to use media queries effectively.

What are media queries? Read on…

2. Use media queries to make your site responsive

The real key to using responsive design is to use media queries.

Again, if your site is already responsive, you don’t have to worry about this unless you start creating your own custom pages.

But if the situation comes up, you’d better know how to handle it.

Have you ever wondered how some pages not only resize as the screen size changes but also reshape?

Certain sections might get wider or thinner than before, and other elements may move altogether (navbars and sidebars).

The answer is that the site uses media queries to truly make the site responsive.

Here’s what a basic media query looks like (you can find them in the CSS of some pages):

@media screen and (max-width: 1020px) {

#container, #header, #content, #footer {

float: none;

width: auto;

}

p{ font-size: 2em; }

}

There’s a lot to see here, so let’s break it down into simple chunks.

Right at the start of the line, the media query is labeled with the “@media” tag.

The “screen” part is standard to include and means that the media query will be applied based on screen size.

The most important part is the stuff in the brackets.

You can specify both “min-width” and “max-width.”

In this case, the max-width is 1020px.

This means that when the screen is up to 1020 pixels wide, all the CSS code inside this media query should apply.

The code inside will be given priority over other codes for the specified elements.

Going back to the code, you can see a bunch of normal CSS code inside the outside curly brackets for the overall media query.

You can see that when the screen is under 1020px wide, any elements with an id of “container,” “header,” “content,” or “footer,” will now have “auto” width and a float value of “none.”

Similarly, all text in paragraph tags (p), will have a font size of 2.0 em.

Applying this is simple.

Load your webpage, and then drag a corner to make the screen smaller.

If you notice that certain parts become hard to read at a certain point, create a media query. Change it so that your content elements become larger or smaller, whatever is needed to make the content more mobile-friendly.

Note that you can apply multiple media queries to a page. Just specify a maximum and minimum width, and make sure they don’t overlap.

3. Pop-ups are dangerous

I’ve certainly experimented with using pop-ups to collect email addresses on my sites, and you should try them on yours as well.

However, you have to be very careful.

Many cheap pop-up tools and plugins look fine on desktop screens but completely ruin the user experience on mobile devices.

They’re often difficult to close, and sometimes you can’t even close them.

Not surprisingly, they cause visitors to instantly close the window.

There are three main solutions to a pop-up problem on mobile devices:

Solution #1 – Get rid of them: The first is to disable pop-ups for your mobile visitors.

This is a good solution, but not all pop-up tools allow you to do this easily.

Solution #2 – Simplify them: Another solution is to make your forms as simple as possible to fill out (minimize the number of fields) and make them easy to close.

This is probably the worst solution, but it’s still better than sticking with whatever default pop-up you’re currently serving.

Solution #3 – Only use pop-ups when a visitor clicks: This is another great option.

If you’ve heard about content upgrades, you may have already seen it in action.

The idea here is that you don’t use pop-ups that come up after a visitor spends a certain amount of time on your pages.

Instead, you offer them some sort of lead magnet and tell them to click a link to get it. Then, the pop-up will come up and ask for their information.

People are much more receptive to pop-ups in this situation because they’re the ones who asked for it.

Just to wrap up this topic, if your current pop-up tool can’t handle these modifications, it’s time to upgrade to one that can.

4. Strip down the distractions

One of the worst experiences for a mobile user is to load a page and then be swamped by several elements competing for their attention.

Sometimes, they don’t even load at the same time, so the page keeps shifting around as it loads, which is extremely frustrating.

Some of that comes down to coding, but most of it comes from having too many distractions on the page.

The typical sidebar is useless on mobile.

It gets pushed down to the very bottom of the page and barely ever gets used.

So, unless you can create a fancy sidebar like Google did, it’s probably better to remove it altogether for mobile users.

This goes for other elements as well, e.g., your navigation menus.

How do you remove them?

Simple: use media queries.

On the main “div” for the sidebar, as an example, give it a CSS value of “display:none;” when the screen size is small. Then it won’t show up.

Copywriters shine on mobile: As a final note here, remember that it’s even more difficult to read long content on mobile devices.

Keep your content as concise as possible.

It’s better writing, and mobile users prefer it anyways.

5. Get ahead of the curve with Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) are still HTML pages, but they follow a specific format.

Google has teamed up with a bunch of huge brands to create and support them.

These pages get priority in the search results of mobile users for certain relevant queries.

The whole point of them is that they load really fast for mobile users, which is why Google is encouraging content creators to make them.

If you’re interested in seeing a demo, use your mobile device, and search for something on g.co/ampdemo.

Should you create AMP? I can’t give you a definitive answer. On the one hand, they may help get you some extra traffic, but I haven’t experimented with them enough to conclude anything.

And while Google supports them, that doesn’t mean that they will become widely adopted. Google could end up shutting the project down sometime in the future.

The one downside is that you need to maintain two versions of your content. The good news is that it’s easy with WordPress because there’s actually a plugin for that—all you need to do is enable it.

Finally, if you’re interested in creating AMP on your own non-WordPress site, here’s the official tutorial. I’d create my own, but Google’s will always be better.

If you have the extra time and resources, I’d encourage you to test out AMP, but most businesses will be better off to wait a bit and see if they get adopted more widely first.

Conclusion

If you’re not optimizing your content for mobile users, you’re behind the curve and missing out on traffic (and wasting some of your current traffic).

That’s why I gave you these five ways to optimize your content for mobile.

By now, you should know which of them apply to your website and how to start implementing them.

Try to put them into effect as soon as possible, and measure whether there are any changes in mobile traffic or engagement.

If you have any questions or results to share, I’d be happy to hear them in a comment below.

Source: quicksprout

5 Ways to Make Your Content Mobile-Friendly for Increased Traffic and Engagement