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

by Jessie Scanlon

• View Slide Show

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.