Ready? Let’s dive in!<\/p>\n\n\n\n
1. Why are mobile-friendly sites important?<\/h2>\n\n\n\n
In Q4 2019, 61% of Google searches took place on a mobile device<\/a>. 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\u2019re looking for while on the go.<\/p>\n\n\n\n Besides UX, there\u2019s another important reason your site should be mobile-friendly: Google. Starting in 2015, Google implemented a major overhaul of its search algorithm to reward sites that are deemed \u201cmobile friendly.\u201d The change came down to one crucial data point: whether or not your website is responsive.<\/p>\n\n\n\n This means that if your site reads well on mobile devices, it\u2019s going to perform better in search results than sites that don\u2019t. That\u2019s a pretty sweet perk if you\u2019ve done the work to create a mobile-friendly site! But it can also hurt your site\u2019s traffic if it\u2019s not quite up to the task of displaying on smaller screens.<\/p>\n\n\n\n Luckily, if your WordPress site isn\u2019t 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.<\/p>\n\n\n\n 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\u2019s 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.<\/p>\n\n\n\n To simplify things, Google has gifted us all with a free mobile-friendly testing tool<\/a> that will tell you whether your site qualifies as \u201cmobile friendly\u201d or not. Just enter your site\u2019s URL for a quick assessment of your site\u2019s mobile design. If your website is fully optimized for mobile devices, you\u2019ll get an enthusiastic little success message that looks like this:<\/p>\n\n\n\n If you\u2019re seeing red, you\u2019ve got a little bit of work to do. (We’ll get to that in a second!)<\/p>\n\n\n\n Google also released a Mobile-Friendly Test API<\/a> 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!<\/p>\n\n\n\n Once you\u2019ve used Google\u2019s mobile-friendly tool to benchmark your site, it\u2019s time to start making improvements. Let\u2019s start with your WordPress theme.<\/p>\n\n\n\n If you\u2019ve recently installed a new WordPress theme, there\u2019s a decent chance you\u2019re okay in this department. If your theme has been around for a while though, it might be time for a little update.<\/p>\n\n\n\n First things first: Double-check your WordPress version and current theme version. If there are pending updates, start with those. I can\u2019t speak for every theme out there, but some updates will contain mobile-friendly elements and may be enough to fix your problems. <\/p>\n\n\n\n If updates don\u2019t do the trick, it\u2019s probably time to look for a new theme or consider creating your own. Let\u2019s explore both options.<\/p>\n\n\n\n Realistically, a lot of WordPress themes<\/a> these days are responsive\u2014it\u2019s probably rarer 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.<\/p>\n\n\n\n If you\u2019re happy with what you see, go for it! But if something doesn\u2019t look right, steer clear. Even if you thought it was the perfect match, there are so many WordPress themes to choose from that you should have no problem finding a better, truly mobile-friendly option for your site.<\/p>\n\n\n\n If you\u2019re looking at free themes, be sure to see what it looks like with your own content in place\u2014as you surely know, things don\u2019t always look quite the same, so make sure it displays your content the way you\u2019d want on mobile.<\/p>\n\n\n\n Not sure where to start? When you host your WordPress site on WP Engine, you’ll get access to StudioPress themes<\/a> (including the Genesis Framework!) free with your plan. These themes are fully responsive so they’ll look great on any device. Plus you can easily swap between them (instead of feeling stuck with the \u201cthe one\u201d premium theme you decided to purchase). <\/p>\n\n\n\n If you\u2019d rather go the DIY route to create a mobile-friendly site, be sure to start from scratch or in a test environment\u2014you should never make drastic changes like that on your live site.<\/p>\n\n\n\n We\u2019d recommend using Local<\/a> to spin up a local WordPress site right on your machine. This free app will allow you to experiment to your heart\u2019s content while never breaking your current site (which is essential<\/em> when going through a redesign). You can even import your existing site into Local<\/a>, so you only need to start from scratch if you want to. <\/p>\n\n\n\n There’s also a feature called Live Links, which generates 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.<\/p>\n\n\n\n If you create a child theme based on a responsive parent theme, you\u2019re going to be in pretty good shape. If you\u2019re 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. <\/p>\n\n\n\n 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:<\/p>\n\n\n\n Plugins add functionality to your WordPress site, so they don\u2019t always add anything visually 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.<\/p>\n\n\n\n For example, a sidebar widget is a wonderful addition to a desktop site, but if it dominates the mobile design or doesn\u2019t scale down, it\u2019s not going to make for a very great user experience.<\/p>\n\n\n\n Like themes, just pay attention to the features of a plugin, and try to read reviews or find a demo before purchasing one. And whenever you activate a new plugin, remember to do a quick quality check of your site to ensure it’s scaling correctly across screen sizes. <\/p>\n\n\n\n As long as you\u2019ve 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. <\/p>\n\n\n\n If you\u2019re trying to build an email list with your WordPress site, you likely have a few opt-ins on your site. Most email opt-in forms work just fine on mobile devices (assuming they scale and are easy to use).<\/p>\n\n\n\n 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\u2019s stance on the matter here<\/a>.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Whether you’re working with a portfolio site, a daily blog, or an eCommerce<\/a> site, an important 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 on a phone. So rule number one to responsive media? Think about how things scale.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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! <\/p>\n\n\n\n Media files are often some of the largest on a website, which often makes them the culprit behind long wait times. To help streamline your site and boost mobile performance, try to optimize your images<\/a> by using 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!) <\/p>\n\n\n\n Page speed has been important for a long time in terms of how your site is ranked in Google desktop searches, but as of July 2018, that’s now also the case for mobile rankings<\/a>. Pair that with the stat from above that more than 60% of internet searches are using mobile devices, and your site’s performance (on every device) is more important than ever. <\/p>\n\n\n\n Images are a big part of the performance equation, but your code and WordPress host play a big role as well. <\/p>\n\n\n\n2. How to test WordPress for mobile friendliness<\/h2>\n\n\n\n
3. Why use (or create) a responsive WordPress theme<\/h2>\n\n\n\n
The best mobile-friendly WordPress themes<\/h3>\n\n\n\n
![\"StudioPress](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2020\/03\/Studio-Press-Email-Header-1200x628-1-784x410.jpg\")
<\/figure>\n\n\n\nHow to create your own responsive WordPress theme<\/h3>\n\n\n\n
\n
4. Why use responsive plugins<\/h2>\n\n\n\n
5. Avoiding pop-ups for mobile devices<\/h2>\n\n\n\n
6. Strategizing for responsive media<\/h2>\n\n\n\n
7. Prioritizing site performance<\/h2>\n\n\n\n