The Zappos Guide to Mobile Website Design

by 10 11/07/2011

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!

Print Friendly

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

10 COMMENTS

ponti

wow…..
good lessons for Web Design
like it

November 9, 2011 Reply

Kaz

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!

November 14, 2011 Reply

    Russ Henneberry

    Hi Kaz, very strange. I get iphone.zappos.com.

    November 16, 2011 Reply

    sue

    Only need to tap in zappos.com this will take you directly to mobile site.

    November 23, 2011 Reply

Brian Whalley

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.

December 12, 2011 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>