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