- Featured Columnists
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Visual Design and the Web
- Color Theory
- Working with CSS
- How to Create CSS Menus
- How Should Web Designers Manage Layouts?
- Shining Examples of Bad Design
- Get Your Site in a Festive Mood: How to Quickly Change Styles
- Designing Mobile Web Sites
- Designing for Mobile Devices
- Books and e-Books
- Online Resources
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Designing Mobile Web Sites
Last updated Oct 17, 2003.
While designing a Web site using XHTML with CSS may make it viewable on mobile devices, it doesn't mean it's the best way to go. Using mobile style sheets simply allows mobile users to view Web content by hiding the content you don't want them to see. It doesn't increase download times, or provide a valuable mobile experience in a mobility context. Just as writing for the Web isn't the same as writing for print, designing for mobile devices isn't the same as designing for computer monitors.
Mobile users don't expect, or even want, the Web on their devices. Formatting your Web content for mobile may suffice in many cases. But those looking to expand the Web site's reach to the mobile market need to treat mobile Web design as a separate project.
Mobile users want content that helps them while on the go, such as information that's relevant to their physical location. They want sites that provide maps, sports scores, ring tones, movie times and locations, nearby places, stock trading (for the frequent business traveler), weather reports, the latest news, and city information. And, of course, they use it for email. Telephia reports email, weather, and maps are the most often accessed items on the mobile Web1. Because of the small screen, users want snippets of content, which means that 500-word articles need trimmed down to 30 words.
The Mobile Web
The mobile Web isn't the same thing as the Web. Instead, the mobile carrier is the one that's often in control. Mobile providers can improve the mobile experience by creating a design that doesn't have garbled content or makes it tedious to use Web sites.
Should businesses bother with designing mobile-based sites? The market seems to think so. Mobile browsers outnumber Web browsers by at least 20 times. Users in the UK downloaded over eight billion pages to their Web-enabled devices in 20032 and analysts forecast global mobile content sales to top $9 billion in the next 12 months3. Needless to say, there is a lot of interest in using small screens for big revenues.
The primary challenge facing designers who work on products for the mobile Web is finding ways to limit user input and lead consumers to where they want to go, which isn't always the best experience. Network latency and bandwidth issues can also add to the consumers' frustration. All of these things must be taken into account when designing for mobile users.
Brian Fling provides 10 reasons to publish a mobile-based Web site, which can serve as justification for getting businesses on board. According to the four-part series, "Mobile Web Design," there are three times as many mobile phones as PCs in the world and almost all of today's phones are Web-enabled. If the Internet gets discovered tomorrow, wouldn't you rather target mobile users than PCs considering there are more of them?
Designing for Mobility
"Methods to the Madness," compares four methods for going about designing a mobile-based Web site, including creating handheld style sheets and building a mobile-specific site. The article compares the methods and explains which one to choose.
The handheld CSS style sheet method is the easier of the two methods to develop for as it only calls for creating a separate style sheet with the "handheld" media type. Before you run out to try it though, understand that handheld style sheets don't work with every mobile device browser and there are likely more browsers that are incompatible with them than are compatible. Perhaps this will get resolved with W3C's Mobile Web Initiative, which was formed to address ways to make the mobile Web as easy-to-use as possible.
The second approach calls for designing specifically for mobile devices. Pages are tailored to the mobile experience, providing content and interactions suited to the limitations of the device. This means smaller file sizes, faster downloads, and no wasted content or mark-up. On the flip side, you'd essentially be maintaining two separate Web sites: the little one and the big one.
A September 2005 Action Engine study on mobile usability reports that usability is the number one reason people purchase a specific mobile device. The same survey says that respondents ranked interest in news, weather, travel, and directions over communications tools like email and instant messenger. The most frustrating aspect reported in the study—time-consuming data entry.4
Furthermore, Michael Quazza, chief executive at SurfKitchen, says that for every click a user takes to access a service, 50 percent will abandon the attempt.5 Between the study and Quazza's discovery, companies need to move with a sense of urgency in building usable sites that have easy data entry with as few clicks as possible and faster response times.
Making the Business Case
With statistics showing that the mobile Web is growing—and revenues right along with it—the time and cost to invest in designing for the mobile experience are justifiable.
ePayNews reports that in 2001, only 16 percent of all Internet users used wireless to connect to the Internet. In 2004, that number reached 41.5 percent. Additionally, the US mobile commerce revenues have increased from 2.1 billion dollars in 2003 to 13.1 billion in 2005 with a projection of 58.4 billion in 20076. Imagine how much the number will grow if companies design with the mobile experience in mind.
Mobile Web Browsing Gets WICD. W3C is working on new technology called Web Interaction Compound Document, or WICD for short. The work group is working to make it easier to create interactive content for mobile browsing.
The XML Reference Guide has a Wireless Markup Language (WML) article plus it points to many mobile-related resources, some of which you might find useful.
W3C Mobile Web Initiative. A working group focusing on creating best practices for ensuring Web access from mobile devices is as simple and convenient as accessing the Web from the desktop.
The Mobile Device Detection Problem. Device detection is about sending the right content based on the device calling for it. The article covers three options for using mobile device detection, but each one is not without problems.