JQTouch is a web framework built on JQuery and intended to make mobile sites render through a webview and operate like a native mobile application.

We’ve used JQTouch in a couple of different scenarios, such as a web site interface for iPhone and running on top of phonegap to build a standalone application. I’ll describe how we used it to provide a mobile interface for sneakonthelot.com.

Sneakon is a virtual environment for networking and discussing film. The primary interface uses flash, so iPhone visitors aren’t able to work with it. In fact, iPhone visitors were getting a message to install flash and a link to Adobe! We wanted to quickly replace that with something that made sense for iPhone users. We provided a basic registration application for iPhone users that we can expand to more features over time.

First, we needed to modify a static html page to redirect iPhone visitors to the mobile site. We didn’t have the luxury of a front page that would be processed through a server where the user agent could be tested. The best solution for this situation is a little javascript to test the browser type after loading the front page. We added this to the header of index.html:

<script language=javascript>
<!–
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
location.replace(“http://sneakon.com/sneakapp”);
–>
</script>

sneakon.com/sneakapp is where the mobile site is hosted.

In many situations, you may want users to be able to choose to go back to the full site even with a mobile device. For sneakon.com that didn’t make sense, but when you do need this we recommend you make a link back to the regular site that works from the mobile site. That gives your users the best mobile experience right away with the option to go back to the full site.

In the next article I’ll go over putting JQTouch into the mobile pages and building some basic iPhone navigation.