The Zappos Guide to Mobile Website Design

It’s frustrating for users.

They try to access a website on a mobile device, and find nothing but trouble.

Smart phones and tablets aren’t going away and smart companies like Zappos are staying ahead of the curve.

Zappos has been a leading online retailer for years now, and their mobile website provides ten great insights into mobile design best practice.

Lesson 1:  Clearly Provide a Search Feature

They want it.  And they want it right now.

Notice how Zappos provides search capability, front and center.  If you know the product you want, simply type it in and buy.

Lesson 2:  Fewer Images, Faster Loading Time

This isn’t news to those in the Web-design community.

Aim to have as few images as possible.  Irrelevant and ornamental images slow down and complicate the mobile experience.

As mobile evolves, opportunities to use images will increase.

For now, do as Zappos does.  Images used on the Zappos mobile site are restricted to product images that customers need to make purchasing decisions.

Lesson 3:  One-Column Layout

This helps accommodate the smaller screen size on mobile devices. The column should also be as wide as possible.

Zappos makes excellent use of the limited screen size with a wide, single column containing the most relevant information.

 


 

Lesson 4: Customer First

The needs of the visitor have been addressed more so than the needs of the company. If it isn’t critical for the site visitor, consider removing it.

Notice the lack of banner ads on the Zappos site, which aids in usability and speaks to the on-the-go customer who has a specific goal in mind when visiting the site.

Lesson 5: Get the most out of small screen real estate

There are some things users may never enjoy doing on a smaller screen – such as booking a flight or filing their taxes. It’s usually best to save these tasks for a desktop where multi-step processes and complex navigational structures aren’t an issue.

Zappos allows mobile customers to purchase products, which is a core business goal, while leaving other elements to the desktop version.  Functions such as blog content and newsletter sign-up doesn’t make the cut to the mobile version.

Lesson 6: Use Large buttons and links

These two components shouldn’t be overlooked in the usability of your mobile site. Generally, links should be around 32px to accommodate the human fingertip. Buttons should be sized accordingly.  It’s not uncommon for a business to simply scale down their existing site to fit the smaller screen, creating a terrible user experience.

Notice how thick and wide the buttons and navigation are on the Zappos mobile website.

Lesson 7:  A simple information architecture

For content-heavy websites, it’s easy to get lost in information. By limiting choices, this allows mobile users to browse what’s relevant to them and discard the rest.

Zappos doesn’t try to do too much with the website.  If you want to read the “Company History” of Zappos, you can do so — but not on their mobile website.

Lesson 8:  Offer a Full website option

Include a link, preferably in the footer, that allows the user to visit the full website, and vice versa. Doing so gives them full control of their browsing experience and takes care of any issues arising from it.

Zappos makes it clear that you can switch to the full website version and that the full version is not optimized for the iPhone.

Zappos Mobile Marketing

Lesson 9: Route traffic according to the visitor’s browsing agent or device

If a mobile device visits “yoursitename.com” from an iPhone, users can automatically be redirected to “mobile.yoursite.com,” for instance.

Zappos takes it a step further.  They detects the type of device that is being used and redirects to a version of the page that is optimized for that device.  In my case, “iphone.zappos.com.”

Lesson 10:  Provide “other” contact information

Users may want to find a phone number or address and get off of their mobile device as soon as possible.  Provide that information.

Zappos makes it easy to reach out (and place an order) via telephone in the footer of the mobile website.

Test It Out

To make sure your mobile-ready site stands up to the rigors of the mobile browsing experience, make sure to test it on multiple devices and platforms, as it’s the only way to make sure the site holds up to the demands of mobile browsing.

The prevalence of mobile browsing isn’t going away anytime soon.

What are some other best practices to use that I didn’t address here? Feel free to leave yours in the comments!

About 

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.

Comments

  1. wow…..
    good lessons for Web Design
    like it

  2. great….but when I visit http://www.zappos.com on my iPhone I get the regular website! Hmmmm, that should probably be included in one of the above lessons!

  3. Brian Whalley says:

    One flaw in their plan, in my opinion, is that their VIP shopping site (vip.zappos.com) has no mobile version. If you log into the VIP site on a mobile device and tap around, you’re in the full-sized web version, not any reduced mobile site. They should provide a mobile-friendly alternative for both their normal site and the VIP site. I visited the site today via my iPhone 4S and tapped around a few pages and didn’t get any mobile edition of the website.

Trackbacks

  1. Zappos Mobile Website Design | 10 Lessons – The Daily Egg | Simon Bugler: Freelance Web Designer says:

    […] more here: Zappos Mobile Website Design | 10 Lessons – The Daily Egg This entry was posted in WordPress and tagged great-user, learn-the-ten, make-the-zappos, […]

  2. […] that make the Zappos mobile website a powerful sales tool and a great user experience. Link – Trackbacks Posted in User experience (UX) | Permalink. ← Usability tips for your […]

  3. Marketing Roundup for November 14 – 18, 2011 « says:

    […] The Zappos Guide to Mobile Website Design I like to try and bring you information about mobile websites whenever possible, and since Zappos is one of my brand idols, this is a great fit! As small business owners, it’s scary to think about undertaking this kind of project. But, as more and more consumers are using mobile devices to search the Internet, we need to make our sites accessible to them. Hopefully this article will get you thinking. […]

  4. […] Podéis acceder al artículo (en inglés) aquí: “The Zappos Guide to Mobile Website Design“. […]

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your real name, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. We rarely allow links in your comment. We accept clean XHTML in comments, but don't overdo it please.

Speak Your Mind

*