Best Practices in XHTML Design for Mobile Devices

If you're starting your career designing or developing for mobile devices using XHTML, you've made a good choice. You probably already know about XHTML tools, tricks, and design. However, we'd like to caution you: designing for mobile devices is not like designing for large-screen devices. Differences include:

• Text input is difficult. DTMF keypad and stylus input mechanisms are simply more difficult to use than QWERTY or other full keyboards. Don't make users type if you can avoid it.
• Data transfer costs. Users are likely to pay for mobile access, either by the minute or by the kilobyte. Don't waste their money.
• Screens are small. 120 pixels wide is a lot smaller than the 800 or 1024 you've gotten used to.
• Processor and transfer speeds are slow. Even high-end devices on high-speed networks are going to be slower than computers attached to high-speed - or even dial-up - networks.
• Users are mobile. They therefore have different goals, tasks, and constraints than users sitting in front of a computer. Their primary goal will be to find a piece of information, not to browse the web.
• Most devices can not be upgraded. You'll have to accept the limitations they have when they were launched.
• Every keystroke costs usability. Users will have to scroll through your page much the same way you can tab through a page on your computer. Try shrinking the size of your browser window and then tabbing through the controls. Each time you hit the tab key, equivalent to the user hitting the down arrow on the phone, your site is that much more difficult to use.

Design Strategies

Below you'll find some overall strategies that will help you create easy-to-use XHTML web sites for use on mobile devices.

1. Know your target devices. Devices and browsers have a variety of differences:
   • Openwave devices support XHTML Mobile Profile with WML extensions. Nokia only supports XHTML MP. Access and AU Systems only support XHTML Basic, a subset of XHTML MP. Either use XHTML Basic, or detect the browser type and deliver appropriate content. (XHTML MP is XHTML Basic plus the style, hr, b, i, big, and small tags)
   • Some devices render the title element of the page, others do not. Most, however, use it for labeling bookmarks.
   • Knowing the browser does not give you enough information to predict rendering. Samsung, for example, uses the AU System browser but has built their own rendering engine.
   • Some devices (Openwave, Access) respect the nowrap formatting directive, others (Nokia, AU Systems) do not except under specific circumstances.
   • Other rendering differences.
2. Know your target gateways. Gateways, which may be provided by carriers, can affect how your content is rendered. They may allow only validated XHTML Basic through, they may translate graphics, and they may do other things. Or they may not exist at all. Check with carriers in your major target markets.
3. Think vertical, not horizontal. Most mobile devices have a vertical layout, and users scroll downwards to get more content. Forget anything you've learned about users viewing the middle of the screen first: they view the top first on mobile devices. Therefore, avoid navigation bars, tabs, and side-by-side positioning. Design from the top down.
4. Design with lists, not tables. There are all sorts of problems with tables:
   • To display a table, a device must perform floating-point calculations, which slows down the rendering of the table.
   • Different devices render tables differently; at least some browsers will render every table with equal-width columns, no matter what you do.
   • Different devices enable different types of navigation; users may have to scroll horizontally through each row before being able to scroll downward.
   • Devices treat tables wider than the screen inconsistently.
   Lists enable vertical designs as mentioned above. Exception: if you have tabular data, by all means display it in a table. A calendar month-view is an excellent example of data that should be presented in a table. Tips on using lists:
   • Use ordered lists (ol) for lists where you need numbered access and do not need formatting control over the numbers. (don't forget to assign access keys).
   • Use definition lists (dl) when you need numbered lists and you need formatting control over the numbers (or you need an item 0). You'll need to render the number as well as define an access key.
   • Use definition lists (dl) for situations where you need subsections. The dt item will be left-aligned; the dd item will be indented. There is no need to define a dd for every dt.
   • Use ul or dl for other lists. code>ul will give you bullets, dl will not.
5. Use all possible parts of the markup language. Although many devices do not support certain extensions to XHTML Basic, the features can greatly enhance usability. For example, Nokia and some Openwave devices support the WTAI library, enabling phone calls to be made directly from your page. Some browsers support the CSS extension -wap-format-input, allowing you to restrict input in a text field. Openwave supports the WML tags enhancing navigation. These types of extensions can greatly enhance usability.
6. Think small. Devices have small screens, small processors, small memory, restricted text input mechanisms. Keep your pages small, your text input reduced, tables minimized, CSS minimized, comments eliminated, etc. Tips:
   • Don't use large CSS files. These can result in excessive visual clutter, reducing readability. They also take a long time to download, resulting in the browser redrawing the screen after the user is partway through reading it. Keep the number of CSS elements defined to 4 or fewer.
   • Don't use large graphics. These take a long time to download, and should only be used when the main content of the page is the graphic.
   • Don't use graphics as layout. Spacer graphics or other layout graphics take a while to download and cause the final rendering of the screen to be delayed. Keep graphics informational and restricted to 1-2 items per page.
   • Avoid splash screens. These simply add time and cost to the user's experience without adding value.
   • Keep text styles simple. The small size of the screen makes a variety of text styles look cluttered and difficult to understand. Use at most 3 text styles per page. Rely on only one type of text emphasis. Keep the font consistent (most phones only have 1 font to begin with). Avoid background colors for text.
   • Use few colors. The differing screens and user situations mean that colors may not be experienced as you intend them, and may not be distinguishable from each other. Pick a small (1-3) set of colors for a page and stick with them.
   • Keep content short. Keep your site's content short and to the point.
7. Use caution with external CSS. In theory, external CSS allows you to have one CSS that applies to your entire site while reducing the amount of downloading the user has to do. In practice, many browsers do not cache the CSS and thus download it again for each page the user visits. Further, when the CSS is downloaded, the already-displayed XHTML content jumps around to render the new styling. Although not part of the XHTML Basic standard, internal CSS (part of the head element) is supported for Openwave, Nokia, AU Systems, and Access browsers.
8. Keep navigation simple and consistent. Use only one primary method for accessing content. Keep your site shallow - 3 layers is a good target maximum. Keep the navigation consistent from page to page so that your users can learn it. Navigation tips:
   • Don't use drop-down menus (select lists) for navigation. Users won't understand or use them.
   • Don't use tabs. They require graphics and tables, making them very time-consuming to load. They also require the user to scroll past them to get to content.
   • Don't put breadcrumb navigation at the top of the screen. To make it fit on one line, you would have to use graphics (and probably tables). The user has to scroll past them to get to the content. If you use them, put them at the bottom.
   • Don't put a search function at the top of the screen. This would encourage the user to use it before looking at the page content, thereby requiring the user to type. If you have a search function, put it at the bottom of the screen.
   • Do use a simple graphic at the top of the page with a navigational icon suggesting what site (using graphic style) and what portion of the site (using graphic detail) the user is at, plus a brief title indicating what page the user is on.
   • Do provide a link to your site's home page, preferably at the bottom of the page.
9. Keep colors and images simple. Remember that your devices are small, have screens that don't necessarily render colors well, and are used in a wide variety of light and glare coniditions. Therefore,
   • Use high-contrast colors for images and fonts. This is not the place for subtlety. Users won't be able to see subtle color distinctions, even if their device does support 65,000 colors.
   • Avoid background images if possible. If you do use a background image, keep it very small and let it repeat. Realize that some devices do not support background images, so ensure your color scheme works well on your background image as well as on a white background.
   • Don't use black or dark background images or colors, including shading regions of the page. Some browsers do not support coloring text, so your page could become unreadable.
   • Avoid blue and purple colors for fonts. These are traditionally colors of links. This suggestion is even more important on mobile devices than on desktop devices, as some devices will not underline links, and the only coding for a link is the color.
   • Use the same, simple color palette for all the graphics in your site. This will help ensure a consistent look and feel and contribute to site identity.
10. Carefully design session, cache, and security management. Specifically, be aware that:
    • Cookies may not work as expected. For example, some gateway/device combinations result in cookies never expiring.
    • Some devices do not cache, or only cache a very small amount.
    • Session management may be restricted to URL variables. This is especially true for carriers who deliver a random user ID with each hit, making it impossible for you to determine whether the user is the same from hit to hit. You'll need a contractual relationship with the carrier to get a static user ID.

Over the next few months, Openwave will be gathering more specific suggestions and recommendations for designing for multiple XHTML browsers. Stay tuned!