Essential Guide for Ecommerce Responsive Design

Reading Time: 10 minutes

Did you know that only 9% of mobile retailers had an ecommerce responsive design in 2015? This is based on mobile adoption rates of the top 500 retailers for Internet Retailer’s Mobile 500 Guide.

However, that is all expected to change now with Google’s algorithm update that rewards brands that are effectively addressing their consumers’ need for a website well optimized for mobile devices.

After all, with mobile now accounting for more than half of all ecommerce traffic, and several ecommerce shops enjoying revenue increases as impressive as 600% after implementing a responsive mobile shop design, optimizing your site for mobile is no longer optional, but necessary.

In this article, we will guide you through the important steps as you make your site suitable for mobile devices starting with an understanding of your mobile customers, the different design elements you need to have to ensure conversions, and examples of mcommerce shops you can refer to for inspiration.

Understand Your Mobile Customers

Ensuring an ecommerce responsive design has a lot to do with knowing and understanding who you are building the mobile site for.

As mobile adoption and mobile traffic trends starts to grow, we are constantly learning how our mobile customers are using their devices. They use it in diverse situations, such as while waiting at the train station, in bed, eating, or even shopping. In these situations, they may or may not be in the mood to buy; hence timing is a factor you can use to your advantage.

Based on this comScore report, you will see that people use a variety of devices to browse the web throughout the day.

device preferences throughout the day

This can guide you create content, links and promotions that are conveniently accessible based on the device they are most likely to use in a particular time frame.

For instance, if you want to talk to your potential customers aged 18 to 34 years old, you can optimize mobile-friendly social posts featuring coupons and discounts with links to your pages between 7 AM to 10 AM and 5 PM to 8 PM. Keep it short with not more than 100 characters. Ensure that the links are responsive and has good website mobile view because those commuting hours see the most number of mobile internet users.

During 10 AM to 5 PM, give your potential customers content that provide useful information about your products or a convenient method to make online purchases. Daytime hours will usually be the time your potential customers are on their desktops, working and taking short breaks following brands on the web. You can also do your retargeting campaigns in this time frame.

Mobile Shop Design Elements that Convert

How your mobile store website is designed will definitely influence how your intended customers will use it. Below are the essential mobile shop design elements you need to focus on to ensure an ecommerce responsive design that promises a positive user experience and an increase in mobile conversions.

Hierarchy and Navigation

Space is very limited in mobile websites. The different elements tend to be crammed up on a small website mobile view, which gives way to a design pattern called off-canvas navigation.

Off-canvas navigation takes advantage of the ‘off the screen’ space to keep the navigation hidden until a larger screen allows it to be visible. It is becoming widespread now that people understand and know how to use it.

Check out this ecommerce design inspiration from Fortnum & Mason. It has a responsive mobile site by adopting the off-canvas navigation and by also keeping the key elements – the search box and the instant shopping cart access – on the top space of the homepage.

The navigation menu only appears when the icon is clicked and it goes out of the screen when swiped back to the left. Similarly, the search field appears when the search icon is pressed and the homepage directs to the Shopping Cart page when the bag icon is selected.

fortum and mason mobile app

With their tasteful responsive web design, Fortnum & Mason was able to increase their mobile conversions by 57%.

Fixed VS. Non-Fixed Navigation

Off-canvas navigation has its merits, but it is also a good idea to consider having your navigation menu fixed on your mobile store website. It stays in its place and remains seen whenever your mobile user scrolls down your mobile site.

It is a justified option considering that major ecommerce brands do in fact have fixed navigation menus. Instead of annoyingly going back up the page to find the menu bar, mobile users are only a quick finger movement away from accessing the deeper sections of a mobile site.

Like Sears, you can still stick to an off-canvas navigation menu while keeping the navigation icon fixed on top of the mobile page.

off canvas navigation menu

You can also mirror this ecommerce design inspiration from Crockett & Jones where the menu button is fixed at the top of the homepage and shows the navigation list only when it is expanded.

Crockett and Jones fixed navigation

Great Product Images

The best way to keep your potential customers captivated and motivated to shop from your mobile store (or even on your website) is to have great shots of your products. Whatever you are selling, good imagery aids in your mobile shoppers’ purchase decisions. Make sure that you have the different types of product photos on the different product pages of your mobile store website:

  1. An individual shot of the product. A simple shot of the product against a white background.
  2. A detail shot that focuses on the unique features of the product you are selling. Especially for fashion items, a detail shot of the stitching or the softness of the material is a good aspect to focus on.
  3. A components shot is a product photo that shows all of the products’ individual parts. This is especially applicable for products sold in kits or as a system.
  4. A 360-degree shot is a set of animated product images that lets your potential shoppers see the product in different angles.
  5. A contextual shot is a photo of the product while it is used or worn.

great product images

Always optimize your product images so that it loads quickly on your mobile users’ screens without compromising quality. It takes effort to create a responsive image solution, but it sure does pay off in the end.

Typography

In the name of mobile responsiveness, what can easily turn your mobile users off with your site is when they have to zoom in on your text to be able to read it. When you make ecommerce responsive on mobile, your text should be easy to read and access.

Choose a readable font. There are many types of fonts you can choose from and services like Google Web Fonts can offer you preview options to help you decide easier. Choose your font style wisely because it dramatically affects your users’ perception of your brand. Try not to use too many font types because it can be visually confusing for your users.

Ensure the color of your font is readable too. Content is designed to be read, so ensure sufficient contrast between your text and your site’s background. There are free tools you can use to help you find the best color combinations for your mobile site and assure you that your text and background contrasts strongly with each other.

Choose your font size wisely as well. Some recommend a default font size of at least 16px and 12px for form labels.

Easy-to-click CTAs

The different calls to action on your mobile store website won’t help you increase your conversions if it is not large enough to be pressed on by your user’s finger. Depending on the mobile devices used (i.e. smartphones and tablets) and how it is held (i.e. holding a smartphone with one hand and placing a tablet flat on a table), you need to make sure that your call-to-action buttons are optimized for your users’ fingers.

According to this article, the best mobile touchscreen target size is 57 pixels wide for an index finger and 72 pixels wide for a thumb.

best mobile touchscreen size

A size of 57 pixels allows the index finger to fit comfortably inside the call-to-action button. The edges of the button remain visible when tapped, assuring your mobile users that they were able to hit the button accurately.

On the other hand, the size of 72 pixels makes it generally easier and faster for users to press on the call-to-action button because the size allows the thumb to fit inside the button. The edges are still visible from all angles and there is no need to reorient the thumb to the very tip just to make sure that the button was hit accurately.

Apply these recommended button dimensions for the different primary actions on your mobile site, such as your navigation menu, categories, search, filters, ‘Add to Cart’ buttons, and ‘Pay Now’ buttons. This is also applies for your products’ thumbnail images and for swiping product photos instead of prompting your users to tap left and right arrows.

Product writing

The way you write the content of your mobile store website will definitely have an impact on your conversions. Like in desktop, an aspect of mobile traffic trends is still largely influenced by content.

Aside from writing great copy that sells all throughout your mobile site, a great complement to your mobile shop design is persuasive wording in your call-to-action buttons. Instead of simply labeling as ‘Proceed to Checkout’, you can phrase it as ‘Pay Securely Now’, motivating your mobile customers to proceed to the checkout page with a sense of trust.

And since space is of the essence on a mobile shop design, consider chopping off your long product descriptions with a ‘Read More’ link to only display more content if your visitors want to.

Easy-to-fill-out forms

As it is, checkout forms require time and effort to be filled out properly and it can be even more cumbersome on a mobile device because of the small screen size. Ensure that your checkout forms on your mobile store website are legible and easy to navigate with fingers.

Include only vital fields in your form as you want your customers to be done with the checkout as quickly as possible. Show the progress of your customers on the checkout page also just to let them know how many more steps they are from finishing it.

easy to fill out checkout forms

With more than half of all ecommerce traffic coming from mobile, allowing your customers to check out easily on mobile is critical. Ensure usability and efficiency of your checkout forms at all times.

Loading Time

Nothing can make your mobile store convert more than fast loading time.

Part of a responsive mobile experience is to make sure that your mobile site loads fast. Aside from speed being a ranking factor by Google, mobile users actually expect pages to load as fast, if not faster, on their mobile devices than on their desktop computers.

Did you know that almost half of mobile users expect mobile sites to load in two seconds or less and 40% won’t think twice of abandoning a site if it takes longer than three seconds to load?

Websites accessed on desktops are at a bigger advantage than their mobile versions because of several factors that affect loading speeds. These factors include the type of mobile connection the mobile user has (i.e. 3G and 4G), network latency, the smartphone’s memory, and the CPU.

To optimize your mobile site’s loading time, reduce dependencies. When there are fewer files to download, it means fewer HTTP requests have to be made. Optimize your images’ dimensions too since processing power and memory can be used just to resize hi-res images.

It is essential to implement site speed optimization tips on your site so you can effectively shave unnecessary seconds off to enjoy better conversions.

Examples of Responsive Sites

Below are examples of ecommerce design inspiration you can refer to as you build or re-design your mobile site.

Currys, an online retailer of home electronics and appliance units has an ecommerce responsive design by making the navigation icon, search box, store finder, and instant account and shopping cart access fixed on the top of the page. All five features remain consistent in the website mobile view while trading off its logo as the user scrolls down to prioritize content the user is interested in.

currys example of responsive site

It also features an off-canvas navigation menu that slides on the left side of the page when the navigation icon is pressed, helping the brand maximize precious mobile space.

currys off-canvas navigation menu

Product descriptions and images are optimized and it offers product videos too so users can get to know their products better. CTA buttons are also easy to press on and it leads to a checkout page that has a progress indicator and relatively easy-to-fill-out forms.

currys responsive ecommerce

Another ecommerce design inspiration is Sephora. The navigation icon, logo, search, and instant shopping cart access are fixed on top of the website mobile view. Categories are shown in a scroll bar that goes sideways below the three features, but it is not fixed when the user scrolls down the page. It also features an off-canvas navigation menu.

sephora ecommerce design inspiration

Sephora has product photos that can be zoomed and features long product descriptions that are cut with a ‘more’ link to save mobile space. Call-to-action buttons are large enough to be clicked on accurately and the checkout page also indicates a user’s progress into the 3-step process and the forms have sizable fields for easy completion.

sephora mobile site product page

Going Beyond Responsiveness

Although what we talked about so far is basically making your ecommerce site work properly on mobile devices, consider going beyond responsiveness by having a mobile app for your store.

Data from Nielsen shows that mobile app use accounts for 89% of total mobile media time and the remaining 11% on mobile sites.

nielsen mobile app use statistic

Having a mobile app is one of the mobile commerce trends to watch out for this 2016, so consider having one for your store. A dedicated mobile app for your brand allows you to have your own little corner in your shoppers’ mobile devices where you can send updates about promos and discounts through push notifications. Having a mobile app also allows you to foster your loyalty programs and promote brand recognition, contributing immensely to your conversions.

Bonus Tips

There are five types of mcommerce shoppers according to a 2013 study by the Columbia Business School – the exploiters, the savvys, the price sensitives, the experience seekers, and the traditionalists.

five types of mcommerce shoppers

The Exploiters are mcommerce shoppers who will never purchase a product inside a retail store if they can buy it online for an equal or lower price. They are driven to purchase online not only to save, but to enjoy other benefits of online shopping, such as free shipping, loyalty points, and free return policies.

The Savvys will purchase a product inside a retail store despite knowing they can buy it online at an equal or lower price. They use their mobile devices to compare prices, know more about products they are interested in, and read customer reviews. They interact digitally with a store as they shop, using the ecommerce store’s website, mobile app, or social media channels. They are strategic shoppers, weighing the convenience of home deliveries and the possibility of saving on sales tax before shopping online.

The Price Sensitives are a larger group of exploiters who also never buy products inside a retail store if they know they can purchase it for an equal or lower price online. They are mcommerce shoppers who are highly motivated by price deals and are inclined to purchase in-store by offers of mobile discounts, home deliveries, longer product warranties, and loyalty points.

The Experience Seekers are shoppers who are motivated by the actual retail experience, but will choose to purchase items online only at high discount rates. They engage with brands they like, giving product ratings or their shopping experience online. They purchase products online for convenience, but are just as motivated by special in-store offers, such as exclusive sale events or celebrity appearances in-store.

And lastly, the Traditionalists are shoppers who use their mobile devices in their decision process, but will still go the traditional route of purchasing items in-store.

These groups of people expect a great shopping experience on mobile so take time to identify with them so that when they visit your mobile store website, they have the options they seek and the information is presented to them in a format they are comfortable with. Also this way, you can lower levels of frustration, distrust, and annoyance, among many others, which can hurt your bottom line.

Conclusion

While making ecommerce responsive on mobile is largely an area of design, it is a multidisciplinary task that involves research, development, and the right marketing to make it successful. It also requires a good understanding of what is mcommerce, what the mobile traffic trends are, and how you can position your brand to these changes.

Ensure that you are designing your mobile store well for your customers and timing your content and promotions when they are most likely to be on their devices. Identify your mobile customers too whether they are exploiters, savvys, price sensitives, experience seekers, or traditionalists and give them the information they would most likely seek and present it to them in a format that they will be most comfortable with.

Eliminate as many barriers as you can as you work on the different mobile shop design elements to make your brand convert on mobile and even on your mobile app. For always, all these should be anchored on the successful aspects of mobile design, which are utility and simplicity.

About the Author

John Komarek is the founder of Pixelter. He helped over 63 e-commerce businesses boost their mobile sales by up to 183.5%. He uses advanced UX research, A/B testing, and AI-driven personalization to deliver the results. Learn more about how he can help you grow your sales.

The Ultimate Guide:

29 Steps To Boost Mobile Sales

We’ll share with you proven techniques that helped our customers achieve up to 57.3% boost in mobile sales.

[mc4wp_form id="19816"]

[mc4wp_form id="19736"]