Head First HTML with CSS

#9 Pages for Mobile Devices
Do you want your Web pages to be usable on mobile devices, like cell phones and personal
digital assistants (PDAs)? If you do, then you need to keep some things in mind when creating
your pages. While mobile devices are getting more sophisticated, their support for XHTML
and CSS still varies widely among the various devices. Some support CSS, some don’t; some
display XHTML really well, others make a mess of it. The best thing you can do is anticipate
potential problems and plan for the future when support will be better.
First, remember that you can write a “handheld” specific style sheet by using the media
attribute of the element.
leftovers
Unfortunately, support for the “handheld” style sheet media type is still limited, so
even if you’ve got a handheld style sheet link in your Web page, that doesn’t mean
the browser on your phone will actually use it. So, you need to keep some general
design techniques in mind so your Web page looks good on both computer
monitors and small devices:
n
n
n
n
n
n
Remember that many mobile services still charge by the amount of data
transmitted to the device. This is a good reason to write simple, correct
XHTML and use CSS to style your Web pages.
Keep navigation simple and obvious. That means you should use text links
and avoid special scripting effects that require a mouse and keyboard to use.
Scale down your page as much as you can. If you have a handheld style sheet,
use it to reduce your font sizes, margins and padding as much as possible.
Keep in mind that your multi-column layouts will often be ignored on small
devices, so pay careful attention to the ordering of elements in your XHTML.
Many mobile devices lack support for frames and pop-up windows, so avoid
these.
Finally, the best solution is always to test your Web pages on as many devices
as you can to know how they truly perform on small devices.
And while support may currently be limited, if you get in the habit now of writing
alternative style sheets for the “handheld” media type, you’ll be well prepared for the
future when there’s more support for them.
To create a style
sheet for mobile
devices, use the media
attribute with a
value of “handheld”.
you are here 649