Question

I would like to know how I can make a webpage that will look good in most mobile phones.
For making normal webpages, I use dreamweaver cs3.
I don´t really want to use emulators unless I have too.
Can I not just center everything in the middle, with auto margins on both sides.

When I am looking at the pages that I have made sofar, they look ok,
but in a mobile phone some things get cluthered.
I am planning to strip out all the non essential information and markup for use on the mobile phone.

Then there is the question, basicly the most important one for me now

How to present a different page if the mobile phone go´s to the same address?

edit

I diddn´t get an answer om the last one, but I found a browser detection script that I could use.

thanks, Richard

Answer 1

In order to get the greatest amount of compatibility, you have to trade it off with ditching most of the bells and whistles browsers running on desktop computers consider run of the mill.

• Declare the mobile doctype with your XHTML documents, and make sure your markup and styleheets are valid.
• Keep you CSS real simple. No :hover, don’t use images as part of the design, limit your usage of fixed sizes/margins.
• Emulators aren’t as effective for testing as the actual devices themselves. Phones that do Wifi/Bluetooth PAN can make life cheaper, but testing over carrier’s network will also help you get a better understanding of the speed and latency.
• There is no “typical device”, but if you can get your website looking really good under webkit without using webkit’s CSS addons, you’ve covered a huge chunk of devices (Nokia S60, iPhone, Android etc). Work with Opera Mini, and you’ll expand that chunk even more.
• Compact your output as much as possible. Not only are your end users going to be screen and CPU processing limited, they are most likely going to be limited by network. The faster you can push out your data to them, the less-sluggish your website will feel.