Home/Ecommerce Guides/Ecommerce In The Mobile…

For the most part, our attention has been squarely focused on building an ecommerce website and attracting attention, through a combination of search, paid and other marketing methods. But to ignore mobile in all of this would be to fail to acknowledge both the present and the future of ecommerce. People now use mobile and tablet devices to browse and shop online – not only as an add-on, when they can’t get to their computer, but as their primary device.

As anyone who has ever tried to get stuff done online on a mobile platform, not every website just neatly presents in mobile formats, and your customers will be quick to head elsewhere if your website isn’t mobile-ready. If you want to capitalise on the number of users buying on mobile and tablet devices, you need to think about optimising your buying experience for them too, and providing responsive designs and apps that fit with their browsing needs.

Ecommerce Mobile Growth Graph
Source: www.kunocreative.com

The Differences Between Mobile and Desktop

Mobile is no longer a fringe source of traffic. It is now one of the major ways people buy online, and you can’t rely on your current ecommerce design to always deliver the goods.

Screens present differently, browsers present differently, and users interact with the web differently on mobile and tablet designs. Most people work around this by presenting mobile and tablet users with a separate version of their website, optimised for mobile devices.

There are a few things to bear in mind when thinking about presenting your website on mobile.

  • Buttons Need To Be Bigger: quite simply, your buttons and menus need to be bigger and more spaciously laid out. A finger tap is always less precise than the click of a mouse, and you don’t want customers accidentally missing the buy button and opening up other windows on their mobile, virtually killing the sale stone dead. Leave plenty of space around your buttons and make them big and easy to press, so you’re not restricting your customers’ ability to buy from your site.
  • The Fold Has Moved: your ‘above the fold’ considerations will have changed on mobile. For most purposes, this will mean you have more space to play with, but depending on page orientation you may be playing with less. Make sure everything you want to be above the fold on your homepage, category pages and product pages still stay that way when you view your website on mobile.
  • Page Orientation: The page orientation issue is one that may require some design tweaks. You want your page to present well on the horizontal as well as the vertical orientation, so customers can still buy your products regardless of the dimensions and orientation of the device they are using.

Responsive Mobile Ecommerce

Responsiveness is a key element of design, and you should be on the lookout for responsive themes or designers when you are putting together your ecommerce store. Responsive websites adjust to fit the different dimensions of the various devices people might use to access your site. This prevents your pages from requiring scrolling or manual resizing, and even means you can present the same version of your website to users across a multitude of devices.

responsive-web-design

Responsiveness means you don’t have to create different versions of your website for the slightly variant specifications of smartphones and tablets your customers might conceivably use to access your website. Yet, if you ignore these users, you are cutting out a huge percentage of your traffic and ultimately sales.

A responsive theme or design from the outset will leave you in the strongest position when it comes to handling mobile traffic, and will mean you don’t need to opt for several different variations of your website to ensure you have all the bases covered.

Responsive vs. Adaptive Design

Responsive design is the standard, and those in the design community tend to favour a responsive approach because it leads to less difficulty in handling alternative traffic formats. A responsive design is as good on mobile as it is on desktop, and it doesn’t matter which device you end up using to view your site. Responsive design allows you to put content at the heart of your site, whatever the viewing experience, without cutting off double-digits percentages of your traffic.

Which solution is better for your mobile website?

 Featuretrustconversionseosharingaovinfosticky£ savingnav
1Product Description Text355205000
2Product Reviews323204230
3Price (+ options, inc / ex vat)000000000
4Prominent Buy button020000000
5Product zoom / enlarge310005000
6Additional product images421005000
7Product videos423205000
8User photos / videos221304120
9Stock status210002020
10Last In Stock warning130003000
11Order within the next X hours & X minutes for delivery on [date]'030001000
12Like on facebook/twitter001300100
13Follow us on twitter/facebook/insta201202000
14Buy this product with these other products for XX bundling010021001
15Complementary cross-sell products010031001
16More expensive similar product 'up-sells'000021001
17Cheaper model 'down-sells'0200-11001
18Add to wishlist option000100301
19Include 'you may want to buy this instead' when out of stock.031002002
20Phone number for telephone orders3-100110-20
21Different phone numbers for multi-channel tracking020000000
22Save £/$/€X' / 'Save X%' on reduced products020102000
23A 'size guide' to all clothing items240004030
24Add on product recommendations after 'add to bag' used010022000
25Size notes (eg. 'fits small')430004330
26Material information (for clothing)210002020
27Care instructions (for clothing)100001020
28Colour chooser020001020
29Currency conversions210102020
30Product ingredients list (for food)211102010
31Allergy/preference information (for food)211102010
32Call me about this product button2100022-10
33Click to chat button3300230-10
34Add a 'seen a mistake on this page?' link to kill off errors210001020
35Upload your own photo' link201202220
36Sales rank / best-seller rank120002000
37Tags / Add tags012002003
38Breadcrumb trail112001004
39Links to related blog posts / articles / product guides201303301
40Quantity selector000020000
41Product Code202001000
42Bullet Point features132004002
43Customers who bought this also bought...121041003
44Add an age guide to kids products310002020
45Product dimensions110002020
46New' message on new products110002201
47Finance options110010000
48Warranty information420002000
49Additional warranty options100040000
50Text ads to other sites / non-competing partners000000020
51Rich Snippet: Product Info, Review info, Video info, etc024001000
52Display ads to other sites / non-competing partners1-10000020
53A 'view more from this brand' link (eg. more Canon products)002000002
54A 'view more from this category' link (eg. more SLRs)002000002
55A 'view more from this brand/category' link (eg. more Canon SLRs)003000002
56A link to 'other products in this offer' for promotions120002000
57Product brand logo200001000
58360 degree product view420005000
59Points Earned if you have a loyalty program110010300
60Tell me when this product comes into stock (for out of stock products)130002300
61Collect at store info / postcode entry330001020
62Assembly instructions for kit products111003000
63Compatibility information121003000
64Bookmark this page000000100
65Print this page000103000
66Customer-friendly translations (eg 'holds 7,000 songs' as well as '32GB')241003000
67Shipping time estimate330002000
68Shipping weight000002000
69Product weight000002000
70Storage instructions000002000
71Country of origin100002000
72Battery requirements000002000
73Energy rating / Environmental notes210002000
74Unique Selling Points of Product / Brand021002000
75Free Delivery on orders over X130031000
76Size conversion chart (for international orders on clothing/footwear)120002000
77Recipes including the product (for food)123002000
78How-To guides for product use223003000
79Cross-sells by colour / other attributes010001002
80Price per X (eg per kg for food items)020002000
81Recently viewed items011002003
82Rental cost (eg. For technical equipment that can be bought/leased)110022200
83Link to the next/previous products in your product catalogue000000002
84Customers who view this ultimately buy [x]020002002
85Upload your own video111201000
86Add your own post / notes (ugc)001001000
87Nutritional information (on food products)300000000
88Gift Wrap options010010000
89Customisation notes (eg. 'Free Engraving...')120003000
90Customer service responses to questions223030030
91Time left until offers run out030101100
92Awards the product has won320011000
93Customer testimonials220101000
94Comments342203200
95Facebook Comments110402100
96Number of tweets/likes/+1s100401100
97Checkout with Paypal button340000000
98Catalogue product code (to reference items)020002012
99Product stats (sales, pageviews, etc)320002000
100A Johnson box (usp box showing key USPs for the brand)220000000
101Product release date110002100
102Pre-order for out-of-stock / forthcoming products020001320
103Sell this product (for marketplaces)010002110
104Price promise320001000
105Virtual try-on110003000
106Product negatives / reasons not to buy320124020
107Review sorting / search330000000
108Reviewer information320003000
109As seen on / used by / worn by220203000
110Email Signup call to action000000500

Adaptive design is the next best thing, where responsive design isn’t a possibility. This might be where you already have a non-responsive website in place, and you’re not heading for a full redesign. Adaptive is, as the name implies, adapting your current web design to fit with different devices, rather than hard-wiring responsiveness into your structure. It can be slightly more cumbersome to setup, in the sense that you will need multiple designs for different screens and devices. However, this is often easier than trying to make a non-responsive design responsive, and most would advocate either starting your design again or switching to an adaptive approach if you find yourself in this boat.

Alternatively, you can serve up a much more feature-light experience for those viewing your content on tablet and mobile devices, and it might be the case you can get away with this lower-level adaptive design. Whichever format you choose, one things remains certain – that to mistreat mobile traffic now is crazy, and that to mistreat mobile traffic into the future is akin to business suicide.

Creating Apps

If you are serious about building a framework for your mobile and tablet users to buy from your site, it may be worthwhile developing apps which can be used to buy from your website directly. Apps can provide a more customised experience for users, and rather than channelling through various different mobile versions of your website, breaking down your catalogue into manageable apps for both Android and iPhone users can help you reach a wider audience in a way that is suitable to them.

Apps can provide a better user experience, without the need to navigate through a mobile web browser. Instead, customers can simply fire up the app and start making purchases through your store – perfect for encouraging your regular customers to shop more easily (and hopefully more frequently), and for avoiding the user hassle of navigating through the browser.

There are services available which allow you to develop apps using your existing website, often requiring just a small cost for you to use the app as your own. Alternatively, you can outsource app development to a coder with particular expertise in the field. Freelancing sites like oDesk and Freelancer.com can help you get the job done for a fraction of what you might pay a large agency – if you can find a seemingly reputable supplier within your budget (ask to see examples of their previous work), you can save yourself a fortune.

When developing an app for your site, you will need at least two different apps – one for Android OS devices, and one for iOS. If you can only afford one app to begin with, choose Android – there are way more devices running Android platforms than there are on iOS.

Creating Mobile Websites With Mobify

Mobile traffic is clearly, at the very least, here to stay, and the need to focus your efforts on improving the mobile shopping experience are growing ever-greater. Mobify is a service which helps companies optimise their website for mobile traffic specifically, delivering insights into mobile users and their interaction with your website as-is. This makes it possible to gradually optimise your mobile buying experience, making sure your ecommerce store is capitalising on all the traffic it attracts.

Striving for a ‘mobile mature’ ecommerce store delivers benefits in the here and now, as well as ensuring you are well placed for the mobile years to come. As even more people switch to mobile browsing in preference to the web browsing habits of old, you’ll be in the strongest position to both retain and attract their business. Using Analytics To Measure Mobile Activity Mobile activity is another area you can put under the microscope, in terms of applying analytics processes and growth hacking. By identifying how people interact with your mobile website or app, and running tests to find winning configurations just like your standard optimization process, you can increase your results in line with the goals you are optimising for. A number of services exist offering the ability to track and measure analytics data, specifically for mobile users:

  • Segment.io
  • TestFlight
  • Localytics
  • Google Analytics
  • Mixpanel

Further Reading/Useful Tools

Ecommerce Guide
Author

Posts written by author Ecommerce Guide will be written by multiple authors.

Leave a Reply