Create an iPhone Optimised Website using jQTouch

Recently I have been digging deeper into the world of web development for mobile devices. In particular for mobile Safari which is the browser that the iPhone and iPod Touch uses. I have recently been working on a redesign of my main freelancing website and I’ve decided that I’d like an iPhone-friendly version and so I have chosen to create a tutorial out of developing my own iPhone optimized website.

This tutorial isn’t going to walk you through every single path you could take, but simply the path I decided to take. But it will give you a clearer insight on how to approach web development for Mobile Safari.

In this tutorial we’ll be using jQTouch which is a jQuery plugin for mobile web development on the iPhone and iPod Touch. You’ll be needing the framework so grab your copy here.

References for further reading will be posted at the bottom of this post.

So, get a webkit browser (Chrome/Safari) at the ready and your trusty iPhone or iPod Touch if you own one and get ready to create an iPhone optimised version of your website. Or in this case, my website.

The HTML Structure

Create a new HTML document (index.html) containing a simple HTML, Head, Body structure.

Add the following inside <head></head>.

<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

Pages: 1 2 3 4 5

This entry was posted on Monday, June 7th, 2010 at 09:00 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Matthew Leak is a freelance Web Designer and Developer from Manchester in the UK with an avid interest for new and exciting web technologies and trends. Follow Matthew’s updates on Twitter and be sure to check out his blog.

About the author Published by Matthew Leak

19 Responses »

  1. Can’t see the demo… blank site!
    Google Chrome, by the way.

  2. The demo is working for me? Are you trying to view the demo with Javascript disabled?

  3. I really like and appreciate your blog.Really thank you! Awesome.

  4. The sliding did not work for me after following the tutorial. After troubleshooting, I found that the global.js is missing this part which is responsible for the sliding from one page to another:

    $(function(){
    jQT.addAnimation({
    name: ‘slide’,
    selector: ‘.revealme’
    });
    });

    In the end the content of my global.js file looks like this:

    var jQT = new $.jQTouch({
    icon: ‘jqtouch.png’,
    addGlossToIcon: true,
    startupScreen: ‘jqt_startup.png’,
    statusBar: ‘black’,
    preloadImages: []
    });

    $(function(){
    jQT.addAnimation({
    name: ‘slide’,
    selector: ‘.revealme’
    });
    });

    And then the app started working like your demo.

    Thanks for this tutorial!

  5. Nice Tutorial! I’m also playing around with jqTouch actually
    but reached very fast my boundaries of comprehension about
    jQuery + jqTouch.

    For example, use custom events or trigger something if first li is entered. Or why the hell already tested functions dont work anymore
    or with interrupts.
    I think i need more table edges for my head here.

    If you are interest, you can have a look about it here:
    http://stackoverflow.com/questions/3548853/jqtouch-event-handling-and-strange-behaviour-of-functions

    Best regards,
    Thomas

  6. Making a website is really not that tough, and top of all, you can create a website or more website for free.
    Building a website is a extremely individual skill and is different with each client.
    It is more about revealing your business to new probable clients and generating new sales.

  7. Hi,

    Thanks for the tutorial. Just a little observation about the viewport metas. These seem to be useless unless you set the fixedViewport option to false when initializing jQTouch.

    Indeed, this option is set to true by default so jQTouch defines its own values for the viewport.

    On the example above, the values set in the metas are the same than the jQTouch ones, so no everything’s displayed as expected. But if you wanna change the scales, for example, you have to set the fixedViewport to false.

  8. These lines:

    are actually not required if you set the fullScreen and statusBar options to true, so jQTouch will take care of it.

    I know these are details, but I think it’s cleaner to let jQTouch do the job ;)

    Anyway, this library definitely needs a documentation… >_<'

  9. Argh, the lines of code were filtered. I was talking about the “apple-mobile-web-app-capable” and “apple-mobile-web-app-status-bar-style” metas.

  10. does this work on android phones?
    (i don;t have an android to check)

    • Amazing, you have explained all the fundamentals of jqtouch for websites, including a detailed explaination of the viewport (which before didn’t really know much about), and plus it works almost seamlessly on Android! Thanks Matt!

  11. Hi,
    Thanks for Wonderful tutorial.
    I have one question.
    Your all page was static, if i want to dynamic pages from asp.net than how it will work?

    Thanks
    Ashish

  12. Hey is there any reason why this doesnt work on a blackberry phone? I know this is ment for iPhone but what if i wanted to use this for blackberry too. Any suggestions on how to get this to work?

  13. Hello
    I had tried everything but the menu can not be clicked.Links works sometimes only the first two and so there is no more..I’ve tried thet tip from Hari butdid not helpt..

Trackbacks

  1. designfloat.com
  2. JQtouch Tutorials: Getting Started | tutorials blogs
  3. Mobile Development Toolkit - Noupe Design Blog

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.