While modern mobile devices can display your content quite well, there are some issues that you should keep in mind regarding font and scripting support. In addition, certain content types may not display well on small screens, including large images, nested lists, and tables.
Fonts
Font support can be spotty. In some mobile device browsers, only one font face is supported, with limited font size support. Handheld device browsers can support bold text, but support for italic text may be poor. My advice:
- Go ahead and style your text as you wish using CSS, but be aware that some of the handheld device browsers may render your text in a limited way.
- Use percentages or absolute size keywords to specify font sizes rather than pixels. That should help keep the text readable on a small screen.
The seven absolute size keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. You might consider specifying the medium size as the default size for the paragraph element.
Scripts
JavaScript is poorly supported in mobile web browsers, so you should avoid its use or provide an alternative for users who can't use JavaScript or have it turned off. This practice would also help some disabled users as well as handheld device users.
Here's a rather crude example of how to provide an alternative by using <noscript> code:
<script type="text/javascript"> document.write('Hello Javascript World'); </script><noscript>Hello World Without Javascript</noscript>
In this case, the browser would display the message Hello Javascript World if Javascript is supported. Otherwise, Hello World Without Javascript would be displayed.
However, this doesn't mean that all scripts cause problems. For example, the CGI-based scripts that are often used to activate forms usually work as expected on mobile devices, so feel free to keep them in place.
Content Types
In my experience, only three commonly used content types cause serious display problems on handheld devices: large images, nested lists, and tables. Fortunately, there's a way to work around each of these display problems.
Large Images
Since mobile device screens can be very small, the mobile device browsers will attempt to resize large images so that they will fit on the screen. Even though the browser is displaying a small image, the actual file size remains large and the image may load very slowly.
Fortunately, it's easy to use CSS to hide large images to keep them from loading in the mobile environment. There's a very useful attribute and value pair ("display : none") for use within CSS documents that you can put into place to hide content from display on mobile devices (or other hardware, for that matter).
To do this, you can create a custom class to add to your external "handheld media" style sheet, and this custom class can be used whenever you need it:
.dontShow { display : none; }
Note that the class name begins with a dot (.dontShow). 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 mobile device's browser to ignore the content in question and to not display it, while a desktop PC or laptop would still be able to display it.
For example, if you've created a class called .dontShow and you want to hide a large image, add the class to your image element code:
<img src="images/world_map.gif" class="dontShow" alt="map of the world" />
Coding Tip: Note that the dot in the .dontShow class name is not needed and should not be used within the <img> element.
Design Tip: Small images, such as RSS feed icons or "bookmark this" buttons, can work well in the mobile web environment so feel free to keep them in place. Well-chosen small graphics can be beneficial to users at any screen size.
Nested Lists
Nested lists can get pretty ragged-looking on a small display. Try to keep your lists to only one level of nesting.
You may need to recast your lists — try replacing the outer level of nesting with paragraph XHTML elements instead of list elements.
Tables
Tables do not display well on the smallest mobile devices, so you'll need to avoid using table-based coding to lay out your pages. Use CSS layout techniques instead. If you're not familiar with CSS page layout techniques, I’ll be providing a simple example later in this guide.
If you have a large table containing tabular data, you can hide it from view on mobile devices while making it available for "screen media" users:
<div class=”dontShow”>
<table>
[ table coding goes here ] . . .
</table>
