Useful Things — 2008
• Work with the device’s capabilities rather
than against it
• No popups, don’t scroll all over, don’t use
• Don’t use nested tables for layout
Useful Things — 2010
• Don’t eval() arbitrary JSON
• Cache your AJAX
• Focus on perceived startup time and
• Think about interaction method variety
• Sync local and remote storage
• Use gzip
• When to use SVG or canvas?
Mobilize your apps!
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
• Keep DOM size reasonable.
personal and device information.
• Enable automatic sign-in.
• Offer users a choice of interfaces.
• 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
W3C Sexy Cards
Design for ﬂexibility Remember Spare the network Exploit mobile-
Web Principles Use appropriate Web protocol
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.
adaptation. • Avoid redirects. • Use appropriate client-side storage
• Use fragment IDs to drive application view.
• Do not send cookie information
W3C Sexy Cards
Speaking of SVG
• Largely mobile-dominated for a long time
• Now gone mainstream
• shipping in IE9, indexed by Google
The Divide Disappears
• Strong current trend towards convergence
• Though that’s not what it’s called
• Top developers target both
• See http://html5boilerplate.com/
What We Don’t Do
• Device orientation
• Web Performance
• Web Notiﬁcation
• Whatever WebApps does
Widgets or Web?
• People hesitate
• Interesting security decisions to make
• The overlap matters more than the
• Grab pics, audio, video from <input>
• Have an API to instantiate same
• Get information from user’s contacts
• Cool for social networking
• Mozilla has an early implementation
• System Info
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.