make-wordpress-site-mobile-friendly-large

How to make your WordPress site mobile friendly

Morgan Smith's Layout avatar

It’s no secret that mobile-friendly WordPress sites are the new norm, but despite how common they may seem, it can still take a little work to create a beautiful, responsive site. This guide will help you understand why it’s important to have a mobile-friendly site, how to build one on WordPress, and introduce you to the best tools to create a responsive site.

To make your WordPress site mobile-friendly, you need to:

  1. Understand why responsive web design is important
  2. Take the Google Mobile-Friendly Test
  3. Use a responsive WordPress theme (or create your own)
  4. Consider mobile-friendly WordPress plugins
  5. Use mobile-friendly opt-ins
  6. Think in terms of responsive media

Ready? Let’s dive in!


1. Why are mobile-friendly sites important?

In 2016, 52.7 percent of internet users accessed it via mobile devices. That means that over half the population is turning to phones and tablets over traditional desktop devices, so in order to keep up with them, your website needs to be ready to display on any screen size. A mobile-friendly design makes for a positive user experience and will help your users find what they’re looking for while on the go.

make-wordpress-site-mobile-friendly-on-the-go

Besides UX, there’s another important reason your site should be mobile-friendly: Google. Starting in 2015 (the year of “Mobilegeddon”), Google implemented a major overhaul of its search algorithm to reward sites that are deemed “mobile-friendly.” The change came down to one crucial data point: whether or not your website is responsive.

This means that if your site reads well on mobile devices, it’s going to perform better in search results than sites that don’t. That’s a pretty sweet perk if you’ve done the work to create a mobile-friendly site! But it can also hurt your site’s traffic if it’s not quite up to the task of displaying on smaller devices.

Luckily, if your WordPress site isn’t mobile-friendly yet, there are plenty of tools to help you get up to speed and build a fully-functioning, responsive site. The first step? Benchmark your current design.


2. Take the mobile-friendly test

Your website may look great on one mobile device (like your own personal cell phone), but you really need to test it on a wide range of screen sizes to know if it’s truly responsive. Even if you happen to have a whole bunch of old phones lying around, that can be a time-consuming process to test it on every screen.

To simplify things, Google has gifted us all with a free mobile-friendly testing tool that will tell you whether your site qualifies as “mobile-friendly” or not. Just enter your site’s URL for a quick assessment of your site’s mobile design. If your website is fully optimized for mobile devices, you’ll get an enthusiastic little success message that looks like this:

make-wordpress-site-mobile-friendly-test

If you’re seeing red, you’ve got a little bit of work to do. (We’ll get to that in a second!)

Pretty neat little tool, right? Well, it gets even better.

For all of you developers out there, Google also released a Mobile-Friendly Test API that allows you to test URLs with automated tools. The benefit of this is that you can quickly test more pages, but you can also monitor the most important pages on your site without having to manually turn to the browser tool all the time. Score!

make-wordpress-site-mobile-friendly-dashboard

Once you’ve used Google’s mobile-friendly tool to benchmark your site, it’s time to start making improvements. Let’s start with your WordPress theme.


3. Use (or create) a responsive WordPress theme

If you’ve recently installed a new WordPress theme, there’s a decent chance you’re okay in this department. If your theme has been around for awhile though, it might be time for a little update.

First things first: Double-check your WordPress version and current theme version. If there are pending updates, start with those. I can’t speak for every theme out there, but some updates will contain mobile-friendly elements and may be enough to fix your problems. WordPress 4.4, for example, added some really neat functionality for responsive images (you can read all about that here).

If updates don’t do the trick, it’s probably time to look for a new theme or consider creating your own. Let’s explore both options.

The best mobile-friendly WordPress themes

Realistically, a lot of WordPress themes these days are responsive – it’s probably more rare for a theme to not be mobile-friendly. That being said, before purchasing a theme, double check that it displays well on any screen size. Test out the demo site, scale your browser window, and read any reviews you can find to look for experience from real users.

If you’re happy with what you see, go for it! But if something doesn’t look right, steer clear. Even if you thought it was the perfect match, there are so many WordPress themes to choose from that I guarantee you’ll find another that’ll work for your site.

If you’re looking at free themes, be sure to see what it looks like with your own content in place – as I’m sure you know, things don’t always look quite the same, so make sure it displays your content the way you’d want on mobile.

How to create your own responsive WordPress theme

If you’d rather go the DIY route to create a mobile-friendly site, be sure to start from scratch or with a child theme – you should never make drastic changes like that on your live site.

I’d recommend using Local by Flywheel to spin up a local WordPress site right on your machine. This free tool will allow you to experiment to your heart’s content while never breaking your current site (which is essential when going through a redesign).

The best part about developing with Local by Flywheel? You can use the Live Links feature to generate a shareable URL to the local site. This allows you to send it off to a client or pull it up on your phone, so you can easily test how the site looks on a mobile device.

If you create a child theme based on a responsive parent theme, you’re going to be in pretty good shape. If you’re starting from a totally blank slate and creating your own theme, just be sure to use media queries to establish boundaries for the design, and think elements through one at a time. 

Ask yourself how images should scale, what the navigation should look like, and if any of the content will hide on a mobile device. Here are a few tutorials that can help you out:


4. Use responsive plugins

Plugins add functionality to your WordPress site, so they don’t always add anything to the front-end. But in the event that they do add a physical element to your site (like a widget or CTA button) make sure it scales well on all screen sizes, or at least gives you the option to disable it on smaller screen sizes.

A sidebar widget is a wonderful addition to a desktop site, but if it dominates the mobile design or doesn’t scale down, it’s not going to make for a very great user experience.

make-wordpress-site-mobile-friendly-phone

Like themes, just pay attention to the features of a plugin, and try to read reviews or find a demo before purchasing it.

As long as you’ve got a responsive theme and plugins that behave well on mobile, your site is going to be in really good shape for displaying on smaller screens. There’s one last thing you should think about, however, to really make sure you’re following best practices.


5. Avoid adding pop-ups on mobile devices

If you’re trying to build an email list with your WordPress site, I’m guessing you have a variety of opt-ins on your site. Most email opt-in forms work just fine on mobile devices (assuming they scale and are easy to use).

Pop-ups, however, are a different beast. Google has started penalizing sites with intrusive interstitials, aka opt-ins that cover the content of a site. This includes pop-ups (whether they display immediately or after a user has been on the site for some time) and any other type of opt-in that a user must dismiss before accessing the content on the page. You can read all about Google’s stance on the matter here.

To keep your WordPress site mobile friendly and following best practices, avoid pop-ups on your mobile design. How you go about that will depend on the service powering your opt-ins, but most providers should have an option to disable intrusive pop-ups on mobile devices.


6. Strategize for responsive media

Whether you’re working with a portfolio site, a daily blog, or an eCommerce site, the last piece of the responsive puzzle is to consider the media on your site. That large background image on your homepage might look great on a desktop machine, but if it doesn’t scale correctly, it could lose all context and lead to a difficult viewing experience. So rule number one to responsive media? Think about how things scale.

If scaling isn’t actually the best solution for your site, you could also consider hiding certain elements when your site is loaded on a mobile device. This would help simplify the experience and get users to the most important content faster.

Note: Understanding CSS breakpoints is key here. Check out this tutorial to get started!

Finally, you also need to keep in mind the file size of the media you’re including on your site. Not only will this improve the mobile experience, but the desktop load time, too! Media files are often some of the largest on a website, which makes them the cause of loading bars and long wait time. To help streamline your site and boost mobile performance, try to use the smallest file size you can while still maintaining the quality you need. (For example, maybe your mobile site loads a smaller version of an image than the desktop!) Image optimization can also help quite a bit in the realm.

Now that your site is mobile-friendly, it’s time to optimize its performance. Take the next step with this free guide!

Free guide: How to improve WordPress speed and performance

This free guide has eight straightforward steps you can use to increase your WordPress site’s performance and speed today. It covers every best WordPress performance practice from optimizing web assets like images, JavaScript, and CSS, to performing a comprehensive plugin audit.


As more and more people use their smartphones or tablets to access the internet, site designers have to adjust to address those usage patterns. So, is your site ready for your mobile visitors? What aspects of your site have you had to change? What tools did you use to create a responsive design? Share your experience in the comments!

For more mobile tips, check out these articles:


This article was originally published on 22-17-2017. It was last updated 9-11-2018. 

Comments ( 46 )

  1. Sushma Gurram

    February 19, 2017

    Sometimes, even though the test runs and displays it is mobile friendly, it is actually not. So, I can't rely on the google test all the time.

  2. Narinder kumar

    April 4, 2017

    Thanks for sharing great article about WordPress mobile friendly its really helpful for my blog

  3. Valentine

    April 21, 2017

    Thanks for the information but I have to optimize my own theme in such a way that it will be mobile friendly but still yet I don't get the full percent.
    Must someone use those mobile friendly themes that is not even nice when looking at it.

  4. John

    April 24, 2017

    Thanks for the post Ryan. However, I would like to know how to go about creating a mobile website. Do I need to create another theme (mobile)? How do I go about this process?

  5. karan singh

    June 13, 2017

    Thanx For Such an useful article for all bloggers.

  6. Michal Jurczuk

    June 27, 2017

    Hello, if you want to get more users and earn more profit from your WordPress website, you should create mobile apps. Now we can help you to create fully native Android and iOS apps, even for free, check https://blogtomobile.com

  7. haris

    August 15, 2017

    nice article thanks

  8. John Paul

    August 28, 2017

    is that possible if build mobile version without plugin or responsive themes?
    cause i search, that was possible if we use htaccess but i found so many script code make me confused

  9. Emenike Emmanuel

    October 21, 2017

    Thanks for sharing. But my own case is rather a different and difficult one.

    My blog is not displaying properly on mobile. It's showing half screen. I have tried everything to resolve it but it's not working.

    • Emenike Emmanuel

      January 7, 2019

      Thanks.

      My blog was displaying half-screen before but I have been able to correct it. It is okay now.

      Thanks for this useful and evergreen content.

      Emenike

  10. evden eve nakliyat

    November 24, 2017

    Very nice and helpfull post, thanks for sharing.

  11. Kelly Avila

    November 26, 2017

    nice and useful article. Your article will be helpful for me.Thanks for sharing it with us.

  12. David Cross

    November 28, 2017

    If you are a webmaster, you have probably heard, that Google has started mobile indexing. This means, that if your website is not mobile friendly, you can expect for a drop in rankings.
    This article is great for showing you how to quickly and easily transform your WordPress site into mobile friendly website. Thanks!

  13. Soumya Roy

    December 11, 2017

    Informative post. Any site we have on any platform or CMS, we have to make it not only mobile friendly but also mobile usable and fast loading.
    Check GSC for mobile usability errors and speed test tool to check the speed and mobile speed suggestions.

  14. allegation corner

    December 26, 2017

    Best tutorial article.i have read all things written and learn a lots of things .

  15. Sam

    January 31, 2018

    You truly nailed it. Mobile visitor are going to increase day by day and most of visitors want quick and responsive website. Thanks for guiding in such a proper way.

  16. Charles

    February 7, 2018

    Thanks a lot for the great tips. Just found out that my theme was too heavy, it was totally slowing up my site. I have to try out the Thesis framework. A lot of my friends recommended it to me in the past too. Thanks again!

    Regards,
    Charles

  17. Asha

    February 20, 2018

    It is true that mobile devices are used more than traditional computers for web browsing so people has to make mobile theme responsive.Very helpful Information. Thanks for sharing.

  18. William

    February 20, 2018

    Hey
    Thanks Alot.
    You nailed it. mobile visitor increasing day by day. Visitor wants quick response. Thanks for guiding in such a proper way.

  19. Les

    February 21, 2018

    This is such great advice!! Thank you!

  20. Vijay Chavda

    March 2, 2018

    Thanks for sharing. I want to know about some mobile friendly plugin.

  21. Justme

    March 3, 2018

    The only thing Google is looking for in the test is one meta tag:

    Obviously it is necessary, but it's no guarantee that the site renders well on a mobile device.

  22. korirm

    March 11, 2018

    Very useful insights I ever needed. Thanks for sharing the information that seems to be useful in making a mobile friendly site. I personally benefit from your tips.

  23. Texas Inshore Fishing

    April 30, 2018

    I’m trying my hardest to create a mobile friendly blog but I’m still stuck on creating a new one or just editing the template I have now. If somebody creates a new blog for me do they have to constantly update it every time WordPress updates their templates?

  24. Wish

    May 2, 2018

    Very useful insights I ever needed. Thanks for sharing the information :)

  25. sevgililer günü

    May 17, 2018

    Very nice and helpfull post, thanks for sharing.

  26. Vikash mishra

    June 22, 2018

    very usefull post:) thanks for sharing

  27. roy smith

    June 28, 2018

    Great Thank You I like this Blog about to define well seo friendly website

  28. Kevin

    June 28, 2018

    WOW AMAZING BLOG LIKE IT

  29. ChatRoom PK

    July 11, 2018

    I have recently created my website, I want to make it mobile friendly because I am using an old WordPress theme and it's not mobile optimized. I am going to try your techniques to make it mobile friendly. Thanks for sharing it.

  30. Pallav

    July 20, 2018

    Hi,

    My website is on Wordpress, but it's not user-friendly, and I cant change its theme. So, is there any plugin which can ease my work for creating hole website again. Or any more techniques to optimise it. I have already optimised images.

  31. Britt Pollock

    July 23, 2018

    There are tons of great questions here! Be sure to check out the article on testing for mobile usability problems, too.

    https://getflywheel.com/layout/test-wordpress-site-mobile-usability-problems/

  32. extratorrent proxy

    August 1, 2018

    Very helpful post thanks for sharing keep it up..

  33. NITIN MISHRA

    August 4, 2018

    thanx for sharing for this its really helpful for my website

  34. Wish Promo

    August 10, 2018

    AMP website is most important for Google Ranking. I Feel AMP web pages are future. Because these Pages are very much good in speed.

  35. yangin merdiveni

    August 19, 2018

    Thank you for this article.

  36. prekast nedir

    August 24, 2018

    Great post. Thank you admin.

  37. Nikki

    September 14, 2018

    Awesome post!

  38. emma

    September 26, 2018

    Amazing Post.
    Thanks

  39. Junaid Ahmed

    October 16, 2018

    Mobile websites are a must for all business, it is an important factor that all developers and testers should also check the responsiveness of their web pages in various devices. Use https://www.lambdatest.com/ to perform cross browser testing for free.

  40. Belta

    November 15, 2018

    Thank you for educative post. My site is loading slowly but your tips I hope will be helpful in making it load perfectly on phones.

  41. AlSEOPerth

    January 1, 2019

    Nowadays, web designing is in-demand. Anyone with knowledge of web designing can create a design for a website. But, having knowledge alone is not enough to create a good and responsive web design. It is important to know the basics of good web design. Thank you for sharing this information!

  42. Athar Bhat

    January 19, 2019

    Hi Morgan,

    The article and the information are really nice and helpful. I was wondering if there is any plugin on WordPress that we can use which can auto optimize our site for mobile devices?

    Cheers
    Athar Bhatt

  43. abhi singh

    January 27, 2019

    wordpress is the great place to start you blog thnks for the information

  44. Alex

    February 2, 2019

    Most of the Wordpress themes are already responsive in 2019. Even if someone's site is not responsive, changing the theme is the bet.

    Plugins can also make a site responsive, but I personally prefers to change the theme.

  45. indtens

    February 5, 2019

    great article!

    but I am still having trouble managing the mobile version

  46. nowseo

    February 11, 2019

    Most of the WordPress themes are already responsive, but it still got mobile not friendly error.

Join the discussion