Ten Essential Web Design Tips for Mobile E-Commerce
At Mobify, we power a lot of mobile sites. Over the years, various
design points – some obvious, some not so obvious – have come up again
Together with our clients, we came up a list of salient points. In no
particular order, here is Part I of the Top 10 Tips for Designing for
1. The mobile homepage should be a roadmap for the rest of the site
First thing to do when starting to design a new site is analyze the main
sections of the site you need to navigate to. This is different from a
desktop site as subcategories are not on the first page.
The main menu should be easily available. This is especially important
on mobile web vs. apps, as in apps, you can put a fixed toolbar in the
header or footer. On a mobile site, there is no room on screen, as the
browser has fixed chrome at the bottom and the URL bar at the top. It
of the screen, but this is a waste of screen space and redundant with
For example, Threadless.com’s desktop landing page has announcements,
featured shirts, new designs, and options to score submissions. In
order to browse their store, you have to drill down another level.
While this works well on their main site, mobile is a different beast.
All the aforementioned options are available on mobile, but the landing
page has a separate design. On mobile, you immediately have the option
Shop Guys, Shop Girly, Shop Babies, etc front and centre. This instant
and obvious roadmap to the site is the landing page for mobile, and the
feature that most mobile visitors will be coming for.
2. Don’t put too much on the homepage
You don’t know what specific items people are looking for. On desktop,
there is the luxury of being to display a range of items and hope one of
them is relevant to the user. On mobile, if you display a large range
of items, it will appear cluttered and disorganized. The net result of
this will be confused or disappointed mobile users. This will
contribute to bounce rates and defeat the point of having a mobile
Content should be tailored to the device. Cramming too much content
onto a small screen never looks good. A good example of a site that
follows this is KiwiCollection.com. Kiwi Collection is a luxury hotel
booking service. If you were to include an example of every level of
hotel, style, and location in the world, the mobile site would quickly
become crammed and unusable. Instead, there is a swipeable image
gallery with a few properties and crucially, a search bar. You can’t
guess what a user is looking for when choices are so broad; all you can
do is make it easy for them to find what they are looking for.
3. Set different text sizes for portrait and landscape
Why would you do this? When people turn their phones from portrait to
landscape, they don’t want longer lines of text; they just want larger
text. A relevant point that makes this more pertinent is disabling
zoom. Although the argument for and against disabling zoom can be
debated for hours, it is Mobify’s philosophy that disabling it leads to
a better user experience, when implemented properly. For a little more
on disabling zoom on mobile devices, check out this post written by
Peter, Mobify’s chief architect.
Make sure the text size is readable. As a general rule, titles are
13-15px and body text is 12-14px, with smaller sizes for metadata.
4. Make search easy and powerful
Search should be easily available, not hidden or on a separate page.
Make sure that it is the same powerful search available to desktop
users, not a scaled down version for mobile. For users of Google Site
Search, a mobile version is also available and should be used.
5. Make sure scanability is high
What is meant by this? Make sure lists are not too long, are large and
easy enough to view when scrolling down, and don’t take too many swipes
to view the entire list.
Because of the nature of their screens, phones are conducive to
designing for portrait orientation and vertical scrolling. However,
some designers use this as a excuse to cram in an much content as they
can. We believe people are less patient on a mobile device, and when
they don’t see what they are looking for quickly, they will leave. It’s
all about instant gratification.
Long, vertical lists take too long to decipher, especially when they are
not finger friendly. An easy way to get around this is filters in the
list page. If you do truncate content, make sure you retain the filter.
If you absolutely need to have long pages, make sure list pages load
quickly by using something like lazy loading that allows you to load
objects only when they are needed. This way, objects at the bottom of
your list will only load if someone scrolls down there.
Hope you have found this useful.
Part 2 of this article is available here.