Optimizing A Website For iPhone via jQT: A Complete How To Guide

The popularity of the iPhone is not hidden from anyone and it is rapidly increasing with each iteration of the Apple iPhone. Its formidable fan following is an absolute epitome of the successful iOS mobile app development platform. Moreover, since, Apple has consistently endeavored (and continues that) to ensure a healthy app development, every iOS developer can efficiently make strives to get their app in the Apple App Store.

There are several blissful development tools that augment an absolute iPhone mobile app development. However, among all the tools, the jQT (which was formerly known as jQTouch) is an ultimate web app development framework. The jQT is an open source framework that offers utile features for developing mobile web applications. Initially, there were two themes available to it, including the Apple iPhone 2007 theme and their personal theme. This framework facilitates developers to conveniently create web applications with native look and feel of a targeted device; furthermore, it is touch optimized, which further makes it a viable choice for the iPhone app development. The jQT is also popular as a jQuery plugin that makes iPhone app development blazingly fast and easy.

The upsides of implementing jQT

  • Small learning curve
  • Lightweight framework, works at blazingly high speed
  • A huge community support
  • Simple and easily understandable source code
  • Offer all the touch-optimized features, so that you can target the latest touch screen devices

How to create an iPhone optimized website version by using the jQT
For those who are interested in creating a website that is optimized for the Mobile Safari browser, here is a resourceful guide for you.

Prerequisites for optimizing a website to efficiently reach colossal iPhone users are:
Download the jQT libraries
Code editor
Webkit browser (Safari)
iPhone device

Once all the aforementioned things are available at your end, you can begin the mobile app development process.

1. For the Header part
Create a new HTML document with simple structure, including head and body, and save it as index.html.
Within the head structure (that is, between the <head> and </head>), add the following lines of code.

<meta name=”viewport” content=”width=device-width; initial-scale=1; maximum-scale=1.0;” />

Here, the viewport meta key has been used to overhaul the visual appeal for the Mobile Safari in a desired fashion. The initial scale holds the value for scale that will showcase the content when a user visits the site for the first time. With the maximum-scale and minimum-scale, the zoom in and zoom out strength has been defined.

Now, the next step is to link both the JavaScript and CSS files together. It can be linked with the theme stylesheet that holds all the basic features that you want to represent in your website. This can be done by implementing the following code.

<link rel=”stylesheet” href=”css/jqtouch.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”css/theme.css” type=”text/css” media=”screen” />

Once it is done, you must integrate all the references to the appropriate JavaScript files, and create a file in the JavaScript directory and save it as global.js. Also, link the jqtouch.js and jQuery 1.3.2 min.js together.

2. To initialize jQT

Now, you will need to insert a few essential UI components in the global.js file. These include,
StatusBar – When a user will operate the app in full screen mode, it will represent the status bar.
addGlossTolcon – This will create a glossy effect on the icon.
Icon – This includes the icons of the home screen.
PreloadingImages – It comprises an array of image locations. This array is supposed to be passed before the page loading is accomplished.
StartupScreen – This will open the app in full screen mode.

This can be defined and set in the jQT as,
var jQT = new $.jQTouch({
icon: ‘jqtouch.png’,
addGlossToIcon: false,
startupScreen: ‘jqt_startup.png’,
statusBar: ‘black’,
preloadImages: [

3. For creating home page content
In jQT, all the superior div id on a page are treated as its page of content. In the below mentioned code snippet, we are adding links to easily access the “About” page, “Contact Us” page, and so forth. Here, all these pages are considered as its own page.

<div id=”home”>
<div ><a href=”/” id=”logo”>JQTouch</a></div>

<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>

4. For beautifying the content
To make the website content appear more appealing and engaging, you can enhance its look and feel in a desired fashion via CSS. Simply add the following code fragment in the main.css file and get an Apple optimized theme. However, you may change the color, size and other styling attributes to create a unique look and feel.

Code Snippet:
body {
background-color: #e5e5e5;

background: #888;

.header a{
background: url(‘../jqt/img/logo.png’) no-repeat;
height: 50px;
width: 150px;
display: block;
margin: 10px auto;

#home ul.menu{
margin: 0 5px;

#home ul.menu li{
background: #333;
border-bottom: 1px solid #000;
font-size: 12px;
list-style: none;
padding: 5px;

#home ul.menu li a{
color: #FFF;
text-decoration: none;

With this tutorial, you will get a version of your website optimized for iPhone. As far as styling is concerned, there is no limitation as such. You can implement as many div as you want in the HTML and create a design that best suits your requirements. Furthermore, you may make appropriate changes in the code included in this guide to create a fresh visual appeal.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>