CSS : Document for handhelds

CSS document for handhelds

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?

Ideally, you want handheld web users to avoid having to scroll across. To test this, open up your website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn't require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

What your website offers to handheld web users should be quite different to what it offers on traditional web browsers, as the user experience is quite different. For further information, a book such as Handheld Usability is a great read.

Other Topics

CSS : Vertically aligning with CSS ,CSS : Positioning within a container ,CSS : Hiding text using text-indent ,CSS : The * HTML hack ,CSS : Minimum width for a page ,CSS : Same navigation code on every page ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector