Saturday, 7 February 2009

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


4 comments:

Anonymous said...

hi,

Its really nice informative blog and very help full post.

Thanks for guide and post.

Nadeem Rao
latest mobile phones review

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Wireless LAN said...

It is for WinMo6.1, is it still relevant for WinMo7?

Barry said...

Hmm... well this post is pretty old but I believe the php script is kept up to date and I'm guessing you could get a Windows Mobile 7 emulator.