14 May 2013

Making enterprise apps sparkle with HTML5

HTML5 is a powerful development tool for mobile applications, whether they’re web-based, native or hybrid. Here’s are a few tips to creating a stand-out enterprise apps using some of its features.

Think mobile-first

While there might be a small number of users running your app on their desktop or laptop, the bulk of its life is going to be spent on mobile devices, so proceed from a mobile-use point of view. Avoid long tables, drop-down menus and other phone-poison features like radio boxes.

Take advantage of APIs

There are various APIs that can be used to either add functionality or enhance user experience on an HTML5 app. Take advantage of the geo-location capabilities of mobile device to provide local information to your users, but avoid loading map programs on devices too often, as this can drain system resources and impair performance. Separate your web-based app from a user’s previously-browsed pages by using the history API to allow your app to directly manipulate the browser’s history stack, and use file-writer to save data to a user’s device.

Provide offline support

The caching framework available in HTML5 allows for a high level of functionality when the user’s off-line. Design your app to be able to run offline, then push data pack to servers once it’s back in coverage. Create a cache.manifest and include all files, including client-side scripts, that you’ll need.

Make your web-based apps feel native

There are a couple of tricks available to mobile app developers to make apps deployed through a device’s web browser feel as slick as native apps. Use the <viewport…/> meta-tag to force your app to run in full-screen mode, and bind it to an icon on the home screen for iOS devices. Use phonewrap so that users can navigate their phone’s OS without quitting your app, make your clickable elements responsive with touchstart and visual effects, and build your UI elements manually with CSS3.