Best Practice for Responsive Ecommerce Design

Ready to get started? Call us on 0118 380 0201.

Start talking to us today

The latest buzz word in the world of ecommerce, responsive design has taken off in 2014, making it one of the most valuable tools in an e-retailers arsenal. An impressive ecommerce solution, responsive ecommerce design automatically adapts the information displayed according to the device it is being viewed on.

What Have We Learnt About Responsive Design?

Succeeding mobile optimisation, responsive design is now considered best practice for any online retailer looking to 'future-proof' their ecommerce offering. At present, only a small percentage of online retailers are using responsive designs. Leading the market is Currys, with one of the most successful ecommerce solutions in terms of adapting to any device. But, what can we learn for this?

Ethan Marcotte, a web developer credited with coining the term 'responsive web design', explains that there are three key principles to successful responsive ecommerce design:

  • Fluid Girds – percentage based columns that aide in site design
  • Flexible Media – images, videos and content that scale up and down, to fit the space they are designed for
  • Media Queries – telling the browser at what point it needs to rearrange or modify the elements on the page

With these three principles in place, you will have the core design of a responsive ecommerce solution.

Best Practice Guide For Responsive Ecommerce

  • Meeting Consumer Expectations – To create a successful responsive ecommerce solution you need to understand what your customers want and expect for their mobile shopping experience. It is important not to just create designs for all desktop and mobile devices because the option is available. Ecommerce solutions are fairly complex with lots of features, functionality and payment software. Don't just assume that mobile users want the same features as desktop consumers.
  • Clear Purchase Paths – 30% of mobile shoppers abandon a transaction if a site is not optimised for mobile. Designing a site that responds to various device sizes is relatively simple; ensuring that the purchase path is not affected is difficult. In a responsive project, it is important to make sure that the shopping cart and checkout flow work on any device. In some ways, it doesn't really matter about the content on these pages, providing that the user experience is excellent.
  • Not All Screens Are Equal – Different devices and screen sizes can behave differently. It is worth pointing out that you should go for responsive ecommerce design that is optimised from the mobile up. This will ensure that all features will work effectively on the smallest screen size, as well as a desktop. Thereafter, look at your traffic and segment conversions into those from mobile, tablet and desktop PCs. In 2013, tablet spend increase by 163% and mobile 87%, highlighting that most users will prefer to buy on a tablet over a mobile.

Why Build Your Responsive Ecommerce Solution With Advansys?

Experts in building high conversion ecommerce websites, we have now used this knowledge to develop our very own responsive solution. Optimised from mobile up, using Boostrap technology developed by Twitter, we have one of the fastest 'mobile first' ecommerce solutions on the market.

If you are interested in designing a responsive ecommerce solution for your online store, call today on 0845 838 2700 or email

Enjoyed this article? Share on social!
Back To Top