best practice for developing webpage for mobile phone

Question

Hello,

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

Just my two cents:

1. Personally, I would make the layout fluid, so that it auto adjusts itself according to the length and breadth of the display. Remember many phones have accelerometers which can change the direction of the page, when tiled sideways. In this case, horizontal scrolling is a big no-no.

2. Just keep all useless things aside and present only the basic information, advanced or details information should be places under More button.

3. Don't use Images, or I say - Use it as minimum as possible. This would take the most of the user's bandwidth. If you are targeting this for people under GPRS/EDGE , then better avoid Images even more. People on 3G have a better chance.

4. You can have a look at Facebook or Gmail mobile interface to have an idea. Google Reader's mobile interface is also good, but still not upto the mark.

5. I don't know how much people would agree with me - Keep AJAX low. Most phones can't handle so much load if your page is highly ajaxified. Remember, it is a mobile and not a computer. It does have some limitation. Probably very high end phones can render it, but to keep your userbase strong, minimise the use.

---

Content Load: If the page takes just to much time to load, then probably the user won't bother using it. They would prefer to use any other alternative/service which can get his/her work accomplished.

CSS: Make less use of CSS as much as possible. Use colours more than Images as I said many times above. You should make use of float to make the page fit properly on the screen. If you desire you can use smaller font - but beware, don't go below a certain level.

Answer 2

A List Apart has a great article about conditionally using different style sheets for mobile devices:

http://www.alistapart.com/articles/putyourcontentinmypocket/

You can also check out Apples Documentation on designing web content for the iPhone, although it's iPhone specific, it pertains to mobile devices in general:

http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1

Answer 3

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.