- 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 for Mobile Devices
Last updated Oct 17, 2003.
The long argument of what screen size to design for has run into another challenge: the small screen. Wireless device usage has jumped, color screens are no longer a luxury, and bandwidth is improving.
With numbers like the following, companies believe it's worth the investment to pay attention to designing for the small screen. CTIA (Cellular Telecommunications and Internet Association) reports there are 171.2 million wireless subscribers in the U.S. as of November 2004 with 21.7 million being new subscribers. Revenues passed the USD$100 billion mark for the first time in 2004.
The statistics on PDAs are conflicting. Gartner reports PDA worldwide shipments grew seven percent while revenues went up 17 percent in 2004. However, according to IDC, PDA shipments slid by 13 percent in 2004. The big picture says wireless device use is growing.
Here are five tips and key points to consider when designing for the small screen:
Mobile devices vary in screen size. PDAs, cell phones, and hybrids are small while the sizes of laptop screens are comparable to those used with a desktop monitor. Not only are screens smaller, but they also render the pages differently than on the "big screen." To make matters worse, the small screen-based devices vary in size even when they come from the same company. A sampling of resolutions:
PalmOS (Zire and Tungsten)
Blackberry 7100x series
Dell Axim x30 and x50 Pocket PCs
Dell Axim x50v
Smartphones (Motorola, Samsung, and i-mate)
It's bad, isn't it?
Design with CSS, XML, XHTML
Most devices have the fewest issues viewing Web sites coded with XML/XHTML, the most common HTML standard. It's not necessary to build a separate site when developing with CSS and XHTML. However, some large sites like Yahoo! and Google have separate sites for mobile users.
Depending on your audience and Web site's purpose, creating a separate Web page for mobile devices might be worth considering. If you don't have the resources or design for a small business, CSS and HTML works fine. See the section "Design without Standards? Pay the Price" elsewhere in this Guide.
Focus on the most important pages of a Web site
Generally, mobile users view only a couple of pages per site, just enough to get the information they need and move on. It's time consuming and tedious to surf with a small screen, so they limit their use. As a mobile device user, I often view the home page and use the search tool.
Text entry is difficult
Not all mobile devices come with a QWERTY or any kind of keyboard. Many cell phones rely on T9 Predictive Text Input for text entry. Though it speeds text entry, it's still tiresome to repeatedly press buttons when entering more than a few words. Devices come with buttons and bars, which can easy navigating around a Web site. Give the user choices that allow moving and selecting using the cell phone's buttons much like the Web pages of the Internet's early days when everything was text-based. Users just used the arrow buttons to move to an underlined link and then press "Enter" to go to that content.
Test with an emulator
A few sites offer an online emulator or one for downloading. An emulator allows you to view a Web site just like it would appear on a cell phone or whatever device the emulator covers. Available emulators:
Browser makers know the potential of mobile devices is great so they're providing resources for development efforts. One of Mozilla.org's current projects is Minimo Project (Mini Mozilla), a browser for small devices and machines with limited resources. Opera's browser comes with the ability to render its browser for small screen and handheld style sheet testing. It also has a section on how to design and write for small devices. Microsoft provides an SDKs (software development kit) for Windows Mobile as well as articles and emulators. Check out the style guides:
Statistics show a growing market for mobile devices, which leads to more interest in Web sites specially designed for such devices, or at least, use CSS and XHTML or XML. These tips and resources will help designers maximize the small screen surfing experience.