Angels versus demons: balancing shiny and inclusive

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"> </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

Polyﬁlls

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/ 0.2.149.27 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?

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

Angels versus demons: balancing shiny and inclusive

by Chris Mills

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 81

Statistics

Angels versus demons: balancing shiny and inclusive Presentation Transcript