Although smart phones have been nestled comfortably in our daily lives for several years now—you may be surprised at the increasingly important role they play in online shopping. Mobile commerce (m-commerce) is growing by leaps and bounds—projected to hit $31 BILLION dollars in 2015 in the U.S. alone.
Between 40-50% of users say they’ve made a purchase via their mobile phones and feel comfortable doing so. So what are they buying?
And these aren’t counting the service markets—things like in-app purchases, online books, digital music, movies and games. If that isn’t enough to make you start seriously considering optimizing for mobile, consider that mobile users on average tend to buy more than their non-mobile counterparts:
With that being said, how do you get in on all this mobile shopping action?
The first step is to have a responsive website—a website that is built on a framework which can understand and organize itself for mobile-friendly viewing. No matter what content management platform you’re using, there are many different responsive themes, layouts and templates you can use.
Jetstrap is made for people who don’t want to spend a lot of time digging through code or responsive website documentation, but simply want to make clean-code mockups quickly and easily. It’s a great foundation for your own responsive design and comes with many different examples that you can drag and drop right into your page.
If you’re already using an existing ecommerce storefront service, like Shopify, you’ll be glad to know that there are many free and paid responsive templates available for it as well.
Testing Your Responsive Site
The next step to optimizing your ecommerce site through mobile is to test your responsive design. The good news is that you don’t have to own every version of every device to make this happen. Computers are pretty good at emulating what other systems do—and bringing that functionality to the web.
One such live mobile responsive testing tool is Browserstack. Used by Adobe, Microsoft, Visa, eBay and many more, this service allows for rapid-fire live testing of your responsive site via cloud-based servers—meaning it’s incredibly fast and accurate.
BrowserStack offers a free trial to test your site on all desktop and mobile browsers
If you’d just like to test the performance of your mobile site, there’s a site for that too—and it’s free. Mobitest will let you enter your website URL, then test the performance of your site against Motorola Xoom/Android 3.0, iPad 1, 2 and 3 (OS 5 and 5), and Android 2.3/Nexus S.
You can also enable video capture of your recording, although as noted on the site, this will slow down loading times. The best responsive frameworks allow for a variety of past, present, and even future devices to be rendered professionally and cleanly on the screen, and sites like Mobitest will help you pinpoint any issues that could be hindering the load time and other performance points on your site.
Getting Social (Without Slowing Things Down)
One of the biggest causes of slow loading times (beyond large graphics and scripts on your site) are social icons. Now this may seem contrary to all the other lessons in this guide, since you want to be able to optimize social channels, and having like/share/tweet icons loading is one way to do that.
However, waiting for the icons to be loaded from their various sites (Facebook, Twitter, etc.) can add several seconds of load time to your pages.
Plus, considering that many people leave a page if it hasn’t fully loaded within a few seconds, time is of the essence. To help combat these slow loading times, there’s Socialite.
Socialite uses “lazy loading” to quickly load relevant social icons any time and any way you want. If a user hovers over an image or reaches the end of an article, for example, the icons can load on-demand. This way, you don’t have to worry about waiting for other elements on the page to load while the user gives you a coveted like or follow!
Creative Fonts and Icons
Another cause of slow-loading pages are graphics made up of stylized fonts or icons. Icons themselves can look blurry and “washed out” on mobile devices—particularly those using the crisp, clean “retina” display, which allows for more pixels in a smaller area—and thus the appearance of brighter, sharper designs.
With this in mind, IcoMoon has developed and combined nearly 5,000 free vector icons that can be imported into your page via CSS.
Not only does this free up considerable space that would otherwise be used for loading graphics, but it also makes sure your icons look great on mobile devices. You can even import your own icon designs to create custom fonts.
Designing Responsive Emails
According to email analytics provider Litmus, 47% of emails are now opened on mobile devices. That means that not only should your ecommerce website be responsive, but your emails as well.
Unlike responsive websites, where a one-size-fits-all approach can be used to make a site responsive across different browsers and devices, emails don’t have that luxury. There are far too many email programs, services and devices to begin to even think of creating something that could test and account for them all.
But that doesn’t mean that all hope is lost. Many email marketing providers now have responsive templates built into their systems which you can customize with your own logo and content.
As with anything on a mobile device, large, tappable buttons, short amounts of content and noticeable headlines are key to encouraging customers to go beyond the message and onto your site. Many customers will delete an email that doesn’t look good on their mobile phone, rather than try to haphazardly navigate around it.
Does Your Business Need an App?
At some point or another, you’ve likely wondered whether or not your business needs an app. After all, nearly every major ecommerce website has one. Building an app is much like creating your foundational business plan. It isn’t (and shouldn’t be) something that you simply have whipped up in an afternoon.
You’ll need to consider what, precisely, you want the app to do that your mobile responsive site cannot accommodate for. If you wanted to build a game around your business or provide simple tutorials, push-notifications or other resources that your website doesn’t have, then an app would be the ideal solution.
Keep in mind, however, that unlike your website, an app is not universal to different devices. The same app can’t be used on an iPad, Android or Blackberry device, and different versions will need to be maintained and supported regularly. Consider your core business goals, your target audience’s mobile-savvy skills and whether or not they’d readily download an app that already does what your website does.
The Bottom Line on Optimizing Your eCommerce Website
As you have seen, there’s a lot that goes into optimizing an ecommerce website. You’ve learned how to tweak social media channels and how to fine-tune your checkout process. You’ve discovered some mind-blowing statistics about mobile shoppers and learned some of the major reasons why users abandon their shopping carts.
But the bottom line when it comes to optimizing your ecommerce website is the overall customer experience.
Customers want to be able to browse, buy and share your site without distractions along the way. They want to know that their order is being taken care of promptly and how to reach out to you if they have any questions.
Perhaps most importantly, you should remember that ecommerce optimization, like other types of conversion optimization, is not a one-off task that can be marked off a list. Rather it’s an ongoing learning process—and the better you become at it, the more you’ll reap the rewards in terms of more customers, greater brand loyalty, more sales and greater profits!