Tips for designing web pages for mobile browser?

Question

I'm making my debut in designing a web app specifically targeted at mobile browsers. While I've written web pages before in C#/ASP.NET, I've never done anything specifically for the limited screen real estate and other idiosyncrasies of mobile browsers. So I'm looking for some pointers here:

• What design considerations should I be taking account of (aside from the obviously smaller screen)?
• What useful features are there in C# that can be put to good effect for the mobile client?
• How do you make sure to give a relatively uniform user experience for all different mobile browsers?
• Any other tips you have?

Thanks!

Answer 1

Probably obvious but make sure you define a bespoke handheld stylesheet.

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

Whilst modern smartphones (e.g. iPhone) can handle normal sites the constant zooming in and out is better avoided for a dedicated mobile app. However, it's worth designing two versions in case the user wants to access the app using a laptop / desktop too.

Answer 2

What design considerations should I be taking account of (aside from the obviously smaller screen)?

How about the user interaction, for example there are few devices that allow for "hovering", so don't depend on psuedo-classes that cannot be emulated on a mobile device, but don't completely ignore them, so mobile devices may use them.

Think about orientation of the design, if the device supports landscape and horizontal viewing.

Some devices like the iPhone cannot be operated to a mm accuracy using a stylus, so don't make inputs dangerously small.

If using effects to tart up the UI, most mobile devices don't display effect (such as those provided by jQuery) very well...

Finally test, test, test! Test on as many real mobile devices you can, and when you're done consider using emulators (such as ones for BlackBerrys or the iPhone), whilst this won't provide you with the feel of using the device, it should show any rendering problems.