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:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script src="/js/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
<style type="text/css" media="screen">@import "/js/jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "/js/themes/apple/theme.css";</style>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:
<script type="text/javascript">
var jQT = $.jQTouch({ });
</script>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.
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 leftButton and 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: cube, dissolve, fade, flip, pop, slide, slideup, and swap. Be sure to experiment with each in order to understand their unique behavior.
Lists are rendered using the standard ul and 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 li.
Creating a Mobile Web Application Form
In Figure 1 you might have noticed the Login button located to the top right of the page. Despite their ubiquity, appealing form stylization has always presented a challenge to many developers. Thankfully, jQTouch does a fantastic job of rendering the form in a fashion which suits mobile devices. Let’s take a look at these capabilities by creating a page named login, and within it, a login form:
<div id="login" target="_blank">
<div class="toolbar" target="_blank">
<h1>Login</h1>
<a class="button leftButton flip" href="#home" target="_blank">Home</a>
</div>
<form id="form-login" enctype="application/x-www-form-urlencoded" method="get" target="_blank">
<ul class="rounded" target="_blank">
<li><input type="text" />
</li><li><input type="password" />
</li></ul>
<a id="submit-login" class="whiteButton submit" target="_blank">Login</a>
</form>
</div>Navigating to this page produces the form found in Figure 2.
As was done with the home page, you can use several interesting jQTouch-specific CSS classes and attributes to tweak the form. Additionally, I’m using the cool placeholder attribute which was introduced with HTML5.
Of course, it’s not possible to process forms using traditional approaches; instead you’ll need to process it using Ajax. If you haven’t yet explored Ajax-driven forms processing, it’s a lot easier than you think. While an explanation is out of the scope of this article, the following snippet demonstrates how to use jQuery-specific syntax to bind an event to the login form’s submission button:
google.setOnLoadCallback(function() {
$(function() {
$("#submit-login").click(function(e){
alert("You submitted the form!");
e.preventDefault();
});
});
});Prompting Users to Add Your Mobile Web App
Of course, we’d like the user to repeatedly return to the mobile Web application. One great way to encourage users to do so is by prompting them to add a link to the iPhone’s home screen. In doing so an icon (the image used to represent this icon identified by the icon property which you can set when initializing jQTouch) will be added to the home screen; clicking on the icon will take the user to the mobile Web application. The user can add the mobile Web app by first clicking on the ubiquitous middle icon located on the bottom toolbar, and then pressing the Add to Home Screen button (see Figure 3).
To clue the user in to this possibility you could use a jQuery notification plugin such as jQuery Grows.
Conclusion
With more than 10 billion App Store apps downloaded, and a staggering 51.9 million Android-powered phones sold in the second quarter alone, the smart phone has quickly transitioned from a luxury item to consumer staple in a strikingly short period of time. Consumers and businesses alike are increasingly reliant on these devices to search the Web, check email, track expenses, keep in touch with friends over Facebook, and carry out any number of myriad daily tasks.
jQTouch is a very slick mobile Web application library well suited to devices such as the iPhone and any Android-based phone. Have you built anything cool using jQTouch? Tell us about it in the comments!
About the Author
Jason Gilmore — Contributing Editor, PHP — is the founder of EasyPHPWebsites.com, and author of the popular book, “Easy PHP Websites with the Zend Framework”. Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer’s conference, and was a member of the 2008 MySQL Conference speaker selection board.
