Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making HTML5 Work Everywhere

1,324 views

Published on

One of the great promises of HTML5 is that you can create software that runs everywhere. In many ways, HTML5 lives-up to this promise, but as with any evolving standard, support across different browsers and devices is inconsistent. To effectively adopt HTML5 today, developers must master the skills that fill-in the gaps and minimize the differences between HTML5 runtimes. In this session, you will learn the essential techniques needed to create HTML5 sites and apps that truly work everywhere.

You will learn:
• Learn four strategies for adopting HTML5
• Analyze the impact browsers have on HTML5 readiness & adoption
• Explore new HTML5 features and techniques for using in older browsers

Published in: Software, Technology, Design
  • Be the first to comment

Making HTML5 Work Everywhere

  1. 1. Todd Anglin @toddanglin Telerik
  2. 2. Todd Anglin @toddanglin Telerik
  3. 3. EVP Product Strategy, Telerik 5x Microsoft MVP, ASP Insider, O'Reilly Author
  4. 4. Session Road Map Understanding the Evolution Adoption Strategies Applied Techniques Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
  5. 5. “While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.” -W3C on HTML4
  6. 6. HTML4 = Rough Guide Unpredictable Browser Support
  7. 7. How is the web evolving?
  8. 8. <HTML> CSS:3; ECMAScript(); “HTML5”
  9. 9. “Living Standard” WebSockets FileAPI WebGL HTML5 Forms Geolocation Offline Canvas Video Audio Canvas Video Geolocation Semantic Tags SVG WHATWG | W3C | IETF
  10. 10. Where is everywhere? (Which browsers matter?)
  11. 11. Know your users. Know your browsers.
  12. 12. of internet browses with IE, FF, Safari, Chrome, or Opera 99%
  13. 13. IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.” “ Dean Hachamovitch Corporate VP, IE
  14. 14. WD LC CR PR REC
  15. 15. In the future, browsers compete on speed, not on features
  16. 16. In the future, browsers update automatically and often
  17. 17. What is usable today?
  18. 18. X X X X X X X X X X X X X X X Adoption Strategies
  19. 19. X X X X X X X X X X X X X X X Adoption Strategies X X
  20. 20. X X X X X X X X X X X X X X X Adoption Strategies X X X X X X X
  21. 21. progressive enhancement graceful degradation
  22. 22. [Source: Aaron Olaf, Flickr]
  23. 23. [Source: Mercedes USA, http://mbusa.com/]
  24. 24. X X X X X X X X X X X X X X X Adoption Strategies X X X X X X X
  25. 25. 13:17
  26. 26. $(“code”).show();
  27. 27. STRATEGY #1 Lowest Common Denominator
  28. 28. THANKS FOR ATTENDING! Don’t forget to fill-out your evals. The end.
  29. 29. 25 26 41 138138 286287303320329337 374378386389390397415430434448 498505 0 100 200 300 400 500 600 relative HTML5 scores IE10 IE11 HTML5Test.com
  30. 30. 0 10 20 30 40 50 60 70 80 90 IE6 IE7 IE8 IE9 IE10 IE11* FeatureCount Supported HTML5/CSS3 Features As reported by CanIUse.com
  31. 31. Selectors (2.1) position:fixed 7.0 LocalStorage DragDrop API JSON querySelector 8.0 Video Audio WOFF SVG Canvas Geolocation Semantic Tags Lots of CSS3 9.0 XHR2 Web Workers Web Sockets IndexedDB History API File API CORS Blob URLs Typed Arrays Defer/Async Form Validation New Input Types Offline App Cache Much more CSS3 10.0
  32. 32. Don't sniff browsers. (Test for features.)
  33. 33. modernizr
  34. 34. Modernizr.[featureName] if (Modernizr.canvas) { //Use It! } .[featureName] || .no-[featureName] .no-canvas { //Styles } .canvas { //Other Styles}
  35. 35. DEMO Modernizr
  36. 36. <meta http-equiv="X-UA- Compatible" content="chrome=1">
  37. 37. 25 26 41 138 303 320 329 337 374 378 389 434 0 50 100 150 200 250 300 350 400 450 500 relative HTML5 scores
  38. 38. STRATEGY #2 Polyfill Enriched
  39. 39. Not all polyfills are created equal.
  40. 40. Old Equivalent Plug-in Backed JavaScript Powered Use legacy versions of same feature Implement feature using JavaScript Map browser feature to plug- in feature Memory & speed friendly Limited API coverage Portable & more complete Can be slow & memory hog Complete API & speedy Requires (user installed) plug-in
  41. 41. Old Equivalent Plug-in Backed JavaScript Powered • Fonts • LocalStorage • Semantic Tags • Opacity • CORS • CSS3 Selectors • CSS Layouts • Forms • Validation • JSON • Canvas* • Database • Canvas*
  42. 42. Semantic Tags Local Storage Form Validation Geolocation CSS3 Selectors
  43. 43. STRATEGY #3 Graceful Degradation & Progressive Enhancement
  44. 44. exit PowerPoint; exec Demos;
  45. 45. Safe WarningCaution • Relies on old native browser feature • Does not interact with DOM/rendering • Uses a plug-in (Flash/Gears) to do heavy lifting Polyfill Guidance • Large amount of JavaScript required • Manipulates DOM/layout • Superficial benefit (ex: rounded corners) • Attempts to change rendering (CSS) • Requires execution on page load
  46. 46. Which HTML5/CSS3 technique will you try today?
  47. 47. Todd Anglin @toddanglin anglin@telerik.com Thanks!

×