Select Page

The web is moving to mobile and you should too! Depending on your region and your customer demographics, your percentage of traffic that comes from mobile is likely already over 60%, and that figure is increasing all the time. Therefore it is essential that you think mobile first and that your ecommerce store and especially your checkout are optimised for mobile devices.

Source: Statistica

According to Kibo the global average conversion rate on desktop is 3.48%, while the average on mobile devices is only 1.79%. Getting you mobile conversion rate to match your desktop conversion rate could be worth many thousands or even millions a year to your ecommerce business!

What Does Mobile First Ecommerce Mean?

A mobile first approach means that all decisions when designing, modifying or upgrading your online store should be taken with mobile visitors in mind.

It doesn’t mean that you ignore the needs of desktop visitors, just that you prioritise mobile traffic in your decision making.

Mobile first means prioritising speed, simplicity and ease of navigation.

Mobile first means a well thought out UX and visual hierarchy which presents the most important page elements first and reveals the rest as your customer scrolls.

Mobile first means sizing elements for a small screen and fat fingers.

Mobile first means reducing the payload (filesize) of your pages for slow data connections.

How to implement a mobile first ecommerce design

Use a responsive design or a separate mobile theme that is specifically tailored for mobile devices. Navigation needs to be simplified and images, product grids and buttons need to be resized so they are easy to swipe and tap.

The easiest way to implement a mobile design is to choose and install a pre-designed responsive theme. Almost all themes for the main ecommerce platforms are responsive these days, but keep in mind they might not be mobile first. They may have been designed to look fantastic on computer screens (which is how most people browse and purchase on theme stores), with the mobile design given less attention.

Before choosing a new theme make sure you browse its demo on your mobile device to ensure it includes all the recommendations in this article.

Some of the best places to find free and paid responsive ecommerce themes are:

The Shopify Theme Store

The Woocommerce Theme Store

Themeforest (sells themes for all major shopping carts)


Navigation

With less screen real estate available you really want to put a lot of thought into your navigation. These days most ecommerce sites follow an established pattern when it comes to navigation and it makes sense to stick to this rather than confuse your visitors and force them to figure out how to navigate your site.

The established pattern for mobile ecommerce sites is to include icons for key functions such as search, shopping cart and account login at the top of the page, along with a hamburger menu icon that reveals the main menu.

Most stores also include links to additional info such as contact details, store policies and customer service in the footer. You should include this additional footer info even if the info is included in the main menu or elsewhere as your visitors will be accustomed to finding it there.

Homepage

The homepage is often the first page your visitor sees so it is essential it makes a good first impression.

With limited space above the fold on mobile you really have to put thought into what you include here. You need to include the most important homepage elements first, the elements that convey what your site does and who it is for at first glance.

Your hero or banner image should be tailored and properly sized for mobile – square images work better than the standard portrait images used on desktop.

This is also a good place to include incentives such as a current offer and social proof to convince potential customers it’s safe to shop with you.

As the visitor scrolls down the page more supporting info can be revealed to convince them to shop with you and to guide them towards the products you want them to view.

American Eagle are an example of mobile hompage and navigation done well.

Read More: Look The Part (Good Design & Trust Signals for your Ecommerce Website)

Category Page

The goal of an ecommerce category page is simple – allow the customer to easily browse through a list of products to find the one you want. Category pages are usually presented in a grid layout which actually suits mobile devices quite well, as the responsive theme will automatically adjust the number of products in each row to suit the screen size. The visitor just has to swipe to easily scroll and scan down through the list of products until one catches their eye.

The key elements to pay attention to are the Filter and the Sort By options.

Has the default sort option been carefully chosen for each category so that the products you want the customer to see are shown first? These could be your bestsellers or featured products you want to promote. This is important for all devices, but especially on mobile where less products are visible at once and and you don’t want to force the customer to scroll for ages to find what they are looking for (or what you want them to see).

Of course you want to give the customer the option to sort the products whatever way makes most sense for them, be that by price, highest rated, newest, etc.

Having a well thought out product filter is important on mobile for the same reason that it takes longer to scroll through a big category of products on a smaller screen. The filter should be easily accessible at the top of the page and the filter options should be well thought out to allow customers to easily narrow down a big list of products to exactly what they are looking for.

Zappos incorporates these elements, with a well sized grid of products and easy access to Sort & Filter options at the top of the page. The quick access buttons for the most popular filter options are a nice touch.

Product Page

On the product page you need a product image carousel that is designed for mobile and allows your visitors to easily swipe, pinch and zoom through product pics.

Users need to scroll more to see everything on mobile, so you need to present the most important product page elements first with key elements above the fold. H&M do this really well with the product images, product name, price, size selector and Add to Cart button all above the fold. Visitors can then scroll down to read the product details and other supporting info.

H&M do this well.

Checkout

Focusing on the Checkout, you want to ensure that all form elements and your payment page (if separate) work properly and fit nicely on smaller screens. Make sure that your visitors don’t have to scroll horizontally to access any elements.

We already discussed simplifying and removing any distracting elements from your checkout, but this is especially important on mobile devices where there is less screen space.

Make sure buttons and form fields are big enough to be easily read and clicked on – forcing your customers to pinch and zoom to see and access elements is a huge conversion killer.

Again, H&M are a good example of a mobile checkout done well. Their page is simple and distraction free, and the form elements are easy to tap on and sized perfectly for the small screen.

Typing in info is a pain on mobile devices so autocomplete as many fields as possible. If the customer is logged then pre-fill the form with the info you have on file for them. Use geo-location to prefill country fields and to automatically calculate shipping options.

Make it as simple as possible to pay on mobile devices. Many smartphone users prefer to pay with digital wallets such as Google Pay or Apple Pay where they don’t have to pull out their credit cards and manually enter their info. Digital and mobile wallets now account for over 40% percent of global e-commerce payment transactions, with that figure predicted to rise to over 50% by 2023.

Test Test Test

When you implement a new theme or make any design changes you need to test, test, test on as many devices as possible.

With so many different mobile devices and screen sizes it is not enough to only test on the device you own and leave it at that.

At a minimum you want to test on an Apple and an Android device to make sure everything works and displays properly on both.

You also want to test on different screen sizes in both portrait and landscape mode to make sure all key elements are displayed properly and everything is clickable.

You also want to test how fast your site loads on a slower 3G connection as not all your customers will have faster 4G or 5G connections.

It would be ideal if you can get your hands on a range of actual test devices, but if that’s not possible then there are plenty of options for emulating different mobile devices. Browser Stack is a paid service that allows you to emulate browsing your site on over 2,000 real mobile device and browser combinations.

Chrome, Firefox and Edge browsers also have a built in Developer Tools suite that allows you to do a basic emulation of how your website will look on a range of mobile devices and screen sizes. You can access this by hitting F12 in each browser.

Another important tool in your testing toolbox is Page Speed Insights by Google. This free tool lets you test and optimise your page load speed. You enter your website URL and it gives you a performance score for desktop and mobile, and also gives you specific suggestions on where you need to make improvements. The elements that most affect pageload speed on mobile are images and javascript files. Page Speed Insights will identify images on your page that are not properly sized for mobile, and give specific recommendations for minimising javascript.

Summary

  • The web is moving to mobile and you should too.
  • It is like likely over 60% of your traffic now comes from mobile devices.
  • Mobile first ecommerce means that all decisions when designing, modifying or upgrading your online store should be taken with mobile visitors in mind.
  • Mobile first means prioritising speed, simplicity and ease of navigation.
  • Use a responsive design or a separate mobile theme that is specifically tailored for mobile devices.
  • Test, test, test on as many devices as possible.