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

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.

image03

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.

Want to increase traffic and engagement? Follow these 5 things to make your content mobile friendly.

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.

image05

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:

image07

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:

image00

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.

image04

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.

image06

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.

image01

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.

image02

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.

image08

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.

If you want to break through to real profits online, you need some serious firepower. For a limited time I’m sharing some select tips and tricks Amazon, Microsoft, NBC & Hewlett Packard paid thousands of dollars per hour for, FREE.
  • The step by step guide to monster traffic generation
  • The how-to guide for increasing conversions on your website
  • 7 Cashflow killers your analytics tools are hiding from you
     
 
100% privacy, I will never spam you!

Comments

  1. HAHA.. good catch.!!!

  2. Denis Gonzalez :

    I think one of the best ways to take any wordpress theme to mobile-friendly is jetpack plugin. I was trying to setup a generic theme and nothing was working, failing the google mobile test. Then activated the jetpack magic (mobile theme option) and that did the trick.

  3. Nicholas Godwin :

    Always awesome posts. Thanks for this great piece. I am actually getting to know AMP for the first time!

    Just as always, there are new things to learn from your posts. There is so much good o wonder if I’ll ever have the time to impliment them all… I told a friend that if there’s ever anyone to get a content marketing advice from, then it’s got to be from Neil Patel. Thanks for the golden nuggets

    • Thanks Nicholas, I’m glad this was helpful. If you have any questions or get stuck, please don’t hesitate to ask.

  4. Great info Neil, thank you. My website is not ready yet , the theme is responsive but I have been told that I should better create a mobile site Please can you give me your advice should I create a mobil site for better experience and friendly mobil option ?

    • Gérard Boanoro :

      I am developing websites for quite a while. My humble opinion is that the first thing to do would be to focus on your responsive website. Bringing top-notch user experience can be achieved by having only that website while keeping costs at a lower level. Also, it will receive trafic from both desktop and mobile users instead of dividing the trafic between 2 websites.
      Then, if there is any added value, you can build a mobile app (I presume that is what you wanted to mean by mobile website). You could choose between a hybrid (cheaper, works on multiple devices but does not have access to the entire set of functionalities) or native (one for each device, more expensive, requires specific knowledge but quality at its best). But as I said, you must have a real use-case (bringing you money) before choosing to have a mobile app.
      But let’s also wait for Neil’s opinion ????

    • As long as your blog theme is responsive, you’ll be fine.

  5. Robin Khokhar :

    Hi Neil,
    I have also installed AMP Plugin on my WordPress blog and haven’t seen any change in the traffic. But let’s hope for the best.
    Thanks for the share.

  6. Neil,
    Great post, I liked the AMP info, and the plugin to use to help get it set up. I look forward to hearing more experiences about this as time goes, how AMP is helping local brands “amp” up their local presence.
    While reading this I can’t help to think, how long will “mobile-optimization” be a trend? Not sure if you have messed around with the VR sets, but having mobile phones for the internet and having to have a slimmed down version of data for mobile view will quickly become a thing of the past.
    Was at a mobile phone store the other day, and I was messing around with the headset, man it was wild, expansive, and beautiful at the same time. I give it less than 10 years before we have contact lenses for screens.
    Then we will be reading your future post about “VR Optimization” lol..

    • I don’t think it’s just a “trend” Justin, I think it’ll become even more important throughout the upcoming years.

  7. Pawan solanki :

    Amazing Information Neil.. Thank for the sharing. I am reading this blog regularly…

  8. Hey Neil,

    The box at the end of the post – “Revealed: secrets of SEO other $50……. (can’t read)”

    Ironically, It’s not mobile friendly.

  9. Abhishek Kalra :

    Hi Neil,
    Your post was worth reading. Some of the things that you discussed like AMP plugin for WordPress and also using lead magnet instead of pop-ups were good. Thanks for sharing with us ??

  10. Mobile is the next big thing

  11. Thanks for sharing Neil.

  12. Hey Neil great article like always. Quick question

    I use clickfunnels and am good at building pages through it (I find it quite easy). I want to use it to build my homepage of my site cause I know I can do it easily through them. PRoblem is they don’t have a blog attached to it and I want to start a blog. Is it not worth it however creating a blog that would be separate from the site? I’m a small business online for soccer.

    I will continue using clickfunnels cause they’re so easy for building sales pages either way. But I’m not sure on home page cause it’s hard to build a good looking homepage when you can’t really pay thousands for a designer you know?

    thanks

    • Why don’t you install a blog on find a theme that supports the look you want? Lots of options out there for a couple hundred bucks or less.

  13. Nitin Saini :

    Hi, Nail
    Good article . your post is really helpful and also motivate digital marketer to growth in their field.. Nice Post..!!!!!!

  14. Hello, Nail

    This is one of Great post that you presented shortly.in generally I did found a few post that you write this short way.thanks for this good effort.

  15. Hamza Sheikh :

    Hi Neil,

    I have enabled the AMP for WP from day one. I have been actively taking a part in AMP project. I noticed lots of things since the activation of AMP. At first, Google enrolled my website for AMP and started showing AMP version of content to visitors.

    I was using the official AMP plugin by Automatic. At first, everything worked perfectly and then everything started going south. The official plugin is still not recommended to use on a big website. There are so many things that can’t be covered in generic AMP plugin.

    I got my website tanked for testing purpose with AMP pages full of errors with official AMP project WordPress plugin.

    At this moment, I do not recommend using the AMP. It works fine for few days, and then Google starts its brief crawling of AMP and you end up with thousands and thousands of errors.

    • Ouch, I’m sorry to hear you went through that Hamza. Thanks for sharing your experience… Has traffic started recovering for you yet?

  16. Thanks for sharing this valuable information Neil.

  17. Nice article. I use bootstrap for my custom website and it works pretty well on mobile.

  18. Kathie Laurene :

    Amazing article. thanks for sharing. it work pretty well.

    Thanks for sharing Neil.

  19. Hemang Rindani :

    Agreed that increasing number of mobile users has forced marketers to take care about designing a content in a way that looks good on every device. This needs responsive design and an enterprise web content management services like Sitefinity CMS, WordPress etc can help do it better. Make sure the design does not get distorted while working on a device with different shape and size. Optimizing images is another important factor which also impacts page loading time and affects user experience. Presentation of the content is crucial along with the clear CTAs and good navigation options.
    Thanks for sharing an insightful article.

  20. Hi Neil,
    Nice blog i totally agree with you. Thanks for sharing.

  21. Pinakin Darji :

    Hi, Nail

    Great article..your post is really helpful and also motivate SEO & Internet marketer to growth in their field..

    • That’s fantastic to hear Pinakin, I’m glad this motivates you into action. Keep me posted on your progress and let me know if there’s any questions I can help you with.

  22. Thanks for sharing those additional points Hemang. Yes, images especially should be connected to a CDN in efforts to accelerate the loading time.

  23. Jandee Smith :

    Great info Neil, thank you.I liked the AMP info. I think “mobile-optimization” will become even more important throughout the upcoming years.

    • Yah, I think we’ll see an incredible boost in interest very soon. The smartphone is changing our world right before our noses

  24. Thomas McCallum :

    Mobile optimized sites are a must. Great info. Thanks Neil!

  25. Transport George :

    Thanks Neil for sharing this information. This is really helpful since having a mobile friendly website is almost a requirement for blogs and online businesses these days.

  26. Roberta & Ricardo :

    Hi Neil, thank you sooo much for making always great posts .. I’m so glad I found your website as I’m pretty new to blogging … I’m still struggling with mobile friendly, hope your advice will help 🙂

  27. Hi Neil. What can you recommend when creating tables (columns and rows) on a page? Would it be better to use an image or through htmo tables?

  28. Hi Neil. Thanks for this great post this is very helpful and informative…. I got everything about mobile friendly site.. I am already using a responsive theme but some changes are required, so I will do that..

    Thanks again… 🙂

  29. Hello Neil,

    The requirement of a blog to be mobile friendly is certainly very important, and this I felt long before I started my career with blogging. I was short with the solutions of this issue. And your precisely comprehensive blog has made my day. Every single detail is going to be convenient for my work I hope. Dozens of thanks. 🙂

    • Excellent, I’m glad this was helpful. Mobile should be considered a key component of your strategy, that’s the where the puck is going.

  30. Prathamesh Deshmukh :

    Quite a detailed post, Neil. Mobile views are as important as web views and you have just shown how to make the most out of it.

    This post covers almost all the difficulties I had while reading the article and that tell me how you really write for the readers.

    Kudos to you.

    • Great, I’m glad this was helpful Prathamesh. Keep me posted on your progress and let me know if there’s anything else I can help you with.

  31. Varun Swami :

    Should i implement AMP Code for eCommerce website woodenstreet.com and what are the guidelines for AMP in eCommerce websites?

  32. The post is useful for me. Thanks so much

  33. Hanuman Chalisa :

    Thanks for sharing useful ideas. The benefits of responsive web design are clear. Today, most people use mobile devices to surf web. If your web design is responsive, that is an advantage and great experience.

    • I think it’s virtually everyone today and it’s continuing to grow at a rapid rate. Get on it if your not

  34. Thanks for this awesome guide.

  35. Nice One!

  36. A mobile users nowadays just so many, and thanks for this great post but I think any kind of sites should be good.

  37. Gayatri Mantra :

    Indeed helpful tips for making content mobile friendly.

  38. vishnu sahasranamam :

    Short and very helpful! Thanks for taking time to put this together…very much appreciated.

  39. Thanks for sharing your thoughts on this Neil,

    I think it’s really important to make your content mobile-friendly, especially with the rolling updates from Google and it always helps you reduce your bounce rate, which is an added bonus.

  40. Most of us including me write for desktops and forget about mobile and other handheld devices. We never though about how our content will look on them. This impact our conversion badly.

    Really informative article and useful tips Neil.

    • Now is the time to start paying attention that as 50% or more of traffic for most people is on mobile/tablets

  41. Hello, Nail
    true article . your put up is virtually helpful and also inspire digital marketer to increase of their field.. fine put up..!!!!!!

  42. hi Neil Patel

    You post a great content on Mobile-Friendly for Increased Traffic and Engagement. it is very useful for me and other people,

  43. Nice information,thanks for sharing.I think “mobile-optimization” will become even more important throughout the upcoming years.

  44. Great information.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. 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.

    • From what I’ve noticed, most traffic is mobile, sometimes 60-70% and growing. Sometimes all it takes are simple adjustments and that can lead you bigger and better results.

  45. Thanks for tips… will follow to make my website faster and more user friendly

  46. Hey Neil,

    I found your article very useful for my work. I appreciate your writing. This is very clearly explained.

    Thanks

  47. Very useful post.. i hope surely it will make difference in my website

  48. Sue J. Maselli :

    Thanks for sharing this helpful post Neil

  49. sega circolare :

    Hello colleagues, nice post and pleasant arguments
    commented here, I am in fact enjoying by these.

  50. Great post,It is very useful and informative..Thank you for sharing!!

  51. Awesome information,thanks for sharing.I think “mobile-optimization” will become much more important throughout the upcoming years.

    REPLY

  52. Hi Neil ,
    Your post was worth reading for me. Some of the things that you discussed like AMP plugin for WordPress and also using lead magnet instead of pop-ups were good. Thanks for sharing this good post with us. You are truly a guiding light.

  53. I have enabled the AMP for WP from day one. I have been actively taking a part in AMP project. I noticed lots of things since the activation of AMP. At first, Google enrolled my website for AMP and started showing AMP version of content to visitors.

  54. Thanks for tips… will follow to make my website faster and more user friendly

  55. Great info Neil, thank you. My website is not ready yet , the theme is responsive but I have been told that I should better create a mobile site Please can you give me your advice should I create a mobile site for better experience and friendly mobile option? Waiting for your kind reply.

    • Mobile traffic is the most common traffic a website gets IMO. So I would recommend making sure you look after the visitors via that channel.

  56. AndroDumpper App :

    Yes I’m showing more interest to design content responsively on high-end mobiles to Desktop users. This was really helpful to me.

  57. Thanks Neil for this informative post. Even i believe that having a mobile friendly content is very effective way to get more traffic and interaction.

  58. Indeed helpful tips for making content mobile friendly.but can you write a pos on how we can integrate schema.org into our themes mainly focusing on the main elements this would be very helpful and google news websites are mostly need this schema.org for rankings

  59. I love your site, it has always been most most informative blog on blogging.
    Great!

  60. I am doing seo from one year but i am not getting traffic to my site why and tell me how to improve traffic.

  61. The information from this post is very helpful for me and good work. Thank you for the information.
    ntruhs results

  62. The information from this post is very helpful for me and good work. Thank you for the information.
    ntruhs results

  63. i learned a lot of new things from your post not even this all are informatic.it seems like icing on the cake as a post adds up!!! Increase Kik Points Without Rooting

  64. Hey Neil ,
    First of all thank you very much for posting on this topic and yes the website should be responsive for a user friendly experience and for making a good impression on the users as well .Thanks for sharing the tips and your tips are always helpful and very informative .
    Thanks and regards,
    how to backup apps

  65. Tips and Tricks of Lucky Patcher Apk :

    nowadays most of the people make their own websites but they fail in ranking them higher.this post might be useful for those who wants to earn more traffic for their website.Great post.keep it up.
    Tips and Tricks of Lucky Patcher Apk

  66. Mobile friendly websites are one of the most powerful tool to get more new traffic because so many people are Internet on their Mobiles only. Thanks for sharing. Xmod

  67. Hey Neil, Thanks for sharing this. Building a website is really a tough task. You should always build user-friendly websites if you want to increase traffic on your website. Thanks for sharing Xmod

  68. I really like your website and specially this post and that’s the reason I am commenting here. It inspired me a lot and I am bookmarking your website for future read. Thanks a lot for this great post.

    Check my post on Moviebox app :

Speak Your Mind

*