Develop HTML5 Mobile Apps With Viewport Metatag


Using HTML5 for mobile apps require us to rethink traditional best practices on the desktop web. Here is a quick overview of the high-level things to take in account and we'll go deeper into the details in future articles.

Absolute Positioning & Viewport for the desktop web, is how a majority of content is developed in flow layout (as opposed to absolutely positioned). This has allowed designers to be relatively indifferent to the pixel resolution of the user's screen. More mobile design strategy needs to be used to account for the pixel resolution for the iPhone / iPad / G1 / Droid etc. are dramatic and the environment 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 particularly useful for mobile situations.

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

Using viewport, now a designer or developer can design to one resolution (say 768×1024) 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 integrity of the user experience.

Viewport can sometimes be difficult to implement on multiple devices in particular when the devices rotate etc .. To help with this, use a development tool that provides some simple functions in the JavaScript helper functions that taken account ([widthPortriat], [widthLandscape]) while using the viewport meta tag.

Cache Early and Often

For mobile apps, a network connection is not omni-present. HTML5 and a javascript library have facilities for caching data (HTML5). Use them early and often, and the apps / sites work faster when they're online and even work when they're offline!


Leave a Reply