Android Web App GUI layout and control

I am trying to create a Mobile version of my website. It is an online application, but I would like to make a mobile version through the web format.

So if they visit, www.example.com it takes them to the mobile version. (Which it does currently). But the problem that I am having is creating a nice user friendly interface between the multiple devices, ie: BlackBerry, Android, iPhone. And I am sure this is near impossible to get the same. But I would like some similarities.

Is there any form of template that I can start from? I have noticed that it is better t开发者_如何学运维o use "EM" font-sizes verses any other to create a more stable consistency.

I really enjoy this layout of TweetDeck

I like the layout of the buttons along the bottom. Is there anything I can do to create this consistency? Do I create this in my browser at 100%, or do I need to detect the width of the browser FIRST and then create the UI?

You really should look at some of the mobile javascript libraries. They do all of the hard work for you and you just have to deal with the API that they present. Here are a few that I have found in my own research:

Sencha Touch - http://www.sencha.com/products/touch/ JQTouch for JQuery folks - http://www.jqtouch.com/ And if you are a .NET component person - http://www.componentone.com/SuperProducts/StudioiPhone/