Josh Price and his Robot Overlords

I've been looking for an excuse to try out the awesome jQTouch plugin. It's a jQuery plugin for mobile web development on the iPhone and iPod Touch. It uses plain old HTML, CSS and Javascript so it should also work well for other mobile devices like Android and even the iPad.

Peepcode has a great jQTouch screencast if you want the TopFunky to walk you through it.

I figured that since I built my own blog using Sinatra and a bit of code and inspiration from Tim Lucas, that adding a mobile version of this site would be a good place to start. Here's what I did to make it happen.

• The first thing I did was to download the iPhone SDK. This gives you Xcode with the iPhone simulator so you can test your site locally. You can find the simulator here /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app

• The next step involves using some of Lachlan Hardy's code for serving mobile pages in Sinatra. This is a small collection of helper methods that I modified slightly:

All you do is call deliver("template_name") when you want to render a template, and the deliver method will look for a template called template_name.mobile.haml if a mobile browser user agent was detected in the request. If one isn't there it will simply render the usua template template.haml

• Next I added a layout.mobile.haml template