7 Essential Principles for an Ecommerce Responsive Design

Reading Time: 9 minutes

As mobile use continues to grow, the need for an ecommerce responsive design becomes more and more important. In fact, it is no longer a case of asking if a responsive ecommerce site is essential. It is a matter of asking when and how soon can you get started.

In 2015, mobile accounted for more than half of all ecommerce traffic and that number is only expected to grow as the years go by. If your store isn’t optimized yet for mobile devices, you’re definitely losing a lot of potential sales.

In this article, we’ll discuss the seven essential principles to have a responsive ecommerce site and some of the best mobile ecommerce sites we’ve seen so far that you can emulate or take inspiration from.

#1 Tasks should be easy to complete

One of the reasons why people love their mobile devices is the convenience it provides. Combining it with an efficient mobile internet connection, tasks that previously can only be completed on a desktop can now be finished on a smartphone or a tablet computer.

The same principle of convenience also applies and is expected from mobile commerce. For any objective that your visitors want to complete – browse through your product pages, read your blog or get your contact information – make sure that the steps required to fulfill it are few and easy to complete. In fact, 67% of visitors will switch to a different site if there are too many steps to do to get their desired information.

How easy it will be for your visitors to complete a task depends on how your mobile site will be designed. Take time to outline the different steps it will take to complete a particular task. Streamline that task and reduce the number of steps as much as you can. The fewer steps it takes, the better it is for your visitor’s interaction with your mobile site.

Ecommerce Responsive Design

In the example above, you can see that it takes only three steps for a customer to purchase a lamp from searching for it on the site, browsing through the available choices, and finally proceeding to checkout.

Aside from making ecommerce tasks easy to complete, ensure that your mobile site loads fast to facilitate its quick completion. 40% of mobile shoppers will wait no more than three seconds before abandoning a site so meet the high expectations by having a robust technical backend. Regularly check your mobile site’s load time, study your analytics report and regularly come up with recommendations to implement that can improve your site speed.

#2 Navigation and exploration must be a breeze

Ensure a fantastic mobile shopping experience for your visitors by making it easy to navigate and explore your site.

From our essential guide on ecommerce responsive design, we discussed off-canvas navigation, which basically takes advantage of the “off the screen” space to keep the navigation menu and the different design elements hidden until a large screen allows it to be visible. We also discussed the pros and cons of having a fixed and non-fixed navigation on mobile sites. Take time to study each navigation types to know which one works best for you.

Keep categories clear and user-friendly

A good way to ensure that your mobile site is easy to navigate and explore is to make your menu categories clear and user-friendly. Organize and label them accordingly so your visitors won’t spend time figuring out what to do with them. Making categories clear is essential especially if your visitors are using it after exhausting their options via your site’s search feature.

Keep categories clear and user-friendly

Like REI, its categories are labeled according to the outdoor activity that a visitor wants to participate in. This ensures not only an easy and clear exploration of the site, but it is also one way to ensure that categories do not overlap with one another.

Make the search bar prominent

The search bar is an essential feature of any ecommerce site with 30% of customers using it to look up products. Aside from emphasizing its presence on your mobile site, make sure that it follows your visitors wherever they are on your site.

Make the search bar prominent

Like in the example above, the search bar keeps its position regardless if the customer is on the homepage or on different pages of the mobile site.

Back button should be functional

Allow your visitors to go one step back so they won’t be forced to start any transaction from the home screen. This can be frustrating on the part of your visitors especially if they have entered a generous amount of data already and are in the deeper sections of your site. This can also push your conversions down if not functional. Have a way to save entered data to prevent any frustration.

#3 Search should be helpful and effective

It’s not enough that the search bar is prominently displayed on your mobile site. It has to be effective and truly useful so your visitors will find what they need.

There are plenty of ways to maximize the value of your search box and you can start by using effective search indexing.

Search indexing facilitates a fast and accurate retrieval of information based on the keywords and phrases collected and stored in your data. Aside from speeding up the search process for your visitors, it also provides some helpful features, such as auto correcting spelling errors, predicting texts, and recognizing root words. It also reduces the likelihood of errors, leading to helpful search results and your visitors focused more on making a conversion.

search indexing

Another way to make search bars effective and useful is to provide filtering and sorting options.

It can be overwhelming to see irrelevant search results. Allow your visitors to filter and sort through their options so they can intelligently narrow and organize them. This also eliminates the need to extensively scroll down a page as mobile device screens do not have the luxury of space.

#4 Make shopping cart manageable

Visitors who are already on their shopping carts are one step closer to making a sale, which is why it is important to make it easy for them to manage and make changes to their orders before proceeding to checkout. The task of making the shopping cart manageable on mobile becomes doubly crucial because of the limited space.

Make shopping cart manageable

Make it easy to add and remove products in the shopping cart. Similar to the example above, the negative and plus buttons allow visitors to easily modify the quantity of their orders and the trash can symbol allows them to remove products they no longer want to buy.

It is important that any changes on the shopping cart refreshes immediately to prevent any apprehensions if changes were successfully applied or not.

The CTA buttons on the shopping cart page, such as ‘Proceed to Checkout’ or ‘Shop Now’ should be easy to click as well. We recently wrote about CTA buttons on mobile devices and ideally, it should have a dimension of 57 pixels for an index finger and 72 pixels for a thumb for usability.

#5 Forms should be quick and easy to complete

Forms are critical in any ecommerce transaction. Especially on mobile where space is of the essence, forms should be quick and easy to complete. Make it compatible with how users will enter their details. Form fields should not be obstructed by interface elements, such as the keyboard, and as soon as certain fields are accomplished, the succeeding fields should advance up the screen.

Handy features, such as auto-populate and auto-capitalization, are helpful also in speeding up the form completion process.

Keep the form simple and straightforward. Limit the number of fields to the most essential ones and explain it so your visitors understand what is required from them. For any required fields, put an asterisk so your potential customers won’t miss filling it up.

For any errors encountered during the completion of the form, inform your visitors in real-time about it so they can fix it immediately. This is a lot different, and even disruptive, if you inform your visitors of an error they committed after they have submitted the form. Clarify why a certain form field is not validated to quickly appease any frustration.

Finally, match the keyboard with the type of input required. Make the text keyboard appear for text entries and the numeric keyboard for fields asking for phone numbers and credit card details.

It also helps to have in-context information available to assist users as they move through your forms. Especially for fields asking for dates, you can have a calendar to appear to eliminate the need for them to leave the form and check the calendar on their device.

#6 Label all visual information

Icons for navigation, search, wishlist, and shopping cart may not be as universally understood as most ecommerce business owners expect it to be.

Label all visual information

Avoid any possible confusion and misinterpretation by providing labels for these icons. After all, it is more likely to be used too when it is labeled and when people are very sure of what it means.

Make sure to provide feedback after a significant action is completed. Especially after an item is added to a shopping cart or if an order is successfully submitted for processing, it is important to confirm the action with the correct feedback. It eliminates the possibility of your customers questioning whether the action they made has been processed or not.

Similar to the example below, confirm the addition of products in the shopping cart with a message popup after the ‘Add to Cart’ button is clicked on. At the same time, update the shopping cart icon with the total number of contents currently inside the cart.

shopping cart icon updated

Additionally, ask for permissions whenever you need access to certain information about your visitors. For example, when requesting for their current location, ask for access in context and communicate the value of giving you their permission. After all, your potential customers are more likely to grant you access if it is relevant to the task at hand.

ask for permissions on mobile

#7 Design should be consistent across devices

Mobile sites that have a responsive web design use CSS3 media queries that allow it to display the same content to all its mobile users and automatically adapt to the size of the user’s device.

Responsive web design means an ecommerce store uses the same URL and the same code whether the user is on a desktop, a smartphone or a tablet. It is beneficial for business owners like you because it means there’s only one version of your site that you need to maintain. A good way to notice if a site is using two versions is if its desktop URL is www.site.com and its mobile version is m.site.com.

Having a responsive web design is a great way to optimize the site experience across all devices without creating multiple websites. Fortnum & Mason, a high-end department store, was able to increase their mobile conversions by 57% with a responsive web design.

design consistent across devices

Another benefit of having a responsive web design is it keeps your branding the same across different touchpoints. When visitors are familiar with your brand on desktop, a similar design greeting them on mobile will help foster brand affinity and even create loyalty.

Some of the best mobile ecommerce sites

Although your mobile site is not the first in your industry, there are a lot of inspiration and lessons you can get from existing mobile ecommerce sites.

Pottery Barn Kids

mobile ecommerce sites pottery barn kids

Pottery Barn Kids is a great example of an ecommerce responsive design. In the images below, you will see that it follows the #1 principle – Tasks should be easy to complete. After looking up ‘blankets’ on the search box, it only takes two more steps to arrive at the shopping cart page.

ecommerce responsive design pages

The mobile site’s homepage also follows principle #6 – Label all visual information. Navigation icon to start shopping is accordingly labeled with ‘Shop’. The store locator symbol is labeled with ‘Stores’ and the shopping cart symbol is properly labeled with ‘Cart’.

ecommerce responsive design with labels

H&M

Mobile sites that follow the #2 principle – Navigation and exploration must be a breeze – definitely have bigger chances of making a sale and converting more visitors into customers. Right on the homepage, H&M shows its customers the different categories that they can shop in with each category large enough and easy to click on. Customers can also pull the off-canvas navigation to view the different categories they can start with.

ecommerce responsive design h&m

The categorization of the products is definitely clear and user-friendly. Users won’t also have a hard time pressing on the links with their fingers because of the links’ ample size and space.

Threadless

Threadless is a good example of a responsive ecommerce site. The product images on its different pages are rich and the different buttons to go into the deeper sections of the site are all easy to click on. Another remarkable thing about it is its search feature that truly fits with our #3 principle.

It is helpful because of the different ways to ways to sort out search results (by relevance, popularity and date printed) and the different filters (department, availability, and category) that can be applied to refine it.

ecommerce responsive design threadless

It’s important that even on mobile devices, the same ease of sorting and applying filters on search results is available to ensure a smooth transaction process for customers.

Zalora

For their customers who are on the go, Zalora promises a smooth checkout process with easy-to-fill-out forms on their mobile site. Aside from the three-step checkout process, the form length is short and the number of form fields is substantial, living up well to principle #5.

The appropriate keyboard also appears depending on the type of information required in the form field.

ecommerce responsive design zalora

Aside from a seamless form completion process, it also offers an easy-to-manage shopping cart. Quantity and size can be modified, an item can be removed completely, and at the same time, visitors can click on the back button without losing any of the data they entered so far.

zalora app easy checkout

Lush

The design of Lush’s website is clearly optimized for small mobile screens. Aside from its signature vibrant product photos used all over the homepage and on its specific product pages, one of its practical features is its predictive search box.

ecommerce responsive design lush

The search results not only cover products where the search term fits, but also on the relevant articles written about the search term on its company blog.

Conclusion

The world of ecommerce is rapidly going mobile. Make sure that your visitors are not missing out on your brand by having an ecommerce responsive design.

Keep the following responsive ecommerce principles in mind:

  1. Make tasks easy to accomplish. Simplify steps again and again until it can no longer be refined.
  2. Your mobile site should be easy to navigate and explore. The categories and search bar should be well-optimized even on a small screen size.
  3. Ensure that your search bar feature yields helpful results. The functions of predictive text, auto-correct, and auto-spelling will be very handy for your users.
  4. Make it easy for your customers to modify their orders before proceeding to checkout.
  5. Forms must be quick, simple, and easy to fill out.
  6. Label all visual information so your customers can carry on with your site without confusion and any misinterpretation.
  7. Use the right site architecture so you only manage one version of your site across all devices.

Let these principles guide you whether you are building your mobile site from scratch or simply doing a makeover. Simplicity and consistency are essential to ensure a mobile experience for your customers like no other.

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"]