Learn The Process of Building an iPhone Optimized Website Using jQTouch

There is no doubt about the fact that Apple's iPhone has emerged as a people's platform. While the company is able to maintain a healthy app development scenario, there is absolutely every chance for the enthusiast developers to get their app running in the Apple App Store. Believe it or not, but the iPhone OS and most importantly jQTouch, has given web developers reasons to be reckoned with.

iOS with a unique implementation of jQTouch provides fully-featured web browsing for iOS that responds incredibly with touch-based devices. jQTouch as a jQuery plugin makes the entire process of creating iPhone specific websites easier and faster. JQTouch comes packed with all the relevant tools that make your mobile web look and feel like a native one. It embraces rather than shunning the challenges provided by the mobile environment and that's what makes it superior and versatile.

In this post, I am going to explain you a complete process of building an iPhone optimized website using jQTouch. The guide is easy to understand and will surely help you in getting your iPhone site up and running. So, let's get to work!

Preparing the HTML Structure

jQTouch applications are basically developed in a single HTML file, usually index.html. The file contains all the HTML, JavaScript, and CSS or we can say styling related codes. It's the only file which is responsible for whatever happens within your application and gets loaded in the Smartphone just like Gmail or any other Google application. To create an HTML structure add the following code inside

Notice how we have used the viewport meta key to revamp the presentation of our content that is to be displayed in Mobile safari. Talking about the ‘initial-scale', it's nothing but the scale used to represent the content when the first time it's being viewed by the visitor. Maximum and minimum scale are the scales that determine the user's extent to zoom in or out a content. Since, all these values are 1 in our code, so the user is unable to zoom in or out the content which we actually want to achieve. Additionally, observe the use of user-scalable, this is helpful in determining the user's capability to zoom out/in the content.

Now continuing with the HTML structure, we have created a basic structure or we can say rules for the device, we can now proceed on to develop our iPhone optimized website. At this point, both JavaScript as well as CSS files need to be linked together. For this you can take the reference of the jQTouch stylesheet (full or min) and then link it to the main stylesheet which contains all the basic styles you want your website to be implemented with.