I’ve been researching CSS for handhelds of late. Chapter 15 for my new book is about CSS for handhelds—Chapter 15, does that mean I’m almost finished—yes! It’s been tough finding information and testing the CSS I’ve written in ways that yield reliable information. Consider this:
- Some devices, especially phones, use only WAP (Wireless Application Protocol). Phones labeled WAP2 can use regular websites with XHTML and CSS.
- Some devices, such as the BlackBerry, offer users a choice between WAP and regular browsing.
- Some devices only support HTML 3.2. Some support HTML 4. Some support XHTML.
- Some devices support CSS. Some do not. Those that do support CSS understand
linkbetter than@import. - Some phones apply screen styles as well as handheld styles; others ignore both.
- Screen widths range from 100 pixels to 320 pixels for phones.
- Screen widths range from 320 pixels to 640 pixels for PDAs.
- Some devices have monochromatic screens. Some have color.
- Some software, such as AvantGo on either a phone or a PDA, offer users a choice as to whether they want images to display or not.
- Most devices can’t handle tables, floats, frames, JavaScript, popups, or dynamic menus. Some devices, however, will display simply formatted tables and JavaScript when there is a
metaelement declaring the documentHandheldFriendly.
Testing is a nightmare, too, because there aren’t enough easy to find and use emulators and simulators available.
I’ve been able to come up with a few helpful ideas for CSS for handhelds, but I think we still have a long way to go before there’s much predictability in this area. My advice for now is to make lavish and liberal use of display: none for nonessential parts of your pages and make sure your color contrast is going to work on a small screen. Check your pages with CSS switched off to make sure they linearize sensibly (good semantic HTML is the underpinning of everything no matter what kind of device you’re designing for). Provide skip navigation links or other navigation aids to make the pages easier to work through.
Drawing near the close of the writing work on the new book makes me aware of how much I’ve neglected Web Teacher in the last few months. This little excerpt from what’s coming is my way of making peace and promising to be back soon with lots more.
Technorati Tags: web design, accessibility, usability, CSS, web design education, web standards
Among the things I learned when adapting my weblog for mobile access were that if I had content in a second or third column (either by floating or absolute positioning) that I still wanted to be visible on the page, it was a good idea to set display: static on it so that rather than trying to display as a second column in the width of a mobile device, it displayed where it normally would based on file order. Also, turn floats off. It also helped to reset widths and margins; in a three column layout, having the main column set to a width of 60% might work well, but on a mobile device, it threw a lot of usable space away. Much better to set the width to something like 95%.
I also wound up shrinking the background pattern I use on my site for mobile use; the one for desktops just looked clunky at mobile size. By shrinking it to a quarter of its desktop dimensions, I actually made the site look more like the desktop rendering on a mobile device than it did using the desktop graphics.
Thanks for the great input, Ralph. Good information.