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.

Angels versus demons: balancing shiny and inclusive

4,326 views

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
  • Be the first to comment

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?

×