JavaScript EditorBest javascript editor debugger     Ajax website 

Main Page

Previous Page
Next Page

XHTML and CSS for Handhelds

Probably not too far in the future, you'll be able to use whatever (X)HTML and CSS you'd like for handhelds. Right now, however, support is good for some elements and dismal for others. Here's a rundown on what's safe and what's not.

What handhelds can and can't do

What you should do about it

Web access is expensive, mobile visitors often pay for every kilobyte (sometimes up to a penny per K).

Make every K worth it. Hide the extra parts (see page 205), use fewer and smaller images, etc. Note that some hand-held browsers will download even those images (and other elements) that are not to be displayed. For them, you'll have to create a super-lean mobile-specific site.

Visitors may choose to show pages without images to speed access (and save connection costs).

Make sure that every meaningful image on your site has alternate text (see page 91) so that visitors who view your page without images don't lose any info. Decorative images can use alt="".

Handhelds sometimes filter Web sites through proxy servers, which strip out or shrink whatever the handheld browser can't deal with, like large images and problematic XHTML and/or CSS.

Keep your images really small. Test your site thoroughly.

Handhelds have narrow screens, but vary a fair bit between the smallest and the largest (while most phones average 100 - 150 pixels in width, PDA are in the 200 - 300 range and some Pocket PC type hand-helds can be as wide as 600 pixels).

Use one column with narrow margins or preferably, none at all. Don't use floats, absolute positioning, tables (whose contents may be displayed in an order you haven't envisioned), or pop-up windows. Don't make headers so big that they don't fit across the screen.

Support for CSS properties margin and padding is good. It's a good idea to minimize the space between paragraphs, just go easy on the horizontal margins.

Avoid fixed width designs. Use ems and percentages instead.

Handheld browsers typically have no mouse or other pointing device and limited text-entry capabilities.

Add navigation systems that make it easier for visitors to get around text-heavy pages (see page 207).

Most handheld browsers support a single font face, two or three font sizes at most, and can do boldface but not italics (at least not well).

With that in mind, forget about the CSS font property and focus on using header tags (H1, h2, etc.) to distinguish titles and section heads. Use paragraphs (p) for regular text. Use bold text for emphasis (b or strong) and use italics sparingly.

Use percentages or ems to resize body text, not pixels.

Handhelds are good at lists, and may assign access keys (keyboard shortcuts) to numbered list items.

You can use numbered lists (ol) for navigation bars.

The CSS background-image property is not well supported.

Avoid background images. (And see next tip on background-color.)

More and more handhelds have color screens.

The CSS properties color and background-color are generally supported. Make sure you keep the contrast high between the text color and the background color so that folks looking at your page out on a sunny day can still see what's what.

Borders are supported...

... as long as you like them solid.

CSS properties like max-width, max-height, and overflow would be useful for dealing with varying small screen widths but are not well supported yet.

Keep them in mind and watch for upcoming handheld browser support.

Some handheld browsers will ignore the CSS file altogether.

Make sure your site displays adequately with no style sheet applied. View your site with as many handhelds or handheld simulators as you can (see page 201).

Previous Page
Next Page

JavaScript EditorBest javascript editor debugger     Ajax website