jQTouch: Mobile Web Development with a Shallow Learning Curve
While the iOS and Android browsing experiences are pretty spectacular compared to other mobile devices, many Web developers have felt left out in the cold. Traditional Web development interfaces generally do not fare too well when used in conjunction with touch-based interfaces and cramped screens. For many, the idea of setting years of Web development experience aside in order to devote the time and resources necessary to learn how to develop iOS and Android applications isn't particularly appealing.
But simply trying to ignore this exploding new market isn't exactly realistic, so what's a Web developer to do? One possibility is to build a mobile Web application which embraces rather than shuns the unique challenges presented by the mobile environment. If you find this idea appealing, the jQTouch jQuery plugin can give you exactly the helping hand you're looking for.
Installing jQTouch for Mobile Web Development
jQTouch is a jQuery plugin, meaning installation simply involves loading the jQTouch plugin into a Web page after having loaded jQuery:
You can obtain jQTouch from its GitHub repository. Incidentally, the
themes directory referenced in the above snippet is also found in the jQTouch download. Incidentally, the
apple theme is an iPhone-optimized theme bundled in the download. Be sure to view your mobile Web application using each of the available themes to determine which one you find most suitable. Finally, note the use of jQuery 1.4.2. At the time of this writing, using a newer version of jQuery will break jQTouch! Be sure to consult the jQTouch documentation to determine the officially supported version of jQuery.
With the references in place, all that remains to begin using jQTouch is to initialize it, done using this snippet of code:
Keep in mind this is the simplest possible initialization, as there are actually quite a few initialization options at your disposal. See the jQTouch wiki for more information about what's available.
With these two steps completed, you can go about building your mobile Web application.
Creating the Mobile Web Application Pages
Believe it or not, all of your jQTouch application pages will reside within a single HTML document. jQTouch treats every top-level
div element as a page, with the first one it finds taking precedence as the home page. The home page seems like a good place to start, so let's create one:
<div id="home" target="_blank"> <div class="toolbar" target="_blank"> <h1>GameNomad</h1> <a class="button leftButton flip" href="#home" target="_blank">Home</a> <a class="button rightButton flip" href="#login" target="_blank">Login</a> </div> <ul> <li class="arrow" target="_blank"><a href="#popular" target="_blank">Popular Games</a> </li><li class="arrow" target="_blank"><a href="#playing" target="_blank">Currently Playing</a> </li><li class="arrow" target="_blank"><a href="#news" target="_blank">Gaming News</a> </li><li class="arrow" target="_blank"><a href="#contact" target="_blank">Contact Us</a> </li></ul> </div>
Loading this page into an iPhone browser produces the screen found in Figure 1.
Click here for larger image
Figure 1. The Sample Mobile Web Application Home Page
As you can see from Figure 1, jQTouch renders each page using a series of styles optimized to present the HTML in a format suitable for mobile devices. For instance, the toolbar is rendered by creating a
DIV assigned the class
toolbar. Text found within an embedded
h1 element defines the title. Additionally, you can create buttons using hyperlinks which have been assigned the
button class, with the button position (left or right) defined by
rightButton, respectively. When a user clicks on a hyperlink, the animation effect which transitions the page can be identified using one of eight supported animations:
swap. Be sure to experiment with each in order to understand their unique behavior.
Lists are rendered using the standard
li tags. jQTouch will automatically stylize the lists as presented in Figure 1, however you can optionally embellish these lists in a variety of ways. For instance, the arrows situated to the right of each list item are added when the
arrow class is added to