7 Lucky Tips for Mobile Development

1) Use Opera Desktop browser with the small screen view (View->Small Screen).

Opera Small View

2) Use Firefox Developer Toolbar do use the Handheld Stylesheet (CSS->Display CSS By Media Type->Handheld).

Fire Fox Developer Toolbar CSS Handheld

3) Avoid Caching things that shouldn't be cached. If you're using a lot of GET requests or sometimes posting forms, be careful of caching. An easy way to avoid this is tag on a url variable with a current timestamp: mypage.php?t=123456

4) Remove Whitespace from your html output and css. Some serverside languages and frameworks have the ability to do this for you. If not you can always save your output to a variable and run a simple regular expression to remove spaces outside of tags like line returns, tabs, and new lines. With ColdFusion you might try:


5) Use a proper Doctype. Of course there's more than one that would probably work, but this is a start:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

6) Don't Rely on Javascript. Sure iPhone, Blackberry, Opera Mini are all getting pretty good, but the whole point of mobile development is for those who can't use the full version (js enabled). The only exception is if you're writing a browser specific site for a browser with good javascript support.

7) Use a CSS Reset. There are dozens of different resets available around. I suggest starting with a full reset, then once you've finished development scale it back to the elements you need.

*{ margin:0; padding:0; border:0; }

These are starter tips when developing for mobile browsers, but the support on mobile devices varies greatly, so the biggest unmentioned tip is to TEST, TEST, TEST!