Develop mobile stylesheets - handheld.css

Designing for mobiles can be IS a pain. First of all I'd recommend developing a 'handheld.css' stylesheet using these two browsers:

• Firefox & Web Developer Toolbar. (CSS -> display CSS by media type -> handheld)
• Opera. (View -> Small Screen)

Force mobiles to read the handheld stylesheet

Once you have the handheld stylesheet looking how you want it. Add it to your pages using this php script. We all know browser detection is evil and bad, but mobile support for standards isn't here yet and this is the most pain free way. In my case I did something like this:

if( mobile_device_detect()==true ) {
//I am a mobile
<link rel="stylesheet" type="text/css" media="screen, handheld" href="handheld.css">
}
else {
//I am a browser
<link rel="stylesheet" type="text/css" media="screen" href="main_layout.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
}

Test on an emulator

Installing a mobile phone emulator can be a bit of a lengthy process as well:

1. Install ActiveSync
   
2. Unzip and install V1Emulator standalone_emulator_V1.exe
3. Install the Virtual Network Driver (part of Virtual PC)
4. Install the Emulator Images & Device manager for Windows Mobile 6.1
   

The tricky part is enabling internet connectivity. Start ActiceSync and set "Allow connections to one of the following" to "DMA" in the File, Connection Settings menu of ActiveSync.

Choose an emulator to launch, e.g. Start -> SDK -> Smartphone QVGA - Coldboot. Once it's running, open Start -> SDK -> Tools -> Device Emulator Manager. Right click on the device and select 'cradle'. This will place the emulated smartphone in the virtual "cradle" so it can access the network through ActiveSync.

Test on a phone

The only sure fire way to test if everything is working properly is to use an actual smart phone.

Good luck

Refs:

http://www.alistapart.com/comments/returnofthemobilestylesheet/

http://detectmobilebrowsers.mobi/

http://www.codinghorror.com/blog/archives/000782.html