Delivering an enhanced user experience on responsive eCommerce sites

We are all addicted to our mobile phones so it should come as no surprise that mobile internet use continues to supersede traditional desktop browsing. This is why the need for a multi device solution is crucial for brands, venues and retailers of all sizes. This is even more important for brands that sell online and we take a very specific approach to the development of Responsive eCommerce solutions.

Responsive eCommerce sites can help drive mobile sales by providing users with better user experience. (Hint – No More Pinch and Zoom to view a product image!) Using the recently launched Orlebar Brown as an example, we can see a clear continuity between the experience of the website across devices. The site is agile and adapts to the viewpoint of the user – not requiring users to adapt to the site! We have seen some great results since the relaunch – looking quickly at a sample between April 2013 and April 2014, we’ve seen that mobile sessions have seen an increase of 159% whilst revenue generated through mobile visitors has increased by 95% since the relaunch of the site.

At Propeller, we have always been a strong advocate for Responsive Web Design and have been advocated building this way since the very beginning of the technology in order to provide a rich, and bespoke user experience, regardless of a user’s device. Below are just a few things which we believe to be essential in delivering a technically sound and user enriching, responsive, eCommerce site.

The utilisation of off canvas menus.

The utilisation of off canvas menus for filtering products and serving menus can provide an un-intrusive design solution which also gives the user a native app feel. As opposed to traditional drop down filters which consume a large percentage of a users’ screen, off canvas menus can provide evidence of elements being loaded in the background letting the user know that their request is being processed.

Additionally, off canvas menus are bang on trend and are aesthetically pleasing as well as functional! Increasing page load speeds.

One of the main worries regarding responsive eCommerce sites is page load time. When viewing websites on your mobile device, you quite often rely on your mobile connection rather than a significantly quicker wi-fi connection. As highlighted in Smashing Magazine in 2013, 74% of mobile visitors will leave a website if it takes longer than five seconds to load. Large amounts of products being loaded, each with their own image and description eventually builds up your page size and waiting around for a page to load when your casually browsing on the go can be a pain… but fear not! There are viable solutions which can improve the performance of your site overall. Procedural loading or, lazy loading is a technique which only loads content which is in view. Additionally it then loads in content just below the fold as you scroll. In doing so, the initial page load speed is significantly reduced. The same principles can be incorporated into other elements of your site such as carousels.

Why load all of the images if they are not in view when you can procedurally load them, once they are needed?

Whilst some believe that responsive websites generally encompass a one for all kind of ethic, this doesn’t need to include its assets! Why load an image which is 1024 pixels wide if your screen size is only 320 pixels wide? At Propeller we now utilise and contribute to, Imager.js, “an alternative solution to the issue of how to handle responsive image loading, created by developers at BBC News.” Using placeholder elements, Imager serves up the the best image size/quality suited to the current viewport. In doing so, unnecessarily big images are bypassed in order to increase page load times thus improving a users experience and sparing them long waits when browsing sites!

Streamlining checkout processes.

In order to turn visits into sales, a seamless checkout experience is crucial! The user should always have easy access to the basket and it is just common sense to ensure that your most popular products are visible within first glance of the main product category page. A great site should encourage sales through simple but helpful tips that allow users to quickly find what they are looking for and checkout.

Encouraging an easy login/account creation process is a great way to ensure repeat customers can fly through checkout even faster.

Saved billing and delivery addresses are a great way to leap between basket and payment.

What does the future hold?

With clients trying to blur the boundaries between shop and screen, features such as look books, style advisers and product customisation will become even more crucial to the mobile shopping experience.

The challenge of creating intuitive and engaging experiences which can be enjoyed on all devices is one which should be relished by designers and developers alike.

RWD is not just an art, it is a science right through from design, to development. Though its benefits are evident and its flaws possible, these can only be achieved and overcome through a concise design mapped out by a users intended journey, and of course, seamless execution.