Here’s a Salmon front-end authored post, that aims to highlight 10 important front-end considerations that should be made when developing mobile eCommerce solutions.
1. Make a beeline for the streamlined – With unpredictable 3G connectivity and download speed, it’s important that pages use as little bandwidth as possible to ensure the customer is not waiting ages for a page to load. The ways this can be achieved are:
- Use CSS3 properties instead of images - where possible use CSS3 properties instead of images, to reduce the number of images that need to be downloaded. We did this with the buttons on Halfords’ mobile optimised site. If the browser doesn’t support border-radius it gracefully degrades to square corners.
- Use image sprites – Use image sprites to reduce the number of HTTP requests. Reducing the number of HTTP requests can make a web page load much faster, and we all know that when it comes to enterprise eCommerce online revenue – every millisecond counts. Further to this, WDL [Web Design Ledger] has a useful how-to Sprite guide)
- Optimize your images - Use 8-bit PNGs over GIFs to reduce the file size.
- Avoid inline JavaScript and CSS – Developers should avoid inline JavaScript and CSS as much as possible, as this increases the size of the HTML file, and thus could prevent it from being cached by the browser. Instead, keep your JavaScript and CSS in an external file.
2. Do not rely on JavaScript – Not all mobile devices (currently) support JavaScript, so allow users to navigate your mobile site without it, and only use it to enhance the user experience. On Halfords’ mobile optimised site (more about the launch of this solution can be found here), our main use of JavaScript was for showing and hiding the product description and customer reviews on the Product Details pages – so as to reduce the amount of scrolling required to get to the bottom of the page.

3. Keep it semantic – If your HTML is structured semantically, any users of older devices with little, if any CSS support, will still be able to use your site.
4. Get both ‘Size’ and ‘Spacing’ correct – With different mobile devices offering different ways of navigating a web page (touchscreen, trackball, directional pad, etc.), it’s essential that all users have an easy time clicking/selecting the buttons and links they want. This means ensuring click-able items are both ‘big’ enough and that there is enough ‘space’ between links to reduce the likelihood of a customer clicking on the wrong link. This can be seen in the header on Halfords’ mobile site and in the lists of products and categories. Also bear in mind that a top / down approach to the layout (as opposed to top/down & across) is more usable.
5. Make forms as easy to fill out as possible. Completing forms is arduous and difficult on mobile devices. This means reducing the number of fields to what is absolutely essential is worth debating. But also ensure that the customer can easily see the label of the field they are on if the mobile device automatically zooms in on the current field. We were able to achieve this on Halfords’ mobile site by placing the labels above their respective fields. We also made use of the new tel and email HTML5 input types to provide (on supporting devices) users with an onscreen keyboard specific to that type of data.
6. Liquefy your layout – With each device having its own screen resolution, some of which allow you to change orientation from portrait to landscape, it’s important that your pages not only work in the space available, but also take advantage of any extra space available after an orientation toggle.

7. Remember ‘Designing for mobile’ isn’t the same as ‘Designing for mobile phones‘ - Mobile phones, and in particular smart-phones, are rapidly becoming mainstream gadgets. But that’s half the story. Consider other mobile and pervasive devices as part of your mobile strategy. The iPad is already popular but new Android powered tablets such as the Motorola Zoom (which was hailed as 2011′s must have gadget – see Engadgets Best of CES2011 post) raise the mobility stakes considerably higher. We haven’t scratched the surface of where in-store pervasive devices are going in 2011 and beyond either.
8. Consider providing telephone assistance every step of the way – We all make mistakes or have questions when buying items online. As FAQ’s or very detailed searches are harder to make and drill into on a mobile device, consider a regular ‘Click-to-Call’ call-out as part of the page design, or a ‘Find your Nearest Store’ capability, in particular if you have already integrated your sales channels effectively.
9. (Re)Consider ‘font’ and ‘colour’ – Because phones are used in areas where laptops and PC’s are not (in highly reflective or poorly lit circumstances, perhaps), be aware that contrast is an important consideration to make. Additionally bear in mind that customers ‘scan-read’ heavily on mobile phones, so avoid upper case (WHICH, BASED ON RESEARCH FINDINGS IS HARDER TO READ) wherever possible, but particularly on product details pages or during the check-out process.
10. Think ‘Cross-Channel’ – Despite the fact we’d all like to close a sales immediately via mobile devices, chances are its not going to happen all of the time. This can be for many reasons, most notably because consumer confidence in mobile payment is still low and because the mobile channel is simply a single component of a complex cross-channel engagement cycle. As a result you should make the interaction between channels simple and seamless. We’ve already mentioned potentially adding a prominent ‘Click-to-Call’ button, but additionally make ‘Find your Nearest Store’, ‘Stock Level’ and ‘Reserve & Collect’ intrinsic aspects of appropriate page layouts to optimise overall conversion rates.

11. *Bonus* -> Leverage baked-in Social Networking – Bear in mind that with mobile devices comes built-in Social Networking opportunity. Consider optimising pages to allow shoppers to ‘Share’, ‘Comment’ or ‘Like’ products as readily as possible.
Have we missed anything? Hopefully these front-end focused points highlight the salient front-end considerations for mobile eCommerce today but please share any additional ideas; we’d love to hear your comments.
Finally, confused about the opportunity m-commerce brings? You may find this worth reading (subscription required) “Mobile Statistics – An eEconsulting Report “
*Coming soon is an Upstream post about “Hybrid Apps” – discussing specifically how Hybrid Apps can help merchants leverage their central commerce strategy, whilst also harnessing the technology inside today’s leading smart phones.