Anne Thomas, co-founder of Code Scouts, joins Lucas on Pitstop to talk optimizing your Shopify store for mobile devices.
An expert designer of Shopify add-ons and template packs, Toronto based Anne Thomas knows that the mobile user experience is the frontline for the modern consumer. While you never know how customers will be looking at and engaging with your site, an increasing number of users are navigating online over their mobile devices, some doing all of their shopping from the palm of their hand. An optimized, easy to navigate and enjoyable user experience over their mobile device will drive both increased brand engagement and sales overall, and Anne has three important rules for any Shopify user to follow to get the most out of their site.
- Not every smartphone or mobile device is equal. Some consumers will be using older devices, with slower processors or older operating systems. Some have larger screens than others, or details appear with less clarity. One easy trick Anne has for any mobile designer is to use the Chrome extension ‘Web Inspector’, which allows you to preview your designs on a wide variety of device screen sizes.
- Be as careful optimizing your Shopify design packs and site features as you are optimizing to fit and function on mobile platforms. Some common and relied upon features, available across all mobile devices, may be limited un unavailable all together, such as pinch to zoom or swiping, depending on the template or design‘s programming. Always remember to test every aspect of your site, as you never know where an error may arise.
- Regularly inspect and analyze your mobile experience. Mobile device companies, operating systems programs, app developers and browser technicians are always at work updating their product for the next step in technological evolution, and no matter how adaptive your mobile design is, eventually a platform will be released that doesn’t support it.
Show, But Don’t Forget To Tell
Owning and operating your own Shopify store can be both exciting and overwhelming for even the most seasoned business-minded seller, and there are many pitfalls to avoid while building and maintaining your shop. According to mobile UX design expert Anne Thomas, all too frequently a store owner will spend too much time, attention and overall resources on making sure their site looks fantastic over desktop, the most universal and frequently best looking medium for display, but won’t consider how it may look, even at its best, on mobile.
What may look detailed and perfectly positioned, with fully functioning interactivity over a desktop browser may run into minor errors, or even total failure, when viewed over even the most up to date mobile device, for a variety of reasons, from simple issues such as screen size and shape to image processing capabilities and contrary interactive-touch functions. To avoid unexpected and often extensive, thus expensive, failure, always keep these helpful guidelines in mind.
- Never forget your scale. Text, images, or the dreaded perfect storm of text on images can look great at full size and fidelity, but mobile users, especially smartphone users, are engaging with your site on a screen that may be smaller, display measurement-wise, than the very image you designed. As such, that image, and more importantly the small print on the image, could be unreadable to most users, and lose all detail and resolution when pinched-zoomed in on. Make sure, if you must use a static image with text on it, that the text is clear enough to be read on even the smallest of contemporary screens.
- Never forget your alternative-viewing options. Not everyone “looks” at a site the same way. Some visually impaired customers may use screen readers, which would be equally unable to read any text that appears in an image, if there is not alt-text reposts of the same text coded into the image itself. What’s more, text in images don’t appear in or activate Google, or any competiting search engines optimization features, and will go completely unnoticed. If you are using static images with text, always reproduce the text as alt-text in the image’s coding or placement description.
- Never forget built-in the limitations of SEO. Alt-text is great for getting keywords and terms into the coding of your site, but search engines won’t prioritize alt-text into optimization. Unless you have at least the keywords of the text somewhere else prominently on the page, either as a title, in the item description, or as a subgrouping headline, it’s likely to be missed entirly, no matter how well designed the image its included in may be, and regardless of the device it’s viewed on. Always repeat your fundamental message and offer on the page itself, the higher on the page the more effective.
Avoid Technical Debt
Shopify themes are more than just how a site looks, they're how a site feels, how a site acts, and how customers interact with your product and brand. They are your front line, your back bone, and whether using a free or premium Shopify theme, maintaining that front line in peak condition should be a priority for any store owner.
One common but crucial mistake made by Shopify users is not updating their themes more often. While it can be a pain to have to constantly deal with, updating your Shopify theme is essential to keeping your store on the cutting edge and fully functional.
There are many reasons why some store owners don't update their theme;
- Presuming that updates are automatic
- Worrying that preferred features will be changed or removed
- Sheer forgetfulness or unawareness that themes can be updated to begin with.
Without these necessary and often mandatory updates, not only are shop owners missing out on important fixes for any issues their chosen theme may have, they're also missing out on new features rolling out. While they're perfectly capable of doing business without these new options, they miss out on the extra resources and value the updates offer, often for professional themes that have been paid for that keep rolling out new and improved features.
Furthermore, services they subscribe to or buy from other sites may also become available through free updates, such as currency converters, which previously had to be purchased from a third party. Without updating their theme to include the conversion feature, site owners who rely on them are flushing money away needlessly. Along with fixes and new features are performance improvements, which will help keep your Shopify site's load time down to a minimum. Maintaining and up to date site, simply for the load time alone, can mean the difference between a sale and an abandoned cart with some customers, used to speedy service.
- Tags: advertising, blogs, conversion rate, customers, e-commerce, email, engagement, marketing, mobile, podcast, retail, retention, review, sales, shopify, sms, strategy, success, text, user design, ux design