Joey Nelson Blog Fiasco

I recently launched a ton of changes to omgtru, a site for my friends that runs my msgblorb message board software. There are a ton of backend improvements, mostly focusing on speed, but there’s some flashy stuff on the frontend. I’m especially happy with the new iPhone optimized version of the site.

My goal was to build a feature-complete version of the site with the same look and feel that performed beautifully on the iPhone and was as easy as possible to interact with. I was able to do it using essentially the same html (there are a few if $is_iphone statements in the templates, what can you do?) with some iPhone-specific CSS and js. That way I don’t have to maintain two separate sets of templates, which is something I’m delighted to avoid.

Building a web app interface specifically for the iPhone is an interesting challenge. The most obvious lesson is to make your interactive UI elements BIG. Since I’m clicking on a tiny screen with my fat, clumsy fingers, I need an easy target. omgtru uses pretty small, minimal UI elements so it definitely took some adjustments.

And obviously, you can’t use anything that relies on hovering. Working with scroll events is also a lot trickier, since the iPhone uses a viewport inside of the window.

And since your users could be on some slow ass 3G connections, your tried and true performance best practices are now doubly important. You definitely also want to cut out any CSS/JS that the iPhone site doesn’t need. If you’re consolidating and gzipping those files it won’t be a huge savings, but I managed to shave off several kb by getting rid of some jQuery plugins that iPhone users didn’t need.

This was my first experience building a web app interface specifically for the iPhone and I’m pretty happy with the results. My advice is to just use the app like crazy (on a real phone, not just the simulator) and keep getting rid of everything that annoys you. Then you should be in good shape.