Todd Anglin
@toddanglin
Telerik
Todd Anglin
@toddanglin
Telerik
EVP Product Strategy, Telerik
5x Microsoft MVP, ASP Insider, O'Reilly Author
Session Road Map
Understanding the Evolution
Adoption Strategies
Applied Techniques
Goal: Leave with at least 1
HTML5/CSS3...
“While it continues to serve as a
rough guide to many of the core
features of HTML, it does not
provide enough information...
HTML4 = Rough Guide
Unpredictable Browser
Support
How is the web evolving?
<HTML>
CSS:3;
ECMAScript();
“HTML5”
“Living Standard”
WebSockets FileAPI
WebGL
HTML5 Forms
Geolocation
Offline
Canvas
Video
Audio
Canvas
Video
Geolocation
Sem...
Where is everywhere?
(Which browsers matter?)
Know your users.
Know your browsers.
of internet browses with
IE, FF, Safari, Chrome, or Opera
99%
IE9 offers support for the
most relevant,
real-world web
patterns that developers
are using today as
well as the HTML5
pat...
WD LC CR PR REC
In the future,
browsers compete
on speed,
not on features
In the future,
browsers update
automatically and often
What is usable today?
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
X X
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
X X
X X X
X X
progressive
enhancement
graceful
degradation
[Source: Aaron Olaf, Flickr]
[Source: Mercedes USA, http://mbusa.com/]
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
X X
X X X
X X
13:17
$(“code”).show();
STRATEGY #1
Lowest Common Denominator
THANKS FOR ATTENDING!
Don’t forget to fill-out your evals.
The end.
25 26 41
138138
286287303320329337
374378386389390397415430434448
498505
0
100
200
300
400
500
600
relative HTML5 scores
I...
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....
Selectors (2.1)
position:fixed
7.0 LocalStorage
DragDrop API
JSON
querySelector
8.0
Video
Audio
WOFF
SVG
Canvas
Geolocatio...
Don't sniff browsers.
(Test for features.)
modernizr
Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.c...
DEMO
Modernizr
<meta http-equiv="X-UA-
Compatible" content="chrome=1">
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
STRATEGY #2
Polyfill Enriched
Not all polyfills are created equal.
Old
Equivalent
Plug-in
Backed
JavaScript
Powered
Use legacy
versions of
same feature
Implement
feature using
JavaScript
Ma...
Old
Equivalent
Plug-in
Backed
JavaScript
Powered
• Fonts
• LocalStorage
• Semantic
Tags
• Opacity
• CORS
• CSS3
Selectors
...
Semantic
Tags
Local
Storage
Form
Validation
Geolocation
CSS3
Selectors
STRATEGY #3
Graceful Degradation & Progressive Enhancement
exit PowerPoint;
exec Demos;
Safe WarningCaution
• Relies on old
native browser
feature
• Does not
interact with
DOM/rendering
• Uses a plug-in
(Flash/...
Which HTML5/CSS3 technique
will you try today?
Todd Anglin
@toddanglin
anglin@telerik.com
Thanks!
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Making HTML5 Work Everywhere
Upcoming SlideShare
Loading in …5
×

Making HTML5 Work Everywhere

1,019 views
915 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Making HTML5 Work EverywhereOne 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 &amp; adoption • Explore new HTML5 features and techniques for using in older browsers
  • Talking Point: I know many of you today may be skeptical that HTML5 can be used EVERYWHERE (including old IE), but that’s good! One of my goals is to turn skeptics in to believers.
  • http://dev.w3.org/html5/html4-differences/Goes on to say:The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
  • WHATWG FAQs on Living Standard: http://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_Standard.22_mean.3F
  • CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
  • Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
  • [Audience Prompt]
  • Specific browsers (and versions) your users are using are what matter.
  • Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0&amp;qpcustomd=0&amp;qptimeframe=QStat Accuracy debate:http://www.digitaltrends.com/computing/who-counts-the-counters-is-chrome-really-more-popular-than-ie/http://www.zdnet.com/the-web-browser-wars-continue-and-1-is-well-that-depends-on-whom-you-ask-7000009305/
  • DISNEY SPEAKING NOTE: Emphasize the difference in Chrome shipping schedules that produces so many browser versions.
  • Mobile browsers are just as important for today&apos;s web developer.Source: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1&amp;qpcustomb=1&amp;qpsp=161&amp;qpnp=13&amp;qptimeframe=M&amp;qpf1
  • What is the IE strategy for HTML5/CSS3?
  • On Microsoft’s strategy/approach to HTML5:http://blogs.msdn.com/b/ie/archive/2010/12/20/html5-site-ready-and-experimental.aspxhttp://blogs.msdn.com/b/interoperability/archive/2010/12/21/prototyping-early-w3c-html5-specifications.aspx
  • CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs: http://www.w3.org/Style/CSS/current-work
  • http://html5labs.interoperabilitybridges.com/http://www.beautyoftheweb.com
  • Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
  • Sun Spider benchmark test:http://www.webkit.org/perf/sunspider/sunspider.html
  • This is not a question with a single correct answer. It all depends on your audience and strategy.There are several general strategies for defining what is “usable” today.
  • Useful for adding HTML5 to both older browsers + new browsers that do not have a specific HTML5 featurehttp://remysharp.com/2010/10/08/what-is-a-polyfill/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source: http://www.flickr.com/photos/aaronolaf/833342657/
  • Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source: http://www.mbusa.com/mercedes/index
  • I want it now!How do you use HTML5 today?
  • HTML5 &amp; CSS3 in VS2010 SP1: http://madskristensen.net/post/HTML5-CSS3-in-Visual-Studio-2010-SP1.aspxHTML5 in VS2008: http://stackoverflow.com/questions/1682180/will-visual-studio-2010-support-html-5
  • Scores from HTML5Test.com (updated Oct 2013)
  • CanIUse.comIE 11 (versus 10): Pointer EventsFlexboxViewpoint UnitsxDoc MessagingFull Screen APICSS3 Border ImagesWebGL*dataset
  • Modern adoption of HTML5 is done by checking for individual feature support, NOT by checking for specific browsers/browser versions. This helps you adopt as much of HTML5 as possible in a progressively optimistic manner.
  • http://www.modernizr.com/
  • http://www.modernizr.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/Modernizr now ships with ASP.NET MVC 3
  • Chrome Framehttp://code.google.com/chrome/chromeframe/Let&apos;s you use Chrome browser engine in IE 6/7/8/9chrome=1   - Always activechrome=IE7 - Active for IE major version 7 or lowerchrome=IE8 - Active for IE major version 8 or lower
  • Scores from HTML5Test.com (updated Oct 2012)
  • Chrome frame simple test: http://jsbin.com/ocebej
  • Geolocationpolyfill: WebShim Library (http://afarkas.github.io/webshim/demos/index.html)
  • 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!

    ×