This document discusses various tips and best practices for developing mobile web applications. Some of the key points covered include: - Optimize response time by aggregating static images, including background images inline, and keeping DOM size reasonable. - Design for flexibility by supporting multiple interaction methods, ensuring text flows, using server-side detection where possible, and using device classification to simplify content adaptation. - Remember generic web principles like replicating local data, ensuring consistency of state between devices, and not executing unescaped JSON data. - Spare the network by using transfer compression, caching resources and AJAX data, minimizing external resources, and optimizing network requests. - Exploit mobile-specific features like

1. Learning from our
screw-ups

2. Useful Things — 2008
• Work with the device’s capabilities rather
than against it
• No popups, don’t scroll all over, don’t use
blank.gif
• Don’t use nested tables for layout
• http://www.w3.org/TR/mobile-bp/

3. Learning Before We
Screw Up

4. Useful Things — 2010
• Don’t eval() arbitrary JSON
• Cache your AJAX
• Focus on perceived startup time and
latency
• Think about interaction method variety

5. More
• Sync local and remote storage
• Use gzip
• When to use SVG or canvas?
• http://www.w3.org/TR/mwabp/

6. Mobilize your apps!
www
Optimize response time Set users free These guidelines aid the development of rich
and dynamic mobile Web applications.
For more information :
Every detail matters in mobile Web Mobile devices are used in various www.w3.org/TR/mwabp/
applications and some technical points contexts, from killing time at home
may significantly boost the overall user to urgent requests on the go.
experience. Let users know and control what
happens to earn their trust.
• Aggregate static images into a single
composite resource (sprites). • Ensure the user is informed about use of Mobile Web Application
• Include background images inline in CSS
style sheets.
• Keep DOM size reasonable.
personal and device information.
• Enable automatic sign-in.
• Offer users a choice of interfaces.
Best Practices
• Minimize perceived latency. • Don’t change focus when dynamically
• Optimize for application start-up time. updating page sections. Supported by the MobiWebApp FP7 EU project
® W3C 2010
mobiwebapp.eu
!!!"!#"$%&
W3C Sexy Cards

7. Design for flexibility Remember Spare the network Exploit mobile-
Web Principles Use appropriate Web protocol
specific features
Web applications are run in evolving
and heterogeneous environments. Mobile devices are just one way to features to reduce network bottlenecks Some Web technologies are
Flexibility allows you to address more access the Web. Generic Web and latency. particularly relevant to mobile devices.
devices and users at reduced cost. principles also apply to the development Learn to use them.
• Use transfer compression.
of robust mobile Web applications.
• Design for multiple interaction methods. • Cache resources by fingerprinting resource • Make telephone numbers "click-to-call".
• Ensure text flows. references. • Consider mobile-specific technologies for
• Replicate local data.
• Prefer server-side detection where possible. • Cache AJAX data. initiating Web applications.
• Ensure consistency of state between devices.
• Use client-side detection when necessary. • Minimize external resources. • Use the meta viewport element to identify
• Do not execute unescaped or untrusted
• Use device classification to simplify content • Minimize application and data size. the desired screen size.
JSON data.
adaptation. • Avoid redirects. • Use appropriate client-side storage
• Use fragment IDs to drive application view.
• Support a non-JavaScript variant if • Optimize network requests. technologies for local data.
appropriate. • Use cookies sparingly.
• Do not send cookie information
unnecessarily.
W3C Sexy Cards

8. Speaking of SVG
• Largely mobile-dominated for a long time
• Now gone mainstream
• shipping in IE9, indexed by Google
• http://berjon.com/blog/2010/09/
bouncy.xhtml
• http://svg-wow.org/

9. The Divide Disappears
• Strong current trend towards convergence
• Though that’s not what it’s called
• Top developers target both
• See http://html5boilerplate.com/

10. Up Next: DAP

11. What We Don’t Do
• Geolocation
• Device orientation
• Web Performance
• Web Notification
• Whatever WebApps does

12. Widgets or Web?
• People hesitate
• Interesting security decisions to make
• The overlap matters more than the
distinctions

13. Capture
• Grab pics, audio, video from <input>
• Have an API to instantiate same

14. Contacts
• Get information from user’s contacts
• Cool for social networking
• Mozilla has an early implementation

15. And More...
• Calendar
• Messaging
• System Info
• Gallery
• Policy

16. Privacy
The application programming interfaces
(APIs) work that the W3C Device APIs and
Policy Working Group (DAP) is chartered to
perform represents the largest and most
thorough assault on users' privacy ever
undertaken by a single working group.
http://www.w3.org/2010/api-privacy-ws/papers.html

17. The Details
• http://www.w3.org/2009/dap/
• http://lists.w3.org/Archives/Public/public-
device-apis/
• public-device-apis@w3.org
• http://berjon.com/
• @robinberjon

18. Thanks!