One look at Google Trends and you can quickly see that responsive design is super-hot right now. It has actually become an effective solution for many websites to serve a mobile friendly experience to their users. It was even recommended by Google this summer as the optimal way to serve a website to mobile users. But what about responsive design for mobile ecommerce? When we talk about taking all of the product pages and payment checkout processes of an online shop and displaying them in a sales-maximizing mobile shopping experience, is responsive design the best solution? And if so, how can you implement responsive design in the best possible way for your online shop?

The Mobile Shopping Experience

The primary objective of any online shopping website is to boost sales by providing a site navigation and checkout process that lets customers find/discover and buy what they want as quickly and easily as possible. Therefore, the obvious question online store owners have to ask themselves is what type of experience they should offer to mobile customers in order to achieve this objective.

The way online shops present their products and checkout process can have a huge impact on sales. It is essential that product lists, search filters and the mobile payment process are well-managed to get mobile customers to complete a purchase.

Potential advantages with responsive design

• SEO:

  If you are concerned about your online shop's ranking in Google search results, it's good to know that Google actually recommends that websites use responsive design. Google recommends responsive because having one URL for each page of your online shop across all devices makes it easier for customers to interact with your site. Furthermore, using one url prevents redirects which reduce loading time, and it allows Google to crawl your website faster.

  Implementation tips: As stated in Google's Webmaster Central Blog, you should mark up your online shop's stylesheets to have a liquid layout to automatically resize to fit the screens of mobile devices. You should also use the viewport meta element in combination with media queries to make your pages more readable on different sized devices and at rotated angles on these devices.

  Site that does this well: Burton.com is an online shop that sells snowboards. Burton has one responsive url and ranks #1 in the U.S. for the search term "snowboard" on both mobile and desktop devices.

• Good timing:

  If you have not yet launched your online shop and decide to go with the mobile first approach, you can have your website easily designed for responsive from the beginning to efficiently display products for desktop and mobile site visitors. This allows you to avoid the often complex time- and money-costing process of reconstructing several existing product pages and images for proper responsive display.

  Implementation tips: Determine what features will be available on all devices and make the mobile version the default configuration. Make mobile styling your default styling as opposed to desktop styling. If you have conditional features which load depending on device screen size, in the beginning stages, only include the very basic features that you need for all browsers. Your initial focus should be on creating the basic online shopping experience that allows users to get things done not matter what device they are using.

  Site that does this well: One look at SkinnyTies.com on your mobile device and you can quickly tell that they used a mobile-first approach when designing their website. Their layout and mobile friendly touch elements allow for easy navigation of their online shop from mobile devices.

  

• Simple product lists:

  If you offer a small range of products in a few categories and your products contain short and simple descriptions, it should be easy to display them effectively to mobile customers with responsive design. When your desktop site is appropriately re-sized for mobile display, customers aren't overburdened with complex category lists and search results and long descriptions which look bad on mobile screens.

  Implementation tips: Make a mobile-friendly product filtering system by displaying product lists in different columns on large viewports that show or fold into a scrollable list depending on screen sizes.

  Site that does this well: The product display of Kershaw Knives is a perfect example of having products in different columns which fold conveniently into a scrollable display on mobile devices.

  

• Single-page checkout:

  If you have a single-page checkout process for your online shop, it will be easier to make this process responsive in a way that won’t leave mobile customers with the perception of a lengthy checkout process.

  Implementation tips: Use an accordion form because it fits your entire checkout process into one page, hiding and showing checkout sections and fields as your customer interacts with them. For HTML markup, CSS, and Javascript instructions, there is a nice tutorial which also includes a live demo of a responsive accordion form.

  Site that does this well: Mulberry, a luxury retail store, presents all checkout sections in drop-down fields in order to fit the whole process conveniently on one page.

  

Potential disadvantages with responsive design

• SEO:

  Responsive is preferred by Google, but not if having a separate mobile website provides a better user experience. If your desktop site prominently displays products and categories that mobile shoppers are not searching for, responsive design is not your best choice for mobile SEO. If you go with responsive design simply because it's recommended by Google, you risk greatly underachieving your mobile sales objective. Remember, you are not building a mobile shop for Google, you are building it for mobile customers.

• Bad timing:

  If you already have an online shop that is relatively complex, implementing responsive design can cost a lot of time and money. It's likely that your website will have to be completely reconstructed to ensure that it meets the needs of users on multiple devices.

• Complex product lists:

  Let's say your online shop offers a large variety of products with long descriptions and reviews. By going responsive you potentially risk presenting on-the-go customers with too much information on smaller screens that could impair their shopping experience.

  As an online store owner you have to ask yourself if it makes sense to keep your product lists and descriptions completely consistent with the desktop site or make them more concise to maximize mobile sales.

• Product display:

  Do you currently make your most popular products more prominent on your website to increase sales? Are you sure that these will also be the most interesting products for your smartphone and tablet customers? If you know that you can achieve more mobile sales by displaying different products that are more relevant to your mobile customers, responsive design is not the recommended option.

  Additionally, you should ask yourself if it makes sense to offer the same product browsing experience to your desktop and mobile customers. For example, would it be more efficient for your smartphone users to discover related products one at a time by swiping through a list from left to right? If you determine that this experience for mobile users should be different from the one offered to desktop users, responsive design is not the way to go.

• Checkout process:

  If you currently have a multi-page checkout process for your online shop, this could prove to be the most challenging part of moving to responsive design. In order to offer the best mobile checkout experience, you will have to completely reconstruct the checkout process for all devices. Updating all of the coding, forms, and individual elements of the checkout process to work efficiently for desktop and mobile users can be very expensive and time-consuming.

  When deciding if you should go responsive, you should ask yourself if providing your desktop checkout process to your on-the-go mobile customers is going to help you reduce mobile shopping cart abandonment and increase sales. If the answer is no, you shouldn't use responsive design.

  You also need to take into account that even though the m-commerce industry is growing rapidly, it's still new for many online shoppers, and recent statistics show that over half of mobile shoppers abandon their shopping carts because they don't feel the process is secure.

M-Commerce Flowchart

When listing the previously mentioned potential advantages and disadvantages of responsive design for mobile commerce, I presented multiple questions for online shops to consider in order to make a more informed decision about whether to use responsive design. To make that decision process easier, I have created the following flowchart:

Conclusion

You don't really need to look at Google Trends to know that responsive design is popular. It has been very useful in helping many websites effectively serve their mobile users, but it would be unfortunate for online shops to jump on this bandwagon simply because that's what is hot right now. In the end, an online store owner should not make a decision on responsive web design without resolving the question: Is responsive design the best solution for me to provide a mobile shopping experience that maximizes sales?

You may have noticed that I didn't write much at all in this post about having a separate mobile website as an alternative to responsive design for mobile commerce, but if you want to know more, I invite you to check out a white paper we recently released covering this very topic in detail.