7 Guidelines for Building a Mobile-First eCommerce Website

In this mobile age, why are so many companies still creating eCommerce websites with a dated desktop-first mentality?

How much of your eCommerce revenue comes from mobile? Do you know? If you don’t, you’re probably leaving money on the table. According to research by Statista, the number of mobile phone users in the world is expected to pass the five billion mark by 2019. Another Statista study says that in 2021, 53.9% of all retail e-commerce is expected to be generated via mobile.

That’s correct—over half.

Google Search began considering mobile-friendliness as a ranking signal on April 21, 2015. With this in mind, bolting responsiveness onto your design brief and ticking the checkbox isn’t enough anymore—eCommerce websites should be created with mobile as a top priority

Mobile first design isn’t just a trend. Mobile commerce is here to stay and mobile user experience should be forefront in any online storefront design strategy. According to a study by ComScore, one in five “millennials” (those between the ages of 18 and 34) don’t even use desktops anymore.

Here is how to build a mobile-first eCommerce website for your shoppers so you don’t miss out on sales from this valuable audience.

1. Don’t Make The Desktop-First Mistake

There are many of reasons why desktop shouldn’t be the first priority when building an eCommerce site. For one, it treats mobile visitors as an afterthought, when they should really be treated with priority.

There are big differences between mobile design and desktop design. The main one is that a mobile design needs to be simpler. Content should be stacked vertically to fit narrow mobile device screens. Since desktop devices are bigger and wider, more elements can fit on the screen with room to breathe.

No matter how hard you try to make your desktop design into a great mobile experience, it can’t be. Why?

For starters, desktop-first functions (e.g. drop-down menus, Flash support, etc.) just don’t transfer well to all mobile platforms. There is a wide variety of screen sizes, and page components and sections can get rearranged, leading to a poor mobile experience.

The only time that designing desktop first works, is if the design is built on a responsive framework (i.e. Bootstrap) that ensures the desktop design will adapt to the smaller screen sizes. Many theme makers and developers know to build eCommerce websites on a responsive framework, and eCommerce store builders like Shogun use technology that is responsive by design.

2. Make it Quick

Whether we like it or not, we are currently in an era where users not only expect but demand lightning-fast websites.

In 2017, Akamai released an online retail performance report which claimed that a two-second delay in web page load time increased bounce rates by 103%.

On top of that, around half of mobile site visitors abandon a site that takes longer than 3 seconds to load.

Think that’s intense? Akami and Gomez.com also reported that 79% of web shoppers who have trouble with website performance say they won’t return to the site to buy again.

What are the harsh realities of this research? According to Aberdeen Group’s research on site speed:

Here are awesome free tools available for you to monitor and optimize your site speed and, in turn, improve your SEO rankings:

(Bookmark these and use them often)

Think With Google is among the handy resources you can use. Just put in your website URL and they’ll test it for you. A minute later, you’ll know if your website is quick enough for your consumer’s attention span and what percentage of users you may be losing.

This isn’t a magic solution, though. Using filters and info in Google analytics to see how your mobile vs. desktop stats compare will also aid in confirming your eCommerce site is mobile-friendly.

To make sure your site maintains its speed, use tools like Pingdom. This one helps out by monitoring your site and letting you know if your site seems slow or down.

Keep your images small, but maintain quality.

Tools like Compressor.io are especially useful for this. They help out with site speed by optimizing your image size to make for faster page load.


3. Create Easy, Beautiful Design

Having a great design is one of the main factors for a successful mobile-first eCommerce website.

Design is how brands communicate stories and create experiences. Whether it’s right or wrong, shoppers assume the quality of the design reflects the quality of the product.

It’s especially crucial for eCommerce sites to have a great mobile user experience since, according to Appsee, even though most mobile users eventually completed a transaction on desktop, 37% of them did their research on mobile first.

No need to worry about complicated features and layouts in mobile, it’s important to go for practical—the nuts and bolts of a store.

Using small tricks like enabling click to call will increase your contacts dramatically.

Another important design technique is successfully displaying your products. A furniture retailer called 2Modern is a great example of doing this well.

Using Shogun, they created a mobile-friendly store where multiple products are easily viewable on one screen.

4. Let the Users Search

Site search is a vital element of a great mobile-first site. Since mobile designs are simpler, there isn’t as much room for navigation.

Users want to get exactly where they’re going quickly (especially on their phones). Make this easy for them by providing a good site search.

Make a site search even better by using tools like Findify to allow personalized, real-time search results for each customer just like this:

Here’s Digital Hothouse’s take on an unexpected benefit of a good search function:

“A quality internal site search function means that not only can the user find what they are looking for quickly and efficiently, but you can also gather data about the things that people are searching for, allowing you to refine your navigation, search function, and your content. Triple winner.”


In essence, by having more people using search you can see what they’re searching for and design your site, product promotions and new product lines accordingly.

5. Make Checkout a Breeze

An easy checkout system is a crucial way to get more mobile users converting. Thanks to new technology like digital wallets, mobile commerce is increasing.

You may not know the term, but you’ve definitely seen (and probably loved) digital wallets and one-touch payments before.

Here are a few examples:

  • Amazon Pay
  • Apple Pay
  • PayPal One-Touch
  • Visa Checkout

The most important thing to remember about checkout is for there to be a clear and simple path to complete their transaction from any page on your eCommerce site.

“Every click or interaction should take the user closer to their goal while eliminating as much of the non-destination as possible.” – Breaking the Law: The 3 Click Rule

Once users arrive at checkout, you should never require a bunch of information. You might find it helpful for your business, but it won’t be helpful if it causes them to abandon their cart.

Keep it to a minimum. If you think you might not need the information, you probably don’t. Streamlining the process is the name of the game.

Apple allows users to continue as guests. This makes for a noncommittal, easy transaction.

This doesn’t you’ll never get the data you’re after. Some sites do this slowly by asking for more information after the sale.

6. Don’t Forget About Non-Mobile Browsers

We’ve stressed why you need to make mobile your first priority. But that doesn’t mean you should forget about your non-mobile browsers.

The ultimate goal for your eCommerce website should be to create a great experience for all shoppers on all devices.

Shogun makes this easy by offering screen settings so you can create unique page viewing experiences across all devices. This way, your store will be perfectly responsive no matter what device your user is using.

After you’ve created your mobile design is when you should start thinking about desktop and tablets. This is where you’ll evolve and enhance your website.

There’s good reason for this, too. If you’ve ever tried to jam your desktop design into a tiny mobile design, you know it’s awkward and difficult.

It’s a million times easier to start simple and work your way up to a more complex desktop design.

7. Test Your Site

Obviously, the first test to see if your eCommerce site is built for mobile is to test it on mobile. Look at your site on an actual phone, not just a mobile version on a desktop. Make sure you use an Android and an iPhone.

Besides that, there are a bunch tools to see if your website is looking good on a smartphone.

Google can help with that (because of course they can)!

Plug your URL into their mobile-friendly test, check out their helpful tips and resources, and get your site on track to be in ship-shape.

It’s important to continuously test your site to make sure everything is performing well and not breaking. Try out different layouts and featured products to see what works best for your store!

Summary

Here’s a synopsis of the key tips to remember when you’re building a mobile-first eCommerce website:

  1. Start with mobile in mind and evolve your desktop design later. Your mobile users are crucial in this day and age!
  2. Keep site/page speed high by keeping image size low and using optimization tools
  3. Have a clean, beautiful design that allows users to easily compare products and get to checkout quickly
  4. Include a site search so mobile users can get to where they want without needing much by way of navigation
  5. Make checkout easy by creating a clear conversion path and using digital wallets or one-touch payments
  6. Don’t forget about non-mobile browsers after you’ve created your mobile-first site. You can always add on to make a complex desktop site (just do it later).
  7. Test your site to make sure it’s always looking great and performing well on mobile

Click here to start building a mobile fully responsive eCommerce website with Shogun.

Build Beautiful eCommerce Pages.

Ready to take your Shopify Plus store to the next level?

Schedule a time to chat with one of our experts.

Contact

Page Builder

for BigCommerce

for Shopify

 Build Pages
 Run A/B Tests
 Complete Analytics Suite
4.9 (1608)
Start Free Trial
ShopifyBigCommerce