10 important front-end considerations when developing mobile eCommerce solutions

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 streamlinedWith 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 JavaScriptNot 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.

Halfords Product Details

3. Keep it semanticIf 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’ correctWith 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.

Halfords Checkout

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 wayWe 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.

Halfords Find a Store

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.

Share this content with:

How popular is Social Networking?

Here is a decent infographic (by TestKing) that illustrates just how popular social networking is.

We’ve recently blogged about how huge a role f-commerce will play in a merchants Retail Strategy, and how Android and iPhone Apps are revolutionising traditional offline buying decisions, and we’ve also discussed fully transactional mobile eCommerce payment.

But every so often it is well worth taking a step back, and looking at the broader social networking statistics. Wow.

Infographic: Everything You Need to Know About Social Networks

Everything You Need to Know About Social Networks by Tech King

Share this content with:

9 areas to watch at the front-end of eCommerce in 2011

Business Man Looking

Here’s 9 areas to watch (and perhaps react to) in relation to front-end eCommerce website development initiatives during 2011. It is by no means exhaustive, but reflects a few of the overriding trends and movements that will impact front-end development.

We’ve deliberately steered away from merely ‘design’ specific trends.  For those you could go here, it’s a pretty good list with a little overlap on ours.  For digital marketing trends look no further than Ashley Friedlein’s list on eConsultancy.com, and for the mega-trends out there take a look at Marian Salzman’s Euro RSC Worldwide PR report and her “11 Trends for 2011″.

*Update* 19/01/2011: Retail Week just published their “What’s hot in eTail” list, which is more generic but worth a read (requires Retail Week Subscription)
*Update* 24/01/2010: Fortune and CNN Money today discuss how smartphone growth in 2011 that could totally eclipse anything we’ve seen before

So here it is: 9 areas to watch at the front-end of eCommerce this year

  1. “f-commerce” becomes a verb Beyond mere fan pages and ‘like’ buttons, merchants will re-focus on Facebook and look to develop eCommerce websites completely within Facebook.   With more than 500 million active users (50% of active users logging onto Facebook in any given day, the average user having 130 friends and people spending over 700 billion minutes per month on Facebook, more here) the potential ROI appears to be huge. And yet developing an eCommerce solution inside Facebook is not without its potential drawbacks.  In this post, Michael Hoffman remarks (in the comments) that firstly, “Facebook provides no service level agreements. Therefore, if Facebook is down, you are down. If your app is performing poorly, there is no one you can call directly. All applications are treated equally.” Michael’s second point is equally poignant…. so let’s think about Facebook security for a moment…. it’s a fact that Facebook profiles are sometimes hacked so is there a knock-on issue in this regard towards f-commerce? And what about the .api, the PCI compliance, the optimisation of Facebook eCommerce stores for mobile devices, and payment….wow, the list goes on (and that’s not even counting the growing WhiteWalling trend as recently discussed by Drew Benvie).  What is certain is that those merchants that get to grips with any potential issues first, will also see the upside first; and already pioneers like JC Penney are putting their best foot forward already as are ASOS in Europe (n.b. ASOS link requires Retail Week subscription). On the flip side, on the merchant eCommerce websites itself, there is little doubt that exposing a shoppers social graph will unearth recommendations and reviews that an algorithm simply would not. I can’t think of many people who wouldn’t be delighted to see what their social graph (or certainly a selection of their social graph) has been buying and saying about particular products and services.
  2. The Mobile Web Explosion If last year was the year that mobile commerce finally arrived (actually it was the year before last imho), expect to hear the herd stampeding this year. Mobile internet use is going to keep rising, and along with it, so will the number of mobile versions of existing sites needing to be developed or thought through.  Think about access by phones, tablets, even eReaders plus a host of other devices – and think about it strategically would be our opinion.  Apps no doubt will continue to be developed, but they’ll find their place within retail strategy (and it will probably be less important than your average app developer will tell you today) because really it’s the mobile web that will explode.  In the short term, payment is going to be a key area to nail down in transactional eCommerce terms and those that thought about payment strategically in the first place should have little problem exploiting investments already made on their conventional eCommerce sites (which is what we were able to do for Halfords and ICI/Dulux).  And remember, where there’s payment there is also security to worry about and ‘NFC’ (near field communications) and ‘payment wallets’ and ‘mobile vouchers’ will muddy the confusing water for many.
  3. Yay. Internet Explorer 9
    We can all look forward to the release of IE9 (rumoured to be Q1), and along with it better support for CSS3 and HTML5.  It’s so easy optimising complex eCommerce sites for the myriad of browser types and versions that another big release won’t make much difference will it? Hmmmm (See point #9).
  4. Ahem. Yay.  Firefox 4
    I rest my case.  It too, is expected, to be released, this year.  The punctuation just doesn’t do this whole cross browser compatibility nightmare justice, but alas, our perspective on all this is covered in point #9.
  5. Web Standards become the standard.  All hail CSS3 and HTML5
    On the upside, with IE9 joining the list of browsers supporting CSS3 and HTML5, expect to see these standards even more widely used.  Interpretation aside, adhering to web standards in eCommerce is very important for many reasons (which we won’t go into detail about here) but two aspects that are very relevant are improved ‘Search’ and ‘Accessibility’.   Then again, add ‘Page weight’, ‘Ease of Maintenance’ and ‘Extensibility’ and benefits relating to the support for access by multiple devises – and everyone in eCommerce should get the message. Maybe grabbing more headlines during the year will be CSS3, mainly because it’s more designer-y (and designers write about this stuff a lot) but to be fair eCommerce site experience WILL become richer, deeper, with a greater sense of dimension than previously; in part (at least) due to CSS3. Whilst ‘text & box shadows’, ’rounded’ corners, ‘gradients’, ‘animations’ & ‘transitions’, a wider variety of fonts and multiple background images will get lots of design-led attention, on an eCommerce site all new design possibilities will need to be thoroughly A/B and multi-variate tested anyway (the results are always surprising) so lets not get too carried away for designs-sake without testing.
    Importantly, whilst HTML5 isn’t going to replace flash altogether, it will at least put it back where it reigns.  So for now and the foreseable future, HTML5 and Flash will simply co-exist.  Proof of that can be seen with one of our partner’s in eCommerce 10CMS, who is helping our retail clients leverage flash components on eCommerce sites in the area of interactive merchandising (with non flash alternatives also served) with stunning conversion results. Their approach in the future is that designers/merchandisers/whoever will be able to serve content in basic html, flash or HTML5. Choices.  Great.  So to say Flash will disappear in eCommerce because of HTML5 is pretty nonsense, but getting the balance right isn’t.
  6. Landing Page optimisation & cross channel optimisation
    Online marketing vs. offline marketing vs. traditional marketing vs. digital marketing.  Phew.  For many (usually vendors) it’s still a noisy battleground, but for some merchants who’ve moved away from ‘which’ tactic to pick, to establishing a genuine blend of activities, there’s big benefits to be had from measured, optimised and fully integrated activities.  A great example of where this is going to come home to roost before our very eyes in eCommerce circles during 2011 is the optimisation of (digital) landing pages from (offline) Quick Response (QR) codes on packaging, shelf labels and (whisper it) traditional direct mail. By encouraging bar code or QR code scanning a customer can be taken to an optimised page where they can read rich contextual product information, or in turn be encouraged (post purchase perhaps) to share product comments using audio, photos or video.  The real skill is of course integrating everything, everywhere – and those merchants that can get nearer to integrated marcoms across all customer touchpoints will benefit most.  So whilst we expect to see greater use of QR codes on products and adverts to send customers to (many more) product and offer landing pages in the first instance (it was just an example) – the real battle ground is going to be integrating cross channel activities and having a genuine handle on customer behaviour via cross-channel analytics.
  7. Tighter Social Network Integration
    Whilst we have already discussed Facebook in a little detail, overall there will be a surge toward tapping into established 3rd party social networks.  Clearly links (to-and-from) Facebook, Twitter, Youtube, Blippy, Foursquare, Amazon, LinkedIn, Go Try It On, Shopkick and Group On and the like WILL have their merits (albeit sometimes merely volume based) but really that’s only half the social network story.  Whilst many major online shops have now realised that it is actually pretty difficult to establish their own social networks (e.g. HMV’s www.getcloser.com failed last year) many will persist; and for those that do so the rewards may well be significant.  Those that maintain their own social functionality (perhaps combined with simple hooks into established social networks as well) will tightly embed and integrate social networking directly into their main eCommerce sites using services like Pluck (which we have implemented before) or KickApps. ASOS is one retailer who is a long way down this road already within the eCommerce industry with its ASOS Life portal that combines blogs, forums, ideas as well as an online market place for clothing. But it’s not just fashion retailers getting in on the act – Sainsbury’s and ASDA have significant presence already too.
  8. Location Location Location
    First aired in May 2001, Kirstie Allsopp and Phil Spencer are going from strength to strength on their hit show….oh hang on….From Gowalla to FourSquare, to ‘check-in’s’, ‘augmented reality’ and ‘mobile vouchers’ – location based offerings are rapidly becoming the eCommerce solution de-rigour.  But beyond the hype (and there’s been a lot) and the fact that 2011 might not even be the year for mainstream adoption, in eCommerce circles ‘location’ services will rapidly become a pretty important component of a genuinely joined up multi channel retail strategy.  With the potential to optimise retail operations in areas such as Supply Chain & Logistics, Merchandising and Store Operations, “location location location” takes on an altogether more complex, and potentially rewarding, topic for eCommerce executives in 2011.  And with smart phones likely to become practically de-facto during the next few years, delivering mobile solutions that leverage both ‘location’ and ‘proximity’  to deliver a better customer experience, are simply a must.  We can certainly see ‘check-in’ promotions happening more often already in the US (e.g. the first 500 checkins instore receiving a free prize or a free voucher) but actually campaigns that focus on the ‘volume’ of followers will be less important than those that centre on the number of ‘influential’ customers a brand has; and as the commercial value of ‘influence’ and ‘trust’ in the social web begins to manifest, merchants will not only need to time their run toward the social web correctly, but also get their aligment spot on.  Look out for Facebook ‘Deals’ in the near future in the UK, and ‘local’ being the location battleground (offers around the corner from home/work, or where you are right now), and the continued rise of Google Places.  And they’ll be a return of older names in the mix like ‘Yell’ who understand locality (and advertising and SEO) pretty damn well.
  9. The end of the browser compatibility war This year the focus on browsers will shift from negativity to positivity – and looking ‘forwards’ not ‘backwards’.  The web has changed, and it is no longer a one-size-fits-all arena and nothing like an eCommerce site brings that into sharp focus.  Complex, dynamic websites are going to look different on an iPad to an Android phone to a site viewed on IE8 etc etc.  Supporting different browsers simply does not mean that every eyeball should see the exact same thing.  And if anyone in eCommerce front end design has enough time and money to spend on IE6 vs. better desktop browsers and the host of mobile browsers then I’d be frankly pretty surprised. Here’s the rub.  If it looks different in different browsers its not a bug.  And lets take it one step further: Browser capabilities are to do with the browser maker – not the designer. It really is time to look forward not backward on browser compatibility.

    What’s missing from our list? Please make some suggestions in the comments section.

Share this content with:

Salmon support Advantage Africa

Salmon donate £25,600 to Advantage Africa, a charity we have supported since 2006. 

Andrew Betts, charity founder said, “We were delighted to hear the news of Salmon’s donation of £25,600 to Advantage Africa.  The company’s support of our work among people affected by poverty, disability and HIV will be invaluable in 2011.”

To find out more about Advantage Africa, or if you’d like to make a donation, please go to http://www.advantageafrica.org

Follow Advantage Africa on Facebook.

Share this content with:

Let’s Colour! Dulux app to help transform DIY market

If, like me, you hunt down and use apps and software to make your life easier & more manageable, you may be interested to hear that the DIY and paint industry is increasing its involvement in interactive digital activities – to ensure that those home improvement projects get off to the best possible start.

And at the forefront of this innovation is AkzoNobel – the World’s largest paints and coatings company - and in particular their clever people working at Dulux.

The Problem:
There is no doubt that creating colour schemes for a home, or turning disparate pieces of inspiration into an affordable offline decorative reality, can often be a painstaking task. And despite inroads made by the likes of online solutions like ColourLovers, getting the right combinations of colours from a screen, into a paint tin and then onto a wall is not child’s play (not for me anyway). To be honest, I could quite easily have a colour in mind but not really know where to start. And furthermore, it’s frustrating to see a colour I like when I’m out and about (e.g. on a poster or already on a wall) and not know what the colour is, or how to bookmark or reference similar paint colours.

The Solution: The answer to my problems is the new Dulux Let’s Colour Studio App which Salmon have been involved in developing, working closely with Dulux’s in-house team.  It’s great.  And is available already for the iPhone, with other smart phone and tablet variants to follow. Read more »

Share this content with: