The worst part of developing for the mobile web is ensuring that you’re accounting for the quirks of each of your target devices’ browsers.  I often compare this to developing for the fixed web circa 1998–  no matter how great your site looked in one browser, you still had to hack it to pieces to make it render correctly in another browser (*cough* IE *cough*).  To accomodate these nuances, you typically have to implement per-device views that can make projects exponentially harder to test, and really take the fun out of mobile development.

Fortunately, I spend a lot of time writing both the client side of my mobile web apps, as well as the server side components  that power them.  The easiest way I’ve found to quickly test the rendering of my output per device User-Agent is to install the User Agent Switcher component for Firefox.  This component allows you to quickly and easily  change the User-Agent header that your browser uses to identify itself to web servers.  With just a few clicks I can quickly run down a list of 10 devices and verify that device-specific logic is firing properly on the backend.  Additionally, I’ll often resize my Firefox window to the target device’s screen dimensions (e.g. 240×320) to get a rough approximation of the overall look and feel of the page.

While there is no real substitute for testing on real devices, this technique has proven useful to me and hopefully someone else will also find it useful.