Top Ten Tips for Designing for Mobile E-Commerce: Part 2

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.

Alibris Mobile Checkout

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 palette swap.

Alibris Desktop Checkout

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 those devices

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 Mobify here.

Top Ten Tips for Designing for Mobile E-Commerce: Part 1

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 and 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 Mobile E-Commerce.

1. The mobile homepage should be a roadmap for the rest of the site

Simple mobile navigation

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 is possible to use JavaScript to fix an additional toolbar at the bottom of the screen, but this is a waste of screen space and redundant with good nav.

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

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.

Easily accessible search on Kiwi Collection

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.

Optimizing blogs for mobile with CSS3 and Mobify Studio

  • Tutorial Details
  • Topics: CSS3 'nth-child' Pseudo Selectors and Mobify Studio's CSS Filter
  • Application: Truncating blogposts for mobile use
  • Difficulty: Moderate
  • Estimated Completion: 15 mins

Hi, my name is Nico and I'm a web designer at Mobify. After spending the past four months designing dozens of mobile sites with Mobify Studio, I have come across many useful CSS techniques for optimizing mobile sites. In this blogpost, I'll be covering how to truncate blogposts on your mobile site using 'nth-child' CSS3 pseudo selectors.

Blogs are very popular on mobile because they have frequently updated, snack-sized articles which are often shared on Twitter and Facebook. When mobifying a content-heavy blog, we need to decide what content from the desktop site is relevant for mobile.

The majority of blogs display full-length blogposts on the homepage, which is fine for desktop but people browsing from their smartphones are looking for a snack, not a full-course meal! Showing full entries of all the blogposts on the homepage of your mobile blog can sometimes be too much for mobile users.

before-after

TRUNCATING BLOGPOSTS WITH NTH-CHILD CSS3 PSEUDO-SELECTORS

Instead of showing the full entries on the homepage, hiding the content and displaying only the title and metadata of blogposts makes it easier for mobile users to scan the content. The simple way to do this is by selecting and hiding the portions of content you do not want to display. For example, if blogpost in a blog was marked up like this (let's pretend there is content in between the tags):

  1. <div class=”blogpost”>
  2. <h3 class=”title”></h3>
  3. <p class=”metadata”></p>
  4. <p class=”content”></p>
  5. <p class=”content”></p>
  6. <p class=”content”></p>
  7. </div>

The CSS to truncate the blogposts would consist of the following:

  1. .blogpost .content { display:none }

By applying the CSS above, we end up with all the blogposts truncated:

truncated-blog

But what if you only wanted the older blogposts truncated, and the 4 newest entries to be shown in full? Fortunately, there is a way to specify exactly which blogposts are truncated on a given page.

  1. .blogpost:nth-child(n+5) .content { display:none }

What the code above does, is select and hide the content of all the blogposts except for the first four. The CSS selector used is called an nth-child pseudo-selector. I highly recommend the following articles at Sitepoint and CSS-Tricks which both do a great job of explaining how nth-child selectors work. Below is a reference table borrowed from Sitepoint that may help put things into perspective:

nth-child-table

Using nth-child selectors can be confusing especially if you are a visual learner. When I first started using nth-child it didn't make much sense to me either until I started using this handy CSS3 structural pseudo-class selector tester by Lea Verou, which can be used to visually calculate and test pseudo-class expressions.

CAVEATS

Unfortunately, a large number of older mobile devices are equipped with browsers that do not support CSS3 pseudo-selectors. This means some older Blackberry and Nokia devices will not be able to display truncated blogposts and paginators as shown above.

Another important thing to keep in mind is that when elements are hidden with display:none, the assets from the hidden content will still be downloaded by the browser. This is a major problem because when optimizing a site for mobile, we definitely do not want any unnecessary assets to be downloaded.

MOBIFY "CSS FILTERS" TO THE RESCUE!

One of my favourite features of Mobify Studio is the amazing CSS Filter, which is essentially a server-side display: none. Since the display:none is applied on the server-side before the mobile site is served, it has two major advantages:

​1) Allows any elements to be hidden with CSS3 selectors such as nth-child, even if the device it is being served does not support CSS3.

​2) Prevents the mobile browser from downloading assets which should be hidden, saving the mobile user time and bandwidth.

For a detailed explanation of how to hide content with Mobify's CSS Filters, please have a look at this thread in the Mobify Community Forums. From there you will also be able to have your technical questions answered by our staff.

CONCLUSION

Careful consideration of the mobile user's needs means taking extra steps to make your mobified site more scannable by removing unnecessary content and options. The same technique we used to truncate the blogposts can also be applied to truncate other elements of a mobile site, such as paginators or menu lists. Combining the power of nth-child pseudo selectors with Mobify's CSS Filter allows for greater control of the mobile experience.