The W3C has released its "best practices" guidelines for mobile Web application development. According to the W3C, "The goal of this document is to aid the development of rich and dynamic mobile Web applications. It collects the most relevant engineering practices, promoting those that enable a better user experience and warning against those that are considered harmful."
The W3C hopes these guidelines will help developers build browser and OS-agnostic applications for the mobile platform that could lead to the proliferation of Web Apps across mobile devices in 2011.
Among the pearls of web app wisdom imparted in the guidelines are:
Spare the network: Use appropriate Web protocol features to reduce network bottlenecks and latency.
- Use transfer compression.
- Cache resources by fingerprinting resource references.
- Cache AJAX data.
- Minimize external resources.
- Minimize application and data size.
- Do not send cookie information unnecessarily.
- Optimize network requests.
- Avoid redirects.
Remember Web principles: Mobile devices are just one way to access the Web. Generic Web principles also apply to the development of robust mobile Web applications.
- Replicate local data.
- Ensure consistency of state between devices.
- Do not execute unescaped or untrusted JSON data.
- Use fragment IDs to drive application view.
Design for flexibility: Web applications are run in evolving and heterogeneous environments. Flexibility allows you to address more devices and users at reduced cost.
- Design for multiple interaction methods.
- Ensure text flows.
- Prefer server-side detection where possible.
- Use client-side detection when necessary.
- Use device classification to simplify content adaptation.
Exploit mobile-specific features: Some Web technologies are particularly relevant to mobile devices. Learn to use them.
- Make telephone numbers "click-to-call".
- Consider mobile-specific technologies for initiating Web applications.
- Use the meta viewport element to identify the desired screen size.
- Use appropriate client-side storage technologies for local data.
Optimize response time: Every detail matters in mobile Web applications and some technical points may significantly boost the overall user experience.
- Aggregate static images into a single composite resource (sprites).
- Include background images inline in CSS style sheets.
- Keep DOM size reasonable.
- Minimize perceived latency.
- Optimize for application start-up time.
The guidelines themselves are fairly brief. According to the W3C, "In a world where the line between mobile and non-mobile is necessarily blurred ... a document that restricts its focus solely to best practices that are uniquely mobile would most likely be very short. With this in mind, the focus of this document is to address those aspects of Web application development for which there are additional, non-trivial concerns associated with the mobile context. This applies equally both to the limitations of the mobile context (e.g. small screen, intermittent connectivity), and also the additional scope and features that should be considered when developing for the mobile context (e.g. device context/location, presence of personal data on the device, etc)."
"I am very excited about this document, which I've already used myself to ensure that the W3C Cheat Sheet, a mobile Web application, works not just on mobile devices, but on all devices,” said Dominique Hazael-Massieux, W3C Mobile Web Initiative Lead. “These guidelines include sound advice from real-world Web apps developers, telcos, and browser vendors."
Adam Connors and Bryan Sullivan served as the the editors of the guidelines, with significant contributions from Daniel Appelquist and Scott Hughes from Vodafone, Jo Rabin from dotMobi, Phil Archer and Francois Daoust of the W3C, and Jeff Sonstein from the Rochester Institute of Technology.