W3C Mobile Web technologies
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • These were the things we decided to list as bad ideas in 2008 — they’re very much old school

  • Things change really fast

  • In fact if Google knew anything about cool technology they’d have used it

  • like, File


  • 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!