Develop for iPad with HTML5: Trial and Error
Though there are certainly practical limits on what may be achieved with web applications targeted for these devices, ambitious developers like Thomas Fuchs (of script.aculo.us fame) are pushing those limits to see what is possible.
In an illuminating blog post, Fuchs explains the various technical choices he was forced to make in order to achieve acceptable performance on Apple’s iPad when developing the gorgeous Every Time Zone application, which is optimized for the iPad:
- Avoid images and CSS gradients, but painting gradients on HTML5
<canvas>tags is OK.
- Avoid CSS shadows, which again means relying on
<canvas>for glows and shadows.
- Use CSS for animations, and keep them simple, since hardware acceleration goes away when things get complicated.
ontouchmove), rather than
onclickwhen they are available.
- Avoid CSS opacity, which tends to disable hardware acceleration when you least expect it.
- Use 3D CSS animations, even when you only need 2D, because Mobile Safari only offers hardware acceleration for 3D translations.
Reading between the lines, it seems clear that developing for Apple devices using web technologies is still very much a trial-and-error process. As mobile devices from Apple and others continue to evolve rapidly, the rules will change frequently over the next few years.