How to make a Shopify store mobile friendly
In 2016 for the first time, mobile internet usage surpassed computer usage. It shouldn’t have been a surprise to anyone paying attention.
Mobile device use has been on the rise ever since Apple released the first smartphone and mobile devices have become such a regular part of everyday life that we all expect to see people looking at their phones every time we leave the house.
For website owners, this shift in how people interact with the web isn’t surprising, but it does increase the urgency you need to have in making your website mobile friendly. If your mobile visitors currently don’t have a good experience when they land on your website, you’re driving away a huge portion of your potential traffic (and hurting your search engine rankings in the process).
You’ve heard it before by now, but we’re saying it again. You have to make your website mobile friendly. But knowing that’s something you need to do and actually knowing how to do it are two different things.
10 Steps to Make Your Website Mobile-Friendly
Here are a few steps you can take now to make sure your website works as well for your mobile visitors as it does for your desktop users.
1. Make Your Website Responsive
A responsive website includes all the same content and information on any device you access it on, but it changes the way it’s displayed and arranged based on the size of the device screen. This is the best option for making your website mobile friendly, because you’re not limiting the information your mobile visitors can access – they still get all the same content the rest of your visitors do. And responsive design is also good for SEO. Google has said it’s their preferred format for mobile websites.
Building a responsive website isn’t for beginners though. You’ll either need to hire a professional to help, or look for a website builder that includes mobile friendly templates. If the main thing that’s been keeping you from making your website mobile friendly is not knowing how to do it yourself, squash that excuse and get it done.
2. Make Information People Look for Easier to Find
Some people who browse the web on their mobile devices don’t mind taking some time to browse or read content at the same pace they would on a computer, but others want to find the information they need as fast and as easily as possible. Think about the information that people on mobile devices are most likely to be looking for when they head to your website and put that somewhere obvious and easy to find on the mobile homepage.
Also consider the FAQs people most often look for when they visit your website. It might not make sense to put all the answers front and center on your mobile homepage, but you should make them easy to find and navigate to on a mobile device.
3. Don’t Use Flash
Flash largely fell out of favor years ago because it’s bad for SEO. It can slow down a page’s load time and there are a lot of browsers and devices where it just doesn’t work at all.
Neither Android nor iOS devices support flash, so if you build a website that depends in any way on the experience of a Flash animation, your mobile users will be left out. At this point, it’s best to scrap the technology altogether on your website and find a strong web design that works without it.
4. Include the Viewport Meta Tag
The viewport meta tag is an easy way to control how your website shows up on mobile. If your page opens up as the same width on the small screen of your phone as it does on your desktop, you’re going to have to do some awkward scrolling from side to side to read each line of text and see the different sides of the page. The viewport meta tag tells browsers to fit the width of your page to the screen of the device type the visitor is coming from.
Adding this it to your html is pretty simple. Just paste this onto the html for each page:
1 | <meta name=”viewport” content=”width=device-width, initial-scale=1″> |
5. Turn Autocorrect for Forms
Something it’s easy not to think about is the little ways autocorrect can make a user’s interaction with your website more inconvenient. If you have forms on your website that ask for name or address information, one small way you can make providing that information easier on your mobile visitors is to turn off autocorrect for each form field, otherwise their phone will try changing their name or street name to more common words and slow down the process of filling out your form.
In the input field, make sure you include autocorrect=off in the html.
6. Make Your Button Sizes Large Enough to Work on Mobile
It’s easy enough to click on a button of just about any size with a mouse, but when you’re trying to “click” with your fingers on a small smartphone screen, small buttons are hard to deal with. And that’s especially true if there are multiple small buttons close to each other – pressing one while trying to press another will cause real annoyance for your visitors.
The best way to save your visitors from this frustration is to use bigger buttons. Any time you add a button to your site (and for all those already there), take some time to test them out yourself on however many mobile devices you can scrounge up amongst your employees and family. Make sure selecting each button is reasonably easy on all the devices and, if it’s not, update it so that it is.
7. Use Large Font Sizes
Reading on a small screen is that much harder if the font is tiny. It’s best to use a font size of at least 14px on your webpages, but go ahead and test out how that looks to see if going bigger could be better here.
It’s also best to stick with standard fonts. Any font your visitor’s browser might need to download will slow down how long it takes your website to load, which is bad news on mobile.
8. Compress Your Images and CSS
Speaking of site loading time, you always want your site speed to be fast. But if anything, that speed is more important on mobile. That means another good step for making your website mobile friendly is to compress anything that takes up a lot of space now and slows loading time.
That probably includes your high-resolution images and your CSS. By compressing them, you can ensure they load faster without negatively affecting the quality of what people see on the site.
9. Allow an Easy Way to Switch to Desktop View
Some of your mobile visitors may actually prefer to see the desktop version of your website instead (especially if you go with a mobile version of your website rather than a responsive site).
Make sure you give them a way to do that if it’s their preference. You want your visitors to be able to interact with your website in the way that makes the most sense for them.
10. Regularly Perform Mobile Testing
The best thing you can do to make sure your website’s mobile experience is a good one is to regularly test it out yourself on your mobile device. Every so often, pull up your website on your phone and tablet and spend some time browsing to see if anything’s hard to see or difficult to do. Ask your employees to do the same, and consider hiring users to do testing as well (since they’ll be seeing it all with fresh eyes).
Make Your Website Mobile-Friendly
Even if you get everything right today, the way mobile devices look and work will continually change and today’s mobile friendly website may not still do the job tomorrow. Keep testing, keep tweaking where needed, and continue to think about your mobile users as a priority and you should be fine.
Source: Hostgator’s Blog
