What works well in a mobile web environment

Most XHTML elements are supported within mobile device web browsers. The six basic headline elements, <h1> through <h6>, work well, as do the paragraph element (<p>) and the various list elements.

Support for XHTML-based forms is also quite good. You'll be able to make use of the usual text boxes, radio buttons, check boxes, and other types of form fields.

I've also found that Server-Side Includes (SSIs) are well supported. If you have chunks of content that you use on multiple pages on your website, you can continue to use SSIs.

Using a Table of Contents

Since mobile device users may not be using a mouse or other pointing device, they may benefit from having access to a special table of contents or other supplementary navigation. However, you may not feel the need to provide these features to "screen media" users. In this case, you can add a style class to your "screen media" style sheet to hide such content from users with desktop or laptop computers.

     .handheldContent { display : none; }

Note that this custom class name begins with a dot (.handheldContent). The dot tells the browser that you’re creating a custom CSS class and that this class can be used many times within the document.

The "display : none" attribute and value pair coding instructs a desktop or laptop computer's browser to ignore the content in question and to not display it, while a mobile device would still be able to display it.

This .handheldContent style can be used whenever it is needed and as many times as needed.

To create a table of contents for mobile device users only:

     <div class=”handheldContent”>

     <p><strong>Contents:</strong></p>

     [ table of contents coding goes here ]  . . .

     </div>

Coding tip: Note that the dot in the .handheldContent class name is not needed and should not be used within the <div> element.