Testing mobile web pages in Firefox

Sean — Wed, 24 Sep 2008 17:19:56 +0000

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.

GZIP content for mobile devices

Sean — Wed, 02 Jul 2008 18:31:39 +0000

One of the easiest, most obvious ways to lower the data transfer footprint of your mobile apps is to compress data. For some reason, I still see mobile web decks that output XHTML-MP in plain text instead of very-easy-to-implement GZIP compression. I’ve implemented GZIP output on multiple J2EE projects with the help of Jayson Falkner’s excellent GZIPFilter which is available in his article Two Servlet Filters Every Web Application Should Have.

To implement the filter in your own projects, download the three pieces of the filter: GZIPFilter, GZIPResponseStream, GZIPResponseWrapper and save them in your project. Then, in your web.xml add the following entries:


Compress
GZIPFilter


Compress
*.do

Remember to adjust the url-pattern to what’s appropriate for your webapp. I typically map my Spring MVC dispatcher servlet to *.do, but that’s just a hangover from Struts.

Once you’ve redeployed your webapp you should verify that output is rendering correctly in a desktop client such as Firefox.

Sean Cook » Handsets

Testing mobile web pages in Firefox

GZIP content for mobile devices