How to Use CSS in Handhelds

Today we will concentrate on handhelds, since after normal desktop and laptop browsers, handhelds are the most common in use. However, these principles apply to all media types, with the exception of screen.

There is no rule that says you have to create a stylesheet for handhelds. In fact, you should only create a handheld stylesheet if you have a specific idea of how you want your page to look on a handheld device. Handheld browsers have certain limitations, and if you are unwilling to cater to those limitations, just leave well alone, and make your stylesheet target all media types.

Most handheld browsers will apply reformatting to pages, to try to make them work, even if you do not do this yourself. In fact, in most cases, the browsers are better at this than you are, and you can help them along by having clean, semantic markup.

The handheld media type is a little bit overloaded. It means several things:

* Handhelds have a small screen. Sizes may vary from 100 pixels wide, to over 500 pixels wide. Designs based on positioning or floats generally do not work, and neither do large margins, paddings, fonts, or images. Adverts in particular are problematic.

* Handhelds do not have a reliable pointing device. No Web page should ever force a user to use a mouse, but especially with handhelds, this cannot be relied on. Most handhelds do not have any kind of pointing device, and will simply allow the user to focus links or form inputs, one at a time. Some, but certainly not all, may allow the user to also focus mouse event targets. Some may be able to use a stylus, but these only touch the screen one tap at a time, and cannot be used for continuous hover effects, such as pure CSS menus. Only a tiny percentage of device browsers use a mouse pointer, but these are controlled very clumsily using keys, and cannot be reliably used for control either.

* Handhelds do not usually have a complete keyboard. They do not usually have modifier keys (Ctrl/Alt/Shift), and may have a limited keypad with very few keys, often requiring multiple keypresses to get one character. In general, they do not fire key events when typing, and may not actually retain focus on an input when typing (typically using a dialog that is not controlled by the browser). In some cases, they may have a fairly complete keyboard, but these will be missing keys like F1, and are still relatively awkward to use. Web pages that rely on keyboard events or access keys are generally not suited to handhelds.

* Handhelds do not like frames or scrollable areas. In many cases, the lack of a pointing device is what causes the problem, and it is very difficult to focus and scroll another frame. Some browsers can only show one scrollbar - on the edge of the screen.

* Handhelds usually have low bandwidth connections, and not much memory to store Web pages in. Web pages that use lots of images for decoration or content are not welcome.

The handheld media type has to represent all of these, and if you create a handheld stylesheet, it must cope with all of these problems. It must not attempt to force any specific widths - this is a fairly common mistake on real pages - a handheld stylesheet must allow the design to work at different screen sizes without the need to scroll horizontally.

You can also use media queries to specifically target the problems caused by screen size. They can be adapted to many different screen sizes, and are much more useful and flexible in this respect.

Note: Some of the higher resolution PDAs and tablet PCs are not treated as handheld devices. Browsers that run on them may not respond to the handheld media type, and may use screen instead. Some handheld browsers do not support enough CSS to use handheld media, and will always use screen media.

Making a handheld stylesheet can be done one of two ways.

1. By making sure that the normal stylesheet does not apply to handheld media, and then have a separate stylesheet that applies only to handheld.

2. By making a stylesheet that applies to all media types, then have a handheld stylesheet that changes only the parts of the full stylesheet that cause problems for handhelds.

Which one you use is up to what suits you and your site best. This site uses the second approach, reducing large fonts, removing margins, floats, positioning, and showing a few extra links to aid navigation.

It also uses media queries to help progressively apply some of these changes to various window sizes, so even desktops can have a layout that suits the browser window size.