How to Make your Ecommerce Site more Mobile Friendly

Did you know that more than 15% of all ecommerce sales are made from a mobile device? If not, then it may be time to get your ecommerce site rocking and rolling for your mobile traffic. In this video I’ll show you how to identify the mobile devices people tend to use most on your site and a few different techniques you can use to make your site more friendly to mobile traffic.

Video Transcript

Hey. What’s up, everybody? It’s Brian Dean from Quick Sprout. In this video, I’m going to show you how you can make your e-Commerce site more mobile friendly, because as you know, more and more people are using their mobile devices not just the browse the web, but to actually make purchases. So, if you have a site that looks great on a mobile device, you’re going to increase your conversion rate quite a bit. So, your first step is to see what mobile devices your customers use or if a large segment of your customer even shops on your site using mobile devices.

So, what you want to do is log into your Google Analytics account and choose your e-Commerce site from the list of sites that you have in that account. Then, what you want to do is scroll down to where it says ‘Audience’ and open up this menu, and then click on mobile and click on ‘Overview’. What this does is it shows you the device category that people use to access your site. If you’re like most sites, desktop will be your number one. Then mobile, obviously, mobile phones like iPhones and things like that, and tablets are things like iPads. OK. So, if you notice that a large chunk of your traffic comes from these two sources, it makes sense that you’d want to put more emphasis on your mobile design. But in my case, you can see that most people come on a desktop. So, I may not want to pour a ton of resources into creating a mobile friendly site, but it does depend on where your traffic comes from. So, just take a look at these numbers.

Then, what you want to do is drill down and see what devices people use. What you want to do is click on ‘Devices’. This will show you what mobile devices people tend to use most often. So, you have your Apple iPhones, your iPads, your Nexus, things like that. So, that’s important because you want to see how your site looks, using each of the most popular mobile devices. For example, if you, for some reason, get a ton of people that use a Samsung Galaxy to access your site, you want to make sure that your site looks particularly great using a Samsung Galaxy. If you don’t get that many people using iPhones to visit your site, you might want to do that as well.

Also, if you notice that one device has a really, really low conversion rate… As you can see, it’s pretty much proportional to traffic, in this case. But, if you notice that for one device you’re getting a ton of traffic and really low conversions, then you may want to take a look at your site in that device and see if it doesn’t look very good, or if something is going wrong when people try to navigate your site using that device. Once you’ve identified the device that people use most often, like the Apple iPhone in my case, you want to head over to Mobiletest.me. So obviously, if you actually have the device, you can use it. The great thing about Mobiletest.me is that you can view your site using several popular mobile devices. So, what you want to do is head over to the site, and then choose a mobile device. We’re going to choose the iPhone because as we saw, most people visit my site using that mobile device. Then, you want to put a URL into this field here. That’s either your homepage or product or category page that a lot of people tend to visit. I’m just going to put my homepage here.

You want to take a look at your site and see how it looks on that mobile device. If it doesn’t look good, or it’s difficult to navigate, then you might want to set up a mobile sub-domain on your site. For example, [inaudible 03:31], if I wanted a mobile sub-domain, I would do something like M.[inaudible 03:35].com or mobile.[inaudible 03:39].com. So then, mobile traffic can go to that site, and that design is just for them. To set that up, you do need a separate sub-domain. So, not ‘www’. It would have to be ‘Mobile’ or ‘M’ or something like that. To do that, log into your hosting C panel. Scroll down to where it says ‘Domain’ and click on ‘Sub-domains’. Then, you just want to set up a sub-domain. Like I said, you could put ‘Mobile’ or ‘M’ or something like that. Then, all mobile traffic could go to the sub-domain, and that site will look really good for mobile traffic, and your desktop traffic could go to your regular site.

Now, another way that you can get mobile traffic to convert and to stay on your site is to create an app. If you have a lot of regular customers or people that make a lot of impulse decisions while they’re on the road, things like that, you might want to set up an app to make it really, really easier for them to make a purchase. Zappos has a really, really great mobile app that just makes it super easy to make a purchase with just a couple finger taps. That’s just an option if you tend to have a lot of repeat visitors. Obviously, if you get a lot of drive-by traffic, they’re probably not going to download your app. But if you have loyal customers, this might make sense for you.

Now, what we’re going to do is we’re going to take a look at a great responsive design e-Commerce site, Curries.co.uk, which is basically a site that sells just about everything in the UK. A responsive design is really great because then, no matter what mobile device people tend to visit your site with, it’ll bring up the best design for that mobile device. This is a great alternative to a mobile sub-domain on your site, if you don’t want to do that. Here’s an example. Let’s just take a look at how Curries looks in mobile device on an iPhone. You can see that it looks really nice. Right? It’s really easy to navigate. It has everything as you scroll down. Because it’s responsive, when you go back to the Mobiletest.me homepage and choose a different device and enter the same URL, you’ll notice that it looks really good and looks really different because it’s responding to this particular mobile device. So, this might be an option for you.

Now, how can you set up a responsive design? Well, if you use WordPress as your e-Commerce CMS, you can actually get a responsive design, and then customize that for your e-Commerce site. So, what you want to do is log into your WordPress dashboard, hover over ‘Appearance’, and click on ‘Themes’. Then, you want to click on ‘Install themes’. Then, in the search field, you want to put in ‘Responsive’ and click on ‘Search’. This will bring up all the responsive themes in the WordPress database. What you want to do is look for one that seems like a good fit, and then get it customized for your e-Commerce site. That way, you don’t really have to do a lot of work for it to be responsive. You can just have it kind of out of the box responsive for mobile devices, and have it customized so it fits your branding and your design and the functionality of your e-Commerce site.

Now, if you don’t want to get a new theme, or you don’t use WordPress, you can hire a developer to create your mobile or responsive site on Elance. What you want to do is just put something like, “Responsive e-Commerce design” in the name of the job, and then describe exactly what you want. Then, post that job. Now, if you want to look for freelancers that specialize in that, you can head over to the Elance search feature. Then, you can put in something like, “Responsive or mobile”, and then search for those freelancers that specialize in that. Then, you’d want to read a description of the freelancer or the company, what they specialize in. Look at their feedback. See if they’ve done a mobile design in the past already on Elance and had good feedback for that. Then, invite them to that job.

So, that’s all there is to making your e-Commerce site really mobile friendly. As you can see, the most important thing is to see what mobile devices people tend to use when they visit your e-Commerce site, and then delivering up a great design and great user experience, no matter what mobile device they happen to use. So, thanks for watching this video, and I’ll see you in the next one.