How to Make Your Site Mobile Friendly

If you don’t have a mobile friendly site, you’re missing out on huge chunk of your site’s traffic and conversion potential. Fortunately, you don’t need technical skills to get your site optimized for mobile visitors. In this video you’ll learn how to see your site like a mobile visitor sees it (without using a smart phone), and how to set up a responsive design within minutes using WordPress.

Video Transcript

Hey, what’s up, everybody? It’s Brian Dean from Quicksprout, and in this video I’m going to teach you how to make your website mobile friendly, which as you know is very important because more and more people are using mobile devices to access the web.

So your first step is to log into Google Analytics, click on your site, and check to see how much traffic you get from mobile devices, and what devices they tend to use. So once you’re here, under ‘audience’, there’s a section called ‘mobile’, and you want to click on ‘overview’. And what this does is, it tells you how many people are visiting from desktop, mobiles, or tablets. OK? So this will give you a general idea of your mobile traffic, and depending on your niche, this could be quite different.

So then you want to click on ‘devices’ and this will give you an idea of what devices people tend to use when they visit your site. Now in my case, it’s somewhat even. There’s some iPads, some iPhones, some Samsung Galaxies, but certain niches for some reason tend to have a lot more people using tablets, like iPads, or maybe if you have an Apple site, you’re going to have a lot more people using iPhones, right? So you just want to see what devices people tend to use, and then you want to look at your bounce rate, all the way to the right. And if this is quite high, like it is here, especially above your site average, then that could mean that your site isn’t optimized for mobile, and you want to follow the steps in this video to make your site more mobile friendly.

So once you have an idea about your mobile traffic and the devices people use, you want to head over to ‘mobile’. So once you’re at ‘mobile test’, you’re next step is to use the mobile device that people tend to use when visiting your site. And in the case of my Google Analytics data, it showed that Apple iPad was the number one mobile device people use in visiting my site, so I’d want to choose the iPad from the list, and it will load it up like this, and then you want to put your URL, either your homepage or an internal page, and then hit enter. And what it’ll do is, it’ll show you exactly what it looks like using an Apple iPad.

You can even scroll and do everything, just like you would if you were actually visiting a site through the mobile device, and if it looks a little funky or strange that could be because your site isn’t responsive, or isn’t really designed well for mobile devices. So that would be something you’d want to correct. So once you get an idea of what your site looks like in mobile, and if it looks OK, like QuickSprout obviously looks good, you’d want to move on to ‘page speed insights’, so just Google, ‘Google page speed insights’, which basically shows you how you can make your web pages faster for both mobile and desktop devices.

So, you want to put in your homepage URL here, and click on ‘analyze’. And when it’s done it actually shows mobile by default. So, for this video we’re going to pay attention to mobile and it gives you a score out of 100. So what you want to do is address any problems that you see here under their ‘suggestions summary’, especially for mobile devices, which are sometimes different than a ‘suggestions’ they give you for desktop. OK?

So if this score is very low, this could be one of the reasons that people on mobile devices are bouncing. OK? It could be just because the page loads slowly or it could appear funny depending on the mobile device. So once you’ve established the things you need to do and whether or not your site looks OK, your next step is to head to your WordPress dashboard and install a WordPress theme that’s responsive. OK? If you don’t already have one, you may want to talk to your web developer to determine whether or not you have one, but one way you can make sure you do, is to install one that’s responsive to start.

So head over to your WordPress dashboard and under ‘appearance’ click on ‘themes’ and then click on ‘install themes’, and when you can search for themes by keyword, you want to put in ‘responsive’. OK? And what this will do is, it’ll bring up all the themes in the WordPress database that are responsive, including the responsive theme, which is actually quite nice, and obviously responsive, and they also have 297 other themes for you to choose from. OK? So you can choose the one that’s best for your site, and that’s responsive.

So, the next two things you want to do is basically just make your site load faster, because as you know, mobile devices aren’t typically as fast as desktops. So these are two steps you can take to make your mobile devices load more quickly.

So the first thing you want to do is head over to your plug-ins area and click on ‘add new’. And you want to install something called ‘WP Smushit. So type in ‘W-P-Smushit, click on ‘search plug-ins’, and I’ve already installed it, but this is the one that you want to install. And what this does is, it compresses your images because on mobile devices image loading is usually 80 percent of the time. OK? So if you can reduce your images sizes, you can reduce the loading time for a mobile device significantly.

So once this is installed, hover over the media area of your WordPress dashboard and click on ‘bulk smushit’. And what this will do, it’ll take all the images on your site and actually make them smaller. So when people load them from a mobile device, they won’t take as long to load. So you want to click on ‘run all my images through WP smushit’ right now and that will take a while to do it’s thing.

So while that’s working, or after that’s done, the next plug-in you want to install is a cache plug-in, because again, this just makes your site faster in general, which is especially important for mobile devices. So under plug-ins click on ‘add new’ and then put in ‘W-P-Total Cache’, and then that’s obviously already installed here. OK? In my case. So what you want to do is hover over ‘performance’, click on ‘dashboard’, and you just want to make sure everything looks OK. All right?

So, by default, it already makes a cache of your page, so then it makes it faster for people to load. But just to make sure, you may want to perform a compatibility check by clicking on this button to make sure everything works OK, and then you want to empty all the caches to make sure you have a fresh page that is more up to date, so when people load the cache it’s actually the most current version of the site. And that’s something you want to do every time you make a change to your site.

So that’s all there is to making your site very friendly for mobile devices. The most important thing you can do is have a responsive design that’s built into your WordPress theme, or you can have a WordPress developer make one for you based on your theme. But most themes today have that option. And then you just want to make your site load very very quickly so that people with mobile devices can see your content without having to wait.

So thanks for watching this video, and I’ll see you in the next one.