For the past few weeks, I've been researching the best way to design a web site that will display a mobile version for all or most mobile devices. I have an iTouch and also have easy access to a Blackberry Storm, so I thought I had it nailed down. I couldn't have been further from the truth.

A bunch of web sites / blogs I read said way back in 2006 that all you had to do was create a mobile.css file and designate it as media="handheld." You'd think that if they were saying that in 2006, that it would be pretty standard now in 2009. Simple enough. I tried that. Nope.

Then I tried the "@media handheld and (max-width: 480px)" conditional in the master.css file. This designates certain stylesheet code to handheld devices with a max width of 480 pixels. Surely that would work. Nyet.

It's frustrating because the iTouch and iPhone come with the Safari web browser, so it doesn't think it's a handheld device, really. It can render web pages without needing a handheld version.

But I want it to display a handheld version, damnit!

Finally, in my travels around the web, I read a blog that mentioned a company (mobify.me) that creates a mobile version for you based on your site. You actually have some say in the design, but it isn't all that user friendly. It took me several days to get something to work and THEN I had to create a new CNAME entry on my domain to handle it. You can see my current solution at m.dekedesign.com. Keep in mind that viewing it in a web browser on your computer doesn't do it justice. It really looks good on a mobile device.

I'm not completely happy with this solution because part of it was out of my hands. You shouldn't need a third party to create a handheld version. It should be easier than this...grrrr...stay tuned...this isn't over yet.