Learning from our
    screw-ups
Useful Things — 2008
• Work with the device’s capabilities rather
  than against it
• No popups, don’t scroll all over, do...
Learning Before We
    Screw Up
Useful Things — 2010

• Don’t eval() arbitrary JSON
• Cache your AJAX
• Focus on perceived startup time and
  latency
• Th...
More

• Sync local and remote storage
• Use gzip
• When to use SVG or canvas?
• http://www.w3.org/TR/mwabp/
Mobilize your apps!
                                                                                                      ...
Design for flexibility                                   Remember                                     Spare the network    ...
Speaking of SVG
• Largely mobile-dominated for a long time
• Now gone mainstream
 • shipping in IE9, indexed by Google
• h...
The Divide Disappears

• Strong current trend towards convergence
 • Though that’s not what it’s called
• Top developers t...
Up Next: DAP
What We Don’t Do

• Geolocation
• Device orientation
• Web Performance
• Web Notification
• Whatever WebApps does
Widgets or Web?

• People hesitate
• Interesting security decisions to make
• The overlap matters more than the
  distinct...
Capture


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

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

• Calendar
• Messaging
• System Info
• Gallery
• Policy
Privacy
           The application programming interfaces
        (APIs) work that the W3C Device APIs and
       Policy W...
The Details
• http://www.w3.org/2009/dap/
• http://lists.w3.org/Archives/Public/public-
  device-apis/
• public-device-api...
Thanks!
Upcoming SlideShare
Loading in …5
×

W3C Mobile Web technologies

500 views
462 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
500
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • These were the things we decided to list as bad ideas in 2008 &amp;#x2014; they&amp;#x2019;re very much old school

  • Things change really fast




  • In fact if Google knew anything about cool technology they&amp;#x2019;d have used it


  • like, File







  • W3C Mobile Web technologies

    1. 1. Learning from our screw-ups
    2. 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. 3. Learning Before We Screw Up
    4. 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. 5. More • Sync local and remote storage • Use gzip • When to use SVG or canvas? • http://www.w3.org/TR/mwabp/
    6. 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. 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. 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. 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. 10. Up Next: DAP
    11. 11. What We Don’t Do • Geolocation • Device orientation • Web Performance • Web Notification • Whatever WebApps does
    12. 12. Widgets or Web? • People hesitate • Interesting security decisions to make • The overlap matters more than the distinctions
    13. 13. Capture • Grab pics, audio, video from <input> • Have an API to instantiate same
    14. 14. Contacts • Get information from user’s contacts • Cool for social networking • Mozilla has an early implementation
    15. 15. And More... • Calendar • Messaging • System Info • Gallery • Policy
    16. 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. 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. 18. Thanks!

    ×