Creating a HTML 5 Web App for iPad – Part 1

The iPad is (at least for now) the perfect device for consuming media (on the go) and for casual browsing and news consumption. In my point of view there’s no reason for most apps to live in the App Store, the majority would work equally well (if not better) as websites or web apps with the benefit that they would be accessible on all platforms, be free from Apple censorship and are easier to develop (just count the number of HTML vs. Objective C developers). There are a few instances were the speed and processing ability is needed (such as games and media players) but most apps are basically information presenters and the web is more than adequate of handling that.

However, there are some optimizations that can be done to most websites for optimal display and a few other issues that needs to be adressed to allow websites to feel as native apps on the iPad (and other mobile touch devices).

Viewport and Native Size

Left to its own imagination the iPad thinks that all websites are 980px wide, add horizontal scrolling if the page is wider and scale up smaller sites to 980px even though the native resolution (in portrait mode) is 780px.  When flipping to landscape the page is zoomed in to the same 980px.

To keep the iPad at the native resolution in both portrait and landscape a meta tag has to be added. It defines the resolution and keeps the user from zooming in.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

Running the App in Standalone Mode

The lines below will open the web site as a full-screen app on the device when accessed from an icon at the Homescreen (after the user has chosen “Add to Homescreen” from the bookmark option in Safari), this means that it’ll be run in its own thread, won’t mess up the Safari tabs and hide the URL and status bar. Whether or not the user runs the app in standalone mode can be found by accessing the window.navigator.standalone property. It’s a nice touch and produces a more focused user experience if the site is opened using a homescreen icon while the exact same website is also available on the open web.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Orientation Change and Design for Mobile

There are two ways to change the layout depending on device orientation (or viewport size ratio), either by checking the resolution in css or by binding the orientationChange-event.

The easiest (but most blunt method) is to check the viewport size using a media query in the css and provide different classes for different resolutions. This would work for the iPad and desktop browsers that would get a suitable layout depending on the browser window width. However, this locks the design to the current iPad and desktop displays, new and emerging display technologies using much higher pixel densities would not work well and confuse our stylesheets into believing that the screen is much larger than it really is. If the content-width has not been set to the device width (see above) the cutoff resolution would have to be 980 pixels for the iPad. Anyway, to do it is quite simple

@media all and (max-width: 768px) {
    body {
        /* extra styles for mobile or portrait*/
    }
}

@media all and (min-width: 769px) {
    body {
        /* extra styles for desktop or landscape*/
    }
}

Just remember to define a set of defaults first since Internet Explorer doesn’t understand CSS media queries.

Better control can be devised by checking user agent strings  and assigning classes using JavaScript and then set the specific styling using those classes. To check the initial orientation of the device we can use window.orientation, and check the viewport resolution if that isn’t available

if (!isNaN(window.orientation)) {
    var orientation = (window.orientation == 0 || window.orientation == 180) ? "portrait" : "landscape";
    $("body").addClass(orientation);
} else {
    // Choose layout depending on viewport width
    var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
    $("body").addClass(orientation);
}

It’s also easy to bind a class-change to the orentationChange-event so that the layout switches when the device is rotated

window.onorientationchange = function() {
    var orientation = (window.orientation == 0 || window.orientation == 180) ? "portrait" : "landscape";
    $("body").attr("class", orientation);
}

Android phones should also support both window.orientation and window.orientationchange, but I haven’t tried it.

iPad Webapp Skeleton

I’ve put together a small and very basic iPad Optimized WordPress Skeleton using the previously mentioned techniques, download it and contact me if you want to add or comment something. For clarity I’ve peeled away almost all styling so it’s ugly as hell but the main point is for it to show the concepts above.

Stay tuned for part 2 where I’ll show how to set the icon for the Homescreen, use local storage, touches and swipes and more.

References

• Apple-specific meta tags