Contact Marie-Claire Forgue <w3t-comm@w3.org> for more information.
W3C
Mobile Web Application Best Practices
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.
- Use cookies sparingly.
- Do not send cookie information unnecessarily.
- Optimize network requests.
- Avoid redirects.
top ↑
Set users free
Mobile devices are used in various contexts, from killing time
at home to urgent requests on the go. Let users know and control what happens
to earn their trust.
- Ensure the user is informed about use of personal and device
information.
- Enable automatic sign-in.
- Offer users a choice of interfaces.
- Don’t change focus when dynamically updating page sections.
top ↑
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.
top ↑
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.
- Support a non-JavaScript variant if appropriate.
top ↑
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.
top ↑
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.
top ↑
Mobilize your apps!
These guidelines aid the development of rich and dynamic mobile Web
applications. For more information:
www.w3.org/TR/mwabp/
Supported by the MobiWebApp FP7 EU project
mobiwebapp.eu
top ↑