Moving to the Mobile Web

Apple's iPhone has raised the bar for mobile Web design by bringing buzz, investors, and new technology to the sector

Wait. Scroll. Scroll. Tap-tap. Wait. Wait. For many years, that was the typical experience of someone surfing the Web using a mobile phone or PDA, at least in the U.S. Although some content providers offered stripped-down versions of their sites specially designed for mobile users, most did not, and reading a page designed to be viewed on a PC on the small screen was about as much fun as sitting in a dark room reading a newspaper by flashlight.

Today, the mobile Web environment is in a period of rapid change, thanks in no small part to Apple's iPhone (AAPL). From the phone's introduction in June, 2007, through March, 2008, 5.4 million iPhones have sold, and to date developers have created more than 17,000 sites or "Web applications" optimized for the device.

But this isn't a story about the iPhone, per se; it's a story about designing for the mobile Web. The iPhone was just a catalyst of sorts, bringing buzz, investors, and new technology to the sector. As a result, the mobile Web design and customer experience bar has been raised.

Changing the Game

"Mobile Web used to be WAP," says Matt Murphy, a partner at Kleiner Perkins Caufield Byers, the venture capital firm that has started a $100 million "iFund" to develop applications for the iPhone. "Now you have a real browser and a real device. The iPhone is a game-changer."

"From a design experience perspective, it's changing the way people view the Web and the value of the mobile Web," says Kelly Goto, the founder and CEO of San Francisco-based GotoDesign.

Pre-iPhone, says Cameron Moll, principal interaction designer at LDS Church and author of the influential e-book Mobile Web Design, companies typically took one of four approaches to the mobile Web: 1) do nothing and let mobile users scroll their way around sites designed for PC viewing; 2) streamline sites by removing images and styling, making them more manageable for mobile devices; 3) use stylesheets, a tool that allows developers to create different versions of a Web site for different devices; or 4) create an entirely different second site, optimized for mobile users.

Less Maddening Than a Regular Site

Consider the first approach: The iPhone has greatly improved the flashlight-like experience of Web users created by the do-nothing strategy. Its two-touch, zoomable interface makes it, if not enjoyable, then less than maddening to read a regular site.

"I can read The New York Times on my iPhone, but it involves a lot of pinching and zooming," says Moll, who prefers to use sites optimized for the iPhone. (If a site has a mobile version, the server will automatically detect what type of device is being used and send the appropriate page.)

Indeed, despite the improved browsing experience the iPhone offers, the do-nothing strategy, as well as approaches two and three, still have a fundamental problem: They ignore the issue of context. As Nadav Savio, now a user experience designer at Google (GOOG), and mobile usage expert Jared Braiterman, founder of Jared Research, wrote in a 2007 paper, "we must focus… on mobile people, not mobile devices. In other words, we are not merely shrinking in size a Web experience, but creating an entirely new platform for communication and interaction."

Checking Your Blood Alcohol Level

This requires redesigning or rethinking some of the Web's navigation and interaction conventions: turning the tabs often presented horizontally across the top of a Web page into a vertical stack, for instance, or increasing the size of buttons or links, which will be tapped by a finger rather than clicked on by a cursor.

But the mobile context also lends itself to different types of content. One popular iPhone app provides a perfect example: Blood Alcohol Level—a calculator that estimates how drunk you are based on what you've been drinking, your weight, your gender, etc. It's hard to imagine someone having one too many glasses during a nice dinner at home and thinking, "I'm going to start up my computer so that I can check my blood alcohol level on the Web." On the other hand, being able to look up that information on a mobile device when trying to decide whether or not to drive home makes a lot of sense.

Or another example: Kayak, the popular travel-deal search engine, has an iPhone site. Not only is it streamlined (no images or styling, etc) so as to be fast-loading, but instead of passing users onto an airline Web site to make the purchase, as Kayak does if you're on a PC, the mobile version gives you a phone number. Voice is a much easier way to complete your goal of purchasing a ticket if you're on a mobile device. Context is king. And more companies are beginning to think about creating iPhone- or mobile-optimized sites. And, of course, those companies that work with designers and utility experts to develop a context-appropriate, easy-to-use site will be the most successful.

Whrrl's iPhone Version Arrives July 11

"There are a lot of entrepreneurs coming off the sidelines," says KPCB's Murphy. Since announcing the iFund in early March, the firm has received more than 2,000 plans, 20 times more than they typically receive for the mobile space. The first app to receive funding, Whrrl, is a location-based "social utility" that uses recommendations from your network of friends to suggest, say, a nearby restaurant or fun thing to do. Created by Seattle-based Pellago and already available on other mobile devices, Whrrl's iPhone version will launch when Apple opens its App Store on July 11.

To be clear, the iPhone is hardly the first mobile device to offer Web browsing in the U.S. The Treo and some BlackBerries have offered it for years, as well as high-end Nokias (NOK). But there are key differences with the iPhone, differences that are relevant to the design of the mobile Web. First of all, the iPhone is controlled from top to bottom by Apple, a level of control unprecedented in the U.S. mobile phone market.

It has used that control—of the form factor, the interaction design, the operating system, and the software development environment—to create a simple, intuitive user experience. This superior browsing experience will both bring more users to the mobile Web and raise consumer expectations of the mobile browsing experience. And because Apple controls the platform, it is able to iterate, improve the experience, and introduce new features or applications more quickly than other handset makers, who must work with service providers, or the service providers, who often work with third-party developers.

Finding the Profit in the Mobile Web

"Clearly from a standpoint of mobile design and developing new mobile apps, you have had a very constrained ecosystem around the carriers," says Murphy. "Apple changed that."

It's still early days in the development of the mobile Web. The majority of the iPhone Web apps currently available are cool little tools created by a developer for kicks (think Blood Alcohol Level) or because they want a better way to access a Web site (such as Hahlo, an iPhone-optimized front door to Twitter created by Dean Robinson, a Web developer at the University of Newcastle in Australia). "A lot of people get that the mobile Web has huge potential, but most companies have a hard time understanding how to profit from it and how to leverage it to meet their needs," says Moll.

You could have said the same about the early Web. But this will change—and that's good news for interaction designers. Already, several firms have emerged as leaders in designing for the mobile space, including HUGE in New York, and Punchcut, Adaptive Path, and Gotodesign, all in San Francisco. As content developers rush to the mobile Web and companies already in the mobile space try to match the mobile Web experience offered by the iPhone, there will be plenty of work.

Again, Apple's device is just the catalyst. As Moll says, "Is the iPhone the future of the mobile Web? I don't think so. Ubiquity is the future of the Web." And ubiquity requires great interaction design.

Click to see a slide show of some of the smartest iPhone Web applications.