Best Mobile Friendly Practices for eCommerce Businesses

Thanks to new mobile platforms that allow you to set up a digital storefront without forcing you to learn programming, many entrepreneurs and business owners are moving online. Running a website, even a large one, is often cheaper than managing a brick and mortar store, and it opens your products up to the world. In fact, one report found that brick and mortar stores had, on average, a 30% increase in sales when they opened an eCommerce site.

By 2020, Internet Retailer estimates that US consumers will buy $523 Billion in products and services. If you want to make a profit, your best chance is often online. However, if you’re going to set up an eCommerce site, you need to do it right. With users increasingly shifting to smartphones, Google is less likely to offer your site in searches unless it’s mobile friendly.

But Google’s not the only one punishing un-optimized content, your customers are. 85% of users are unlikely to do business with a company that has a poor mobile site — and only 52% of customers were happy with their last mobile experience. It’s easy to do mobile eCommerce poorly.

While all of your competitors are disappointing your customers, this is your chance to create something amazing. Here are a few best practices to follow when adapting your website for mobile devices.

Make Your Buttons “Thumb-Friendly”

One of the biggest mistakes businesses make when designing their mobile sites is assuming the desktop site and all of its content can fit on the mobile screen. Mobile users don’t have the luxury precision of a mouse, and our fingers tend to tap fruitlessly in hopes that we actually click what we’re aiming for.

The New York Times recently highlighted the ridiculous “cat and mouse” game that constitutes mobile ads. “The X button can be so tiny that clicking it requires a fair amount of luck. Industry executives often cite a 2012 report that said up to 50 percent of advertising clicks on mobile were accidental.”

While your site might not have ads, it could have sign up forms, chat windows, or other features that might make sense on a computer, but perform poorly on phones and even tablets.

As you test your mobile site, make sure you and your customers can confidently tap all of the buttons without intense pinching, turning, and squinting at the screen. Your customers are unlikely to use a stylus, so you should design with finger navigation in mind. If your beta testers find themselves clicking on the wrong links or struggling to figure out how to navigate your page, then it’s time for a redesign.

Consider a Mobile-First Design

Instead of following the traditional method and creating a desktop-first design where you create something you love and then struggle to adjust it to the mobile screen, consider reversing your plan and creating a mobile website first that also looks amazing on the desktop.

Oftentimes desktop developers flesh out their site — especially an eCommerce site — with a slew of bells and whistles. There are rollovers, analytics tags, HD videos, and gorgeous images. When the time comes to create a mobile experience, everything gets stripped away except for the bare essentials. This means an eCommerce site either feels like a kid-friendly version of the desktop site, or the business team is so unwilling to give up their tricks that the pages are slow to load and burdened with larges images and long paragraphs.

As the team behind Code My Views put it, “We find ourselves serving up more content than is necessary on the platform that is often associated with the slowest download speeds. See anything wrong with that?”

By taking a mobile-first approach, the developer can create something that looks amazing, and then add in tricks once the basic functions are figured out.

There’s plenty of debate over the value of this design technique. The first depends on your audience. While mobile users are growing daily, some companies lend themselves to more desktop users that others. If 80% of your visits come from desktop, you might want to approach it first.

Another downside is that a mobile first design is a challenge for developers. They’re immediately limited by what they can do and have to play by the rules instead of creating something amazing. However, developers who take a “crawl, walk, run” mentality can embrace these challenges up front and add fun features after they get the basics ironed out.

Look for Updates That Minimize Disruption

Not all websites have the time or budget to rebuild their page with a mobile-first mentality, which is you need a workaround solution. Some suggestions? Create a JavaScript solution that makes your website responsive without updating the underlying code. Construct a mobile ready design, and then put off a code-level change until it makes more sense financially.

We’ve all been there before: you add a plugin or new tag to your code and suddenly everything breaks, or just the important stuff like your checkout button or Google Analytics. This is why we stress creating something that’s minimally invasive and can wow your customers. This way you can remove the appendix without amputating an arm.

The Little Tricks Make a Big Difference

Even the best mobile design can leave a bad taste in customer’s mouths if it lacks the basic functionality most customers have come to expect. One example is the “click to call” button. Your customers are looking up a phone number on your site with the intent to call you, so why wouldn’t you want them to click your phone number to launch a phone call? There are few things more frustrating to users than having to toggle between the phone pad and search window to dial a number.

The same process can be applied to your address and opening Google Maps. Your customers are looking up your address to visit your store, don’t make them reconsider the trip. Below are a few additional tips that can easily be added to a mobile experience to reduce the friction and frustration felt by customers.

• Place the menu on the left or right of your page (like most apps have trained users to do) so your users can easily bounce across your website instead of trying to read your top navigation bar.
• Optimize your checkout experience with minimal information required and a progress bar so users know how much more they need to fill in.
• Tell your customers what information is incorrect. If your customers are checking out and entered their address wrong, they have to reload the page and try to understand what went wrong. A smart mobile designer would keep the bulk of their information in place and let them know which field was incorrect. Poor web design requires users to fill everything in while hoping they spell their street name correctly.
• Be specific about password requirements. If you’re asking your customers to create a password, let them know what special characters are required, as they’re unable to guess which capital letters, special characters, and numbers are included.

How will you know if these mobile tricks are paying off? Check your cart abandonment rate and bounce rates. Customers suffering through poor mobile experiences are more likely to bounce and try again on the desktop or visit a store.Even worse, they might head to Amazon or visit a competitor to get what they want. As you make your eCommerce site more mobile-friendly, you should see an increase in conversions and drop in customer abandon rate.

Have you read?

Make Life Easier for Your System Administrators
Exactly How Much EDM DJs Are Making: World’s Highest Earning DJs Of 2016
Which Countries Have The Best And Worst Reputations For 2016?
The Top 20 U.S. Cities To Launch Your Next Venture In A Business, 2016

Written by: Craig Smith, Founder & CEO of Trinity Insight, a digital optimization agency.