Step 3 There are a few interactions closely associated with the iPad and iPhone in particular, as well as the new wave of tablet devices in general. These include pinch and swipe, and are treated just like normal user events as far as scripting and the browser event model are concerned, so they’re accessible via Javascript in the same way a click or a mouseover are.


Step 4 You can set up event listeners to handle individual events using the syntax window.ontouchmove. If you’re not confident working with Javascript directly, or prefer to work through a framework such as jQuery (jquery.com), there are helpful plug-ins that allow easy access to these touch-specific events.

One such library is jQTouch (jqtouch.com), which provides access to the full range of touch-based events as well as having a convenient helper method for offline web-app caching, which suits our needs perfectly. We won’t use the helper method here, but be aware of its presence, as it can make the process more straightforward.


Step 5 If you design two versions of your site’s layout for portrait and landscape modes, you’ll need to include a crafty bit of code. You can load different CSS layouts into your pages according to the device orientation by using the following metatags at the top of your code:


    (orientation:portrait)” href=”css/iPad-portrait.css”>

    (orientation:landscape)” href=”css/iPad-
    landscape.css”>