• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Angels versus demons: balancing shiny and inclusive

Angels versus demons: balancing shiny and inclusive



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, ...

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!



Total Views
Views on SlideShare
Embed Views



7 Embeds 88

http://lanyrd.com 47
https://twimg0-a.akamaihd.net 26
http://us-w1.rockmelt.com 6
https://si0.twimg.com 5
https://twitter.com 2
http://a0.twimg.com 1
http://tweetedtimes.com 1



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • * I’m saying that in a very safe “government-approved rock ‘n roll” 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’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’s prefixes. \n\nBut let’s not discuss that mess in detail again. It was boring on twitter the first time around.\n\nAll I’ll say is, yes, it’s a pain in the ass, but suck it up. We’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 Angels versus demons: balancing shiny and inclusive Presentation Transcript

  • Angels vs.demons
  • Balancingshiny and inclusive
  • Contact me! cmills@opera.com @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com http://www.w3.org/community/webed/
  • 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!
  • 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/text tracks?
  • <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‣ Viewport
  • Thou shalt design defensively
  • 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
  • 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
  • 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
  • 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>
  • 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
  • You can build in support for <track>‣ Building in support when it doesn’t exist‣ JSCaptions, Captionator, videosub, playr
  • Polyfills
  • 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)
  • 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; }
  • 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);
  • 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
  • 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
  • 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-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">
  • 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 #wrapper:hover #front,.no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%);}
  • Modernizr JS examplefunction rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); } else { back.style.zIndex = "5"; };};
  • 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‣ But you can create a smaller custom version that just includes the tests you need‣ There are some things that can’t be detected
  • 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‣ If we had a monoculture, a single company would control web standards‣ Do we want one company to control the Web?
  • 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);
  • 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
  • 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; 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)
  • ‣ 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/ Safari/525.13
  • Thou shalt let useragreements ruin your users’ experience!
  • 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.
  • 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.
  • 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
  • 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
  • NYSE Euronext prohibits ... unauthorizedhypertext links by others to the NYSE EuronextWeb-site. NYSE Euronext reserves the right todisable any unauthorized links.
  • Compromise?