This is the continuation of Part I of the Top Ten Tips for Designing
for Mobile E-Commerce.
6. Replace image based buttons with CSS
To reduce load times, get rid of as many image based buttons as possible
and replace them with CSS. A handy tool is gradient-scanner.com
that allows you to upload any image and select the gradient colours and
angle you want displayed. Once you do that, it will give you the CSS
equivalent to your image’s gradient.
7. Resize Images
Cellular connections are still not as fast as broadband internet so you
should reduce image sizes for mobile devices. TinySrc.net is one of
the resizing services that can be useful. It is great for handling
huge, weighty assets that need a lot of resizing to fit on a mobile
screen and load slowly on a 3G connection. However, if the change in
dimensions is small enough, loading the full image and resizing with CSS
can be more efficient. For these small changes, the time required to
process externally is longer than resizing with CSS and does not offer a
significant enough compression.
8. Help and FAQ should be mobile
Quite a few mobile sites are guilty of ignoring this.
People who go to the help or FAQ are there because they are having
issues on your website. For example, if they are having trouble
completing their checkout and go the help section, you want to provide
them with the easiest and fastest way possible to resolve their issue.
If a mobile user clicks “Help” and gets a desktop version, they are less
likely to trawl through solutions to resolve their problem than they
would be if they had an easily accessible mobile version.
In this instance, a mobile user would most likely abandon their
purchase. Help and FAQ sections need to be some the most user-friendly
parts of a site, because the people going there already have problems.
9. Stay true to the branding
When a user is familiar with a brand, they expect a unified experience
across desktop and mobile. This familiarity inspires loyalty and trust,
both essential for mobile e-commerce stores.
Fonts, icons, and colours should be consistent across desktop and
mobile. A great way to keep custom fonts identical is with TypeKit.
Mobify-powered sites like the New Yorker use TypeKit to keep
their brand consistent across desktop and mobile.
The branding also contributes to the whole buying experience. Many
legacy mobile sites are built using generic templates. The only things
that changes between these mobile stores is the colour, with different
brands essentially using the same design as their competitors, with a
These stores lack the final touches necessary to create a feeling of
familiarity on a mobile site.
Try and keep the checkout flow as similar as possible across platforms.
For example, when designing Alibris’ mobile store, the UX was kept the
same between desktop and mobile. As a result, the mobile site feels
incredibly familiar to anyone who has used the desktop site, right down
to the identical cart icons.
10. Always test across multiple devices – and multiple OS versions on
This seems like a fairly common sense tip – but many people miss out on
testing different OS versions on those devices.
For example, we recently encountered a problem in a Mobify-powered store
that worked properly across all devices, except certain Motorola Droids.
It turns out that Android 2.1 doesn’t support the background-size CSS
property, so larger sized HD images didn’t resize properly and ended up
being too big for their containers. This is fine on most smaller
screen-sized Android 2.1 phones, but our scripts correctly detected the
Droid as having a large enough screen to handle HD images and served
them. The result was a slightly broken and hard to use store – but only
on Droids running Eclair.
Droids running newer versions of Android were fine, including the ones
in our device testing library.
These small touches will help your mobile store succeed. If you have
any questions about taking your store mobile, feel free to contact