Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

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:

  1. Screen size

    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)
    160x160
    320x320
    320x480

    Blackberry 7100x series
    240x260

    Blackberry 7780
    240x240

    Dell Axim x30 and x50 Pocket PCs
    320x240

    Dell Axim x50v
    640x480

    HP iPaq
    240x320

    Smartphones (Motorola, Samsung, and i-mate)
    220x176

    It's bad, isn't it?

  2. 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.

  3. 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.

  4. 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.

  5. 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.