< Back to Blog

Effective Multi-platform Ecommerce

Our aim, when we decided to produce our series of 12 Ecommerce Website and Development Papers in 2012, was to cover some of the most important trends, methodologies and technologies behind successful ecommerce as we see it.

Part one covered Design and Development Practices and part two focussed on Local Search and SEO. Now, for part three.

Grab your smartphone or tablet computer, note how smoothly the Vu website design adapts to either device, and enjoy our friendly but informative exposition of the devices and techniques behind effective multi-platform ecommerce.

In last month’s paper on the Power of Local Search, we touched on the importance of mobile in ecommerce, and it cannot be overstated. In January 2012, half the population of the UK owned a smartphone [1] and 14% of people reported using a tablet computer to make a purchase over the festive period [2].

Today’s consumers are always connected and expect to be able to get what they need wherever and whenever they like. Having an ecommerce website that is accessible from a desktop or laptop computer just isn’t enough anymore. 10% of all ecommerce traffic is mobile [4] so to maximise sales and ROI, an ecommerce website must support tablets and smartphones. The following aspects of an ecommerce website should be accessible and consistent across devices:

Account Tools such as Log in and Register

Users should be able to register, log in and deal with forgotten passwords as easily and securely from their smartphone or tablet as they would from their desktop. Asking users to register separately because the functionality was not integrated into the mobile site is certain to lead to missed opportunities.

Products and Services

The ability to find out about products and services on-the-go is what has made mobile ecommerce so popular. A carefully developed system can display the same information, formatted appropriately to the capabilities of the device. This saves development costs and gives consumers a consistent user experience.

Search

Search is the most common way of finding products to purchase online and, increasingly, to research products in-store. The best search functions remember search terms and serve them up to users whether accessing the site from a mobile or desktop. Systems can be designed to make search less resource intensive by using the same search function across devices and optimising search terms.

Shopping Cart

The heart of any ecommerce solution, the user account’s shopping cart details must be shared across devices so that users can always see what they have added. Allowing mobile customers to add products in-store, before completing the purchase from home or from a competitor’s premises following comparison, could be the difference between getting the sale or losing out to another online retailer.

Checkout

A cross-platform checkout process will allow entry or selection from saved shipping and billing addresses and saved payment methods. If the retailer has integrated physical stores with its ecommerce system, then the mobile device should be able to show product availability in the user’s local store and accept orders.

User Experience

The user’s experience of the ecommerce site must be as consistent as possible across devices. It might be that functionality is added or removed according to the capability of the device in question, but the underlying ecommerce functionality should be shared between devices, and the overall theme and feel of the site should be similar.

Adaptive Ecommerce Website Design

A great way to ensure a smooth and consistent experience between devices is to approach the design of your ecommerce website with multi-platform use in mind from the very start.

An adaptive design, flexible to the device on which it is being used, will provide a more consistent user experience and take less time to develop than separate solutions or reverse-engineered bolt-ons.

ecommerce website desigbThis kind of adaptive design and development is one of the greatest challenges we face, and a big part of why we love what we do. Best practices are evolving constantly and how you take advantage of new technologies can make or break a solution.

Take HTML5, for example. It is the future of web-based interactive content and cross-browser compatibility; effortlessly supporting multimedia playback without the use of third-party plugins like Flash, which many mobile and tablet browsers do not support [5].

Great, right? Definitely! But, as always, not everyone is reading from the same page and you have to take care of late adopters or corporate users who might be stuck with older browser technology.

There are quirks to watch out for in the way browsers deal with developing standards like HTML5. Older browsers simply don’t support the new technologies that could be making the web a better place, and some new browsers are playing catch up as they implement HTML5 and CSS3 standards [6].

So you carefully consider which aspects of the technology will add to the users’ experience, and when it’s appropriate to use them, which often leads you to designs based on Graceful Degradation or Progressive Enhancement [7]. You enable functionality according to platform capabilities so the user always gets the best from the website.

Another favourite here at Vu, as developers of adaptive, mobile-enabled ecommerce platforms, is the adaptive CSS grid. This solution is based on the idea that designs should be fluid and adapt to fit the user’s screen size and orientation. Designing with an adaptive CSS grid allows our designs to fit an optimum browser-window size, and as the window changes size or shape, the design adapts and content is rearranged so it is always readable.

For smartphone screens, media queries are used to serve content up in a single column allowing the user to scroll and easily navigate content.

Perhaps you are reading this from your desktop? To see a CSS grid in action, just change your browser window size, or view the Vu Online site on your smartphone. The same content, adapted to the viewing medium.

The beauty of all of this is that websites developed in this way increase the profitability of your ecommerce business, which results in a steeper ROI. It goes beyond the obvious – that users prefer to buy products and services from well designed, easy-to-use websites they can use anywhere – and considers the device-optimisation of website experience as a major factor in the design and development process. Google assess websites’ mobile optimisation in this way and considers mobile optimisation as a significant factor in their PPC quality scores [8], saying that “mobile optimised websites …drive more traffic, at a lower cost.”

Mobile Website Design

Adaptive design is great for smaller projects aiming to take advantage of the growing mobile market without the costs associated with bespoke mobile solutions; but there are a number of advantages to designing specifically for mobile and tablet devices:

  • Improved touch screen interaction. Mobile sites can make the most of touch screen interfaces in a way that desktop sites currently cannot.
  • Mobile optimised content can improve performance because nothing is downloaded and not displayed as in adaptive sites.
  • Site design can be more closely suited to the needs of the mobile user, whose requirements can be narrower than the desktop user, with more focussed information and faster routes to purchase.

Mobile Payment

Mobile payment is growing in use and you will see it gaining popularity in the coming months. Square, the mobile payments platform launched last year by Twitter founder Jack Dorsey, allows users to swipe their card through an attachment plugged into a smartphone. The technology is used by New York taxi cabs [9] and, unsurprisingly when you consider $4 billion revenues last year, there is already heavyweight competition in the form of PayPal Here, which will launch on iOS and Android in North America, Hong Kong and Australia next month.

Another technology enabling mobile payment, among other things, is NFC, a wireless technology which allows any smartphone and similar radio-enabled device to communicate over short distances. Google Wallet uses this technology to allow consumers to store credit card information in a virtual wallet and use their NFC enabled device to make payments, through MasterCard’s tap-and-go PayPass system, for example [10].

What Does this all Mean for Your Ecommerce Business?

To make the most of the opportunities presented by online business, you must ensure your ecommerce website is accessible for everyone, whatever device they favour. This will ensure the steepest ROI and the most positive effect on your bottom-line.

The ideal is to build your mobile strategy into your website’s design from the beginning and work with a website design and development team who understands mobile commerce, the best technologies to achieve it, and have the expertise to update your site as technology progresses, to keep you ahead of your competitors, and with your consumers.

In next month’s instalment of the 12 Ecommerce Website Design & Development White Papers in 2012 we focus on Search Engine Optimisation Strategies and Tactics for Ecommerce.

References

[1] Screenpages, mobile usage of ecommerce websites: http://goo.gl/7tyY7

[2] Econsultancy, tablet purchases over Christmas: http://goo.gl/GViyk

[3] Ecommerce facts, Rise of Mobile Ecommerce http://goo.gl/rFCvg

[4] Screenpages, mobile usage of ecommerce websites: http://goo.gl/7tyY7

[5] GigaOm, Why Flash didn’t work out on Mobile Devices http://goo.gl/e2ZUO

[6] CNet, HTML5 Growing Pains http://goo.gl/vEvxu

[7] Practical Ecommerce, Progressive Enhancement Meets Graceful Degradation http://goo.gl/rc3Bm

[8] Google Mobile Heads, Update on Mobile Optimisation in Ads http://goo.gl/zKuW9

[9] Marketing Week, PayPal Launches rival mobile payment service to Square http://goo.gl/u124w

[10] TechCrunch, Google Wallet Review http://goo.gl/lKWvI