Thursday, October 6, 2011

HTML5 rocks the mobile Web

Great post about HTML5 techniques for mobile on 'HTML5Rocks'. Not sure I agree with everything it says though.

It describes three HTML5 techniques for optimizing mobile Web performance:
  1. For smooth native-feeling sliding and flipping page transitions, use a translate3d(0,0,0) CSS transform to force the phone's Graphics Processing Unint to kick in and perform hardware-accelerated page compositing.

    3D comes at a price though... Hardware acceleration can quickly drain your phone's battery, and some fonts won't look as nice when composited in 3D on the iPhone for example, so you better choose them carefully.

  2. Manually fetch HTML pages and cache them in HTML5 local storage to speed up page navigations and enable the app to work offline (as you have all your pages stored locally).

    What HTML5Rocks doesn't describe is how to fetch and cache all the resources referenced by these pages, like CSS style sheets, JavaScript scripts, or images, and that's a lot more work...

  3. Listen to the network online/offline events and detect the connection type (Ethernet, Wifi, 3G, Edge) using the navigator.connection.type property.

    Well, the online/offline events are useful but navigator.connection.type is not supported on the iPhone (only on Android), and you can't rely on it anyway as sometimes an overloaded public Wifi will get slower than 3G... What you really needed is a measure of the quality of the end to end network connection in terms of bandwidth and latency, and you can get that by instrumenting your usage of XMLHttpRequest in your client code as well as your server code.

My 2c... The techniques described in that HTML5Rocks post are fine to get you started, but implementing them is not so simple. As usual, the devil is in the details.

No comments:

The postings on this site are my own and don’t necessarily represent positions, strategies or opinions of my employer IBM.