Thursday, June 10, 2010

Writing HTML5 Mobile Apps

Writing in HTML5 for mobile apps may require some rethink from traditional best practices on the desktop web. We'll give a quick overview of the high-level things you should take into account and we'll dive into the nitty gritty details in future articles. Let's go!

Absolute Positioning & ViewportFor the desktop web, the vast majority of content is developed in flow layout (as opposed to absolutely positioned). Historically, this has allowed designers to be relatively indifferent to the pixel resolution of the user's screen. That strategy doesn't work out very well on a mobile device because the resolution difference between the iPhone/iPad/G1/Droid etc. are dramatic and the enviornment in which the device is being used requires tighter control over the position of elements. For example, if a user has to hit a button with only one hand to work the device, the button really needs to be in exactly the right spot (as opposed to off the screen). 

Viewport is a new meta tag that is available and is particularly useful for mobile situations.


meta name="viewport" content="width=320, user-scalable=no"

Using viewport, you can design to one resolution (say 768x1024) and have the whole page display on every device you are targeting. In conjunction with viewport, if you use absolute positioning, you can guarantee the fidelity of the user experience.

Viewport can sometime be tricky to implement on multiple devices correctly escpecially when the devices rotate etc.. To help with this, appMobi has created some convenience functions in their JavaScript helper functions - AppMobi.useViewport([widthPortriat], [widthLandscape]). Documentation for this can be found here: appMobi API documentation.


Cache is King
For mobile apps, a network connection isn't omni-present. HTML5 and the appMobi javascript library have facilities for caching data (HTML5) and media (appMobi). Use them early and often, your users will love the fact that the apps/sites work faster when they're online & and even work when they're offline!

Animation Is In!
What used to be the province of Flash is now available to the iPhone/iPad/Android/Nokia/BBY6.0 and all webkit based devices. You can move, rotate and flip elements with the greatest of ease. We have one sample that allows you to roll a soda can on a table top - that animation updates 100 times per second and it works beautifully even down to Gen1 iPod Touches. Check out the source code here: http://appMobi.com/Gallery.

No comments:

Post a Comment