Angels  vs.demons
Balancingshiny        and        inclusive
Contact me!           cmills@opera.com            @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills          http:...
What we’ll talk         about‣ Do you really need The Shiny™?‣ Progressively enhance, don’t rely on it‣ Built in alternati...
Calling all good web       angels‣ Accessibility‣ Usability‣ A whole web of devices to support‣ Let’s be responsible!
Thou shalt makecontent accessiblewherever possible
Generally this        means text‣ Or a text alternative‣ Alt text or longdesc really isn’t that expensive‣ Transcripts/tex...
<canvas>/WebGL     are cool‣ But don’t use them to build entire UIs!‣ Use a base of HTML with enhancements on top
Optimize your        content...‣ As much as possible across different browsing  contexts‣ Responsive design rocks*
Responsive design‣ The web is responsive by default‣ So let’s try not to screw it up‣ Media queries‣ Responsive media‣ Vie...
Thou shalt design   defensively
Defensive design by      default‣ Is your content still readable without those  shadows, or background gradients‣ Provide ...
Example: CSS         animation‣ If done properly, a lot of CSS animations and  transitions can be used unobtrusively‣ For ...
Example: Web fonts‣ This is a perfect feature to use now!‣ IE has supported EOT since IE4/5!‣ You can use the bulletproof ...
HTML5 <video><video controls>  <source src="video-file.mp4"          type="video/mp4">  <source src="video-file.webm"     ...
Flash fallbacks         viable‣ Flash can just load the MP4 version of the video‣ Also consider jPlayer, Sublime, etc.‣ An...
You can build in       support     for <track>‣ Building in support when it doesn’t exist‣ JSCaptions, Captionator, videos...
Polyfills
Add in support     where needed‣ Using JavaScript‣ Fake SVG in old IE versions using VML‣ Fake box-shadow using IE filters...
Adding HTML5support to browsers‣ Older browsers don’t support them!‣ But you can style any unknown element, so just  set a...
Oh, but IE 6-8 need some more help‣ They refuse to style unknown elements, unless  you create instances of them in the DOM...
CSS3 PIE for CSS    bling support‣ http://css3pie.com/‣ Awesome little library‣ Add support to IE6-8 for box-shadow, borde...
CSS3-    mediaqueries.js‣ http://code.google.com/p/css3-mediaqueries-js/‣ Add media queries support to IE‣ A bit clunky, w...
Excanvas‣ http://excanvas.sourceforge.net/‣ Add <canvas> support to IE
Selectivizr‣ http://selectivizr.com/‣ Adds support for CSS3 selectors to IE6-8
Providing alternatives withModernizr/yepnope
Modernizr‣ The mother of all feature detection libraries‣ Available at modernizr.com
Modernizr CSS        example<html lang="en-US" class="no-js"><head>  ...<script src="modernizr.js"></script>  ...</head>
Modernizr CSS        example<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldat...
Modernizr CSS        example#wrapper:hover, #wrapper:focus {  transform: rotateX(180deg);}
Modernizr CSS        example.no-csstransforms3d #wrapper #front {  transition: 0.8s all ease-in;}.no-csstransforms3d #wrap...
Modernizr JS         examplefunction rotateForm() {  if(Modernizr.cssanimations &&     Modernizr.csstransforms3d) {    for...
YepNopeyepnope({  test : Modernizr.geolocation,  yep : normal.js,  nope : [polyfill.js, wrapper.js]});
In general, this          rocks‣ Modernizr/yepnope can add a fair bit of weight to  your page: 49KB for the full library‣ ...
Thou shalt stop lusting after a  monoculture
Not on my watch!‣ A monoculture would ruin the web‣ Competition is vital for innovation‣ Browser vendors control standards...
And we can make   this stuff work   cross browserbackground:   -webkit-linear-gradient(#ff0000,#000000);background:   -moz...
Common sense       prevails?‣ If you are going to use prefixed features, use all  the prefixes!‣ Don’t use single vendor-o...
Thou shalt notbrowser sniff, lestye be struck down
UA string chaos!‣ Mosaic: NCSA_Mosaic/2.0 (Windows 3.1)‣ Netscape: Mozilla/1.0 (Win3.1)‣ IE: Mozilla/1.22 (compatible; MSI...
‣ Opera: Mozilla/4.0 (compatible; MSIE  6.0; Windows NT 5.1; en) Opera 9.51, or  Mozilla/5.0 (Windows NT 6.0; U; en;  rv:1...
Thou shalt let useragreements ruin your users’       experience!
Use of any Web browsers (other than generallyavailable third-party browsers), engines,software, spiders, robots, avatars, ...
You agree you will not, and will not permit anythird party to obstruct, receive, modify orotherwise interfere with the dis...
You may print or download a single, unaltered,permanent copy or one temporary copy in asingle computer’s memory of any Con...
You agree to review this Agreement each timeyou access the NYSE Euronext Web-site so thatyou are aware of any and all modi...
NYSE Euronext prohibits ... unauthorizedhypertext links by others to the NYSE EuronextWeb-site. NYSE Euronext reserves the...
Compromise?
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
Angels versus demons: balancing shiny and inclusive
Upcoming SlideShare
Loading in …5
×

Angels versus demons: balancing shiny and inclusive

3,808
-1

Published on

The modern web developer faces a moral choice when creating sites and apps. The angel on your shoulder tells you to use standards and respect accessibility across users of AT, older browsers, mobile, etc. The devil on your other shoulder meanwhile tells you to use all the shiny, satisfy your ego, and leave user agents over two weeks old in the dust.

This talk walks you through the dilemma, looking at the perils of embracing the serpent and presenting solutions that will allow you to achieve a satisfactory compromise. We know the devil has all the good albums, and we want to rock out as much as you do! But not at the expense of the Web’s greatest strengths!

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

No Downloads
Views
Total Views
3,808
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • * I&amp;#x2019;m saying that in a very safe &amp;#x201C;government-approved rock &amp;#x2018;n roll&amp;#x201D; kind of way\n
  • Show examples?\n\nAnd of course, this will generally work in older browsers like IE6-8\n\nmention Matt Wilcox responsive image solution\n
  • \n
  • Where none already exist\n\nprogressive enhancement/graceful degradation are cool again, especiallywith a wide range of mobile devices being used\n
  • \n
  • show simple animated menu example\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Look for Remy Sharp&amp;#x2019;s HTML5 shiv on Google code, which does this for you and more (Print protector too)\n
  • again, show bling box, in IE if possible.\n
  • respond.js is the new contender on the block.\n\n
  • \n
  • \n
  • \n
  • \n
  • show CSS3 modernizr example in FF then Opera\n
  • \n
  • \n
  • \n
  • show modernizr JavaScript example in FF, then Opera\n
  • show modernizr JavaScript example in FF, then Opera\n
  • \n
  • \n
  • \n
  • \n
  • please support all the browsers you can!\n\nThe dogged refusal of many developers to support more than one or two browsers with prefixed properties has led other vendors to start looking at supporting other browser&amp;#x2019;s prefixes. \n\nBut let&amp;#x2019;s not discuss that mess in detail again. It was boring on twitter the first time around.\n\nAll I&amp;#x2019;ll say is, yes, it&amp;#x2019;s a pain in the ass, but suck it up. We&amp;#x2019;re not supposed to be using this stuff in production sites anyway\n\n\n
  • Mention Prefixr (Jeffrey Way) and Prefixfree script (Lea) for CSS, and Modernizr.prefixed() method for JS\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Angels versus demons: balancing shiny and inclusive

    1. 1. Angels vs.demons
    2. 2. Balancingshiny and inclusive
    3. 3. Contact me! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com http://www.w3.org/community/webed/
    4. 4. What we’ll talk about‣ Do you really need The Shiny™?‣ Progressively enhance, don’t rely on it‣ Built in alternatives, versus building your own‣ ...use polyfills/shims‣ Don’t screw over your users!
    5. 5. Calling all good web angels‣ Accessibility‣ Usability‣ A whole web of devices to support‣ Let’s be responsible!
    6. 6. Thou shalt makecontent accessiblewherever possible
    7. 7. Generally this means text‣ Or a text alternative‣ Alt text or longdesc really isn’t that expensive‣ Transcripts/text tracks?
    8. 8. <canvas>/WebGL are cool‣ But don’t use them to build entire UIs!‣ Use a base of HTML with enhancements on top
    9. 9. Optimize your content...‣ As much as possible across different browsing contexts‣ Responsive design rocks*
    10. 10. Responsive design‣ The web is responsive by default‣ So let’s try not to screw it up‣ Media queries‣ Responsive media‣ Viewport
    11. 11. Thou shalt design defensively
    12. 12. Defensive design by default‣ Is your content still readable without those shadows, or background gradients‣ Provide background colours as fallbacks‣ Test thoroughly on older browsers‣ A lot of the blingy stuff gracefully degrades
    13. 13. Example: CSS animation‣ If done properly, a lot of CSS animations and transitions can be used unobtrusively‣ For example, by default the element is set to be in its usable state, but then the animation is applied over the top to bring the animation to that state
    14. 14. Example: Web fonts‣ This is a perfect feature to use now!‣ IE has supported EOT since IE4/5!‣ You can use the bulletproof web font syntax - see fontsquirrel.com
    15. 15. HTML5 <video><video controls> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.webm" type="video/webm"> <track src="en.vtt" kind="subtitles" srclang="en" label="English subtitles"> <!-- Flash player often referenced in here: willplay the MP4 version of the video --></video>
    16. 16. Flash fallbacks viable‣ Flash can just load the MP4 version of the video‣ Also consider jPlayer, Sublime, etc.‣ And http://mediaelementjs.com/‣ mediaelements even fakes the entire media API in Flash/Silverlight
    17. 17. You can build in support for <track>‣ Building in support when it doesn’t exist‣ JSCaptions, Captionator, videosub, playr
    18. 18. Polyfills
    19. 19. Add in support where needed‣ Using JavaScript‣ Fake SVG in old IE versions using VML‣ Fake box-shadow using IE filters (although they are evil — every time you use IE filters, god kills a kitten)
    20. 20. Adding HTML5support to browsers‣ Older browsers don’t support them!‣ But you can style any unknown element, so just set all the “block level” elements to display as block, at the top of your CSS:‣ article { display: block; }
    21. 21. Oh, but IE 6-8 need some more help‣ They refuse to style unknown elements, unless you create instances of them in the DOM‣ document.createElement(article);
    22. 22. CSS3 PIE for CSS bling support‣ http://css3pie.com/‣ Awesome little library‣ Add support to IE6-8 for box-shadow, border- radius, gradients and transparent colours‣ But not text-shadow, which is a little frustrating
    23. 23. CSS3- mediaqueries.js‣ http://code.google.com/p/css3-mediaqueries-js/‣ Add media queries support to IE‣ A bit clunky, when you resize, but it works
    24. 24. Excanvas‣ http://excanvas.sourceforge.net/‣ Add <canvas> support to IE
    25. 25. Selectivizr‣ http://selectivizr.com/‣ Adds support for CSS3 selectors to IE6-8
    26. 26. Providing alternatives withModernizr/yepnope
    27. 27. Modernizr‣ The mother of all feature detection libraries‣ Available at modernizr.com
    28. 28. Modernizr CSS example<html lang="en-US" class="no-js"><head> ...<script src="modernizr.js"></script> ...</head>
    29. 29. Modernizr CSS example<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabaseindexeddb hashchange history draganddrop websocketsrgba hsla multiplebgs backgroundsize borderimageborderradius boxshadow textshadow opacitycssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3dcsstransitions fontface generatedcontent video audiolocalstorage no-sessionstorage webworkersapplicationcache svg inlinesvg smil svgclippaths"lang="en-US">
    30. 30. Modernizr CSS example#wrapper:hover, #wrapper:focus { transform: rotateX(180deg);}
    31. 31. Modernizr CSS example.no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in;}.no-csstransforms3d #wrapper:hover #front,.no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%);}
    32. 32. Modernizr JS examplefunction rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); } else { back.style.zIndex = "5"; };};
    33. 33. YepNopeyepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js]});
    34. 34. In general, this rocks‣ Modernizr/yepnope can add a fair bit of weight to your page: 49KB for the full library‣ But you can create a smaller custom version that just includes the tests you need‣ There are some things that can’t be detected
    35. 35. Thou shalt stop lusting after a monoculture
    36. 36. Not on my watch!‣ A monoculture would ruin the web‣ Competition is vital for innovation‣ Browser vendors control standards‣ If we had a monoculture, a single company would control web standards‣ Do we want one company to control the Web?
    37. 37. And we can make this stuff work cross browserbackground: -webkit-linear-gradient(#ff0000,#000000);background: -moz-linear-gradient(#ff0000,#000000);background: -ms-linear-gradient(#ff0000,#000000);background: -o-linear-gradient(#ff0000,#000000);background: linear-gradient(#ff0000, #000000);
    38. 38. Common sense prevails?‣ If you are going to use prefixed features, use all the prefixes!‣ Don’t use single vendor-only features‣ If it’s only in one rendering engine, it means it’s not ready yet
    39. 39. Thou shalt notbrowser sniff, lestye be struck down
    40. 40. UA string chaos!‣ Mosaic: NCSA_Mosaic/2.0 (Windows 3.1)‣ Netscape: Mozilla/1.0 (Win3.1)‣ IE: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)‣ Firefox: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826‣ Konqueror: Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)
    41. 41. ‣ Opera: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51, or Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51, or Opera/9.51 (Windows NT 5.1; U; en)‣ Safari: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5‣ Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/ 525.13 (KHTML, like Gecko) Chrome/ 0.2.149.27 Safari/525.13
    42. 42. Thou shalt let useragreements ruin your users’ experience!
    43. 43. Use of any Web browsers (other than generallyavailable third-party browsers), engines,software, spiders, robots, avatars, agents, toolsor other devices or mechanisms to navigate,search or determine the NYSE Web-site is strictlyprohibited.
    44. 44. You agree you will not, and will not permit anythird party to obstruct, receive, modify orotherwise interfere with the display or delivery ofadvertisements on the NYSE Web-site.
    45. 45. You may print or download a single, unaltered,permanent copy or one temporary copy in asingle computer’s memory of any Content foryour personal, non-commercial use only
    46. 46. You agree to review this Agreement each timeyou access the NYSE Euronext Web-site so thatyou are aware of any and all modifications madeto this Agreement since your last visit
    47. 47. NYSE Euronext prohibits ... unauthorizedhypertext links by others to the NYSE EuronextWeb-site. NYSE Euronext reserves the right todisable any unauthorized links.
    48. 48. Compromise?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×