Based on usability testing of hundreds of sites, the main guidelines for mobile-optimized websites are clear:

  • Build a separate mobile-optimized design (or mobile site) if you can afford it. When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.
  • If mobile users arrive at your full site, automatically show them the mobile version. Sadly, many search engines still don't rank mobile sites high enough for mobile users, so people are often (mis)guided to full sites instead of the mobile ones, which offer a vastly superior user experience.
  • Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect.
  • Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.

We've tested hundreds of mobile sites and full sites on all the currently popular platforms (including iPhone, Android, Windows Phone, and BlackBerry). The findings regarding mobile and full sites were the same for all the different phones, so I won't discuss specific devices here.

The guidelines are different for large tablets (10-inch form factor, as in Apple iPad, Lenovo IdeaPad, Samsung Galaxy, etc.), where full sites work reasonably well. For small tablets (7-inch form factor, as in Amazon Kindle Fire) the ideal would be to create yet a third design optimized for mid-sized devices, though most companies can get away with serving their mobile site to Kindle Fire users.

In This Article:

Mobile-Optimized Sites

The complete design guidelines for mobile websites require almost 300 pages, so I can't cover everything here. The basic ideas are to:

  • cut features, to eliminate things that are not core to the mobile use case;
  • cut content, to reduce word count and defer secondary information to secondary pages; and
  • enlarge interface elements, to accommodate the "fat finger" problem.

The challenge is to eliminate features and word count without limiting the selection of products. A mobile site should have less information about each product and fewer things users can do with the products, but the range of items should remain the same as on the full site. If users can't find a product on a mobile site, they assume the company doesn't sell it and go elsewhere.

So, for example, a mobile real estate site should show all the homes for sale in a neighborhood, not just the ones most people are interested in buying. (Though it could offer a shortlist of popular houses as a shortcut so users could view them with a single touch.) But the mobile site could eliminate esoteric features — such as a property's past sales history — and offer users who need these features a link to the info on the full desktop site.

Why Full Sites Don't Work for Mobile Use

It's common today to hear people argue the following: Mobile users have increasingly high expectations for what they should be able to accomplish on their phones, so eliminating content or features will inevitably disappoint some people. It's therefore better, the (flawed) argument goes, to serve the full site to everybody, including mobile users.

This analysis is flawed because it assumes that the only choice is between the full-featured desktop site and a less-featured mobile site. However, any mobile site that complies with the usability guidelines will provide links to the full site wherever features or content are missing, so users have access to everything when and if they need it.

The design challenge is to place the cut between mobile and full-site features in such a way that the mobile site satisfies almost all the mobile users' needs. If this goal is achieved, the extra interaction cost of following the link to the full site will be incurred fairly rarely.

True, we've seen some underpowered and poorly designed mobile sites that would hardly satisfy anybody's mobile needs. But bad design that misinterprets a guideline is no reason to throw the baby out with the bathwater and neglect the well-documented guideline itself. (In fact, if miserable user interfaces were a reason to reject an entire design category, we wouldn't have the Web at all; there are plenty of virtually unusable websites around. But that doesn't mean that we can't design good sites by following the guidelines that bad sites violate.)

The correct analysis goes as follows:

  • For the vast majority of tasks, mobile users will get a vastly better user experience from a well-designed mobile site than from the full site.
  • For a small minority of tasks, mobile users will be slightly delayed by the extra click to the full site.

A big gain that's experienced often will comfortably outweigh a small penalty that's suffered rarely.

A second argument against the mobile site option is that you could just optimize the entire website for mobile in the first place. Then, giving mobile users the "full" site wouldn't cause them any trouble. While true, this analysis neglects the penalty imposed on desktop users when you give them a design that's suboptimal for bigger screens and better input devices (see sidebar on mouse vs. fingers). If desktop users were a minute minority this might be acceptable, but almost all websites get substantially more traffic (and even more business) from desktop users than from mobile users. So, while we do want to serve mobile users, we can't neglect desktop users— who, after all, pay most of our salaries.

The basic point? The desktop user interface platform differs from the mobile user interface platform in many ways, including interaction techniques, how people read, context of use, and the plain number of things that can be grasped at a glance. This inequality is symmetric: mobile users need a different design than desktop users. But, just as much, desktop users need a different design than mobile users.

Full Report

The full report with all our research into mobile user experience with actionable design guidelines for mobile sites and apps is available for download.