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!

1. Angels
vs.
demons

3. Balancing
shiny
and
inclusive

4. Contact me!
cmills@opera.com
@chrisdavidmills
http://www.slideshare.net/chrisdavidmills
http://dev.opera.com
http://www.w3.org/community/webed/

5. 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!

6. Calling all good web
angels
‣ Accessibility
‣ Usability
‣ A whole web of devices to support
‣ Let’s be responsible!

7. Thou shalt make
content accessible
wherever possible

8. Generally this
means text
‣ Or a text alternative
‣ Alt text or longdesc really isn’t that expensive
‣ Transcripts/text tracks?

9. <canvas>/WebGL
are cool
‣ But don’t use them to build entire UIs!
‣ Use a base of HTML with enhancements on top

10. Optimize your
content...
‣ As much as possible across different browsing
contexts
‣ Responsive design rocks*

11. Responsive design
‣ The web is responsive by default
‣ So let’s try not to screw it up
‣ Media queries
‣ Responsive media
‣ Viewport

13. Thou shalt design
defensively

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

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

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

17. 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: will
play the MP4 version of the video -->
</video>

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

19. You can build in
support
for <track>
‣ Building in support when it doesn’t exist
‣ JSCaptions, Captionator, videosub, playr

20. Polyfills

21. 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)

22. Adding HTML5
support 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; }

23. 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');

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

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

26. Excanvas
‣ http://excanvas.sourceforge.net/
‣ Add <canvas> support to IE

27. Selectivizr
‣ http://selectivizr.com/
‣ Adds support for CSS3 selectors to IE6-8

28. Providing
alternatives with
Modernizr/yepnope

29. Modernizr
‣ The mother of all feature detection libraries
‣ Available at modernizr.com

30. Modernizr CSS
example
<html lang="en-US" class="no-js">
<head>
...
<script src="modernizr.js"></script>
...
</head>

31. Modernizr CSS
example
<html class=" js flexbox canvas canvastext webgl no-
touch geolocation postmessage no-websqldatabase
indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage
borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-csstransforms3d
csstransitions fontface generatedcontent video audio
localstorage no-sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths"
lang="en-US">

32. Modernizr CSS
example
#wrapper:hover, #wrapper:focus {
transform: rotateX(180deg);
}

33. 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%);
}

34. Modernizr JS
example
function rotateForm() {
if(Modernizr.cssanimations &&
Modernizr.csstransforms3d) {
form.setAttribute("class","form-rotate");
} else {
back.style.zIndex = "5";
};
};

35. YepNope
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});

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

37. Thou shalt stop
lusting after a
monoculture

39. 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?

40. And we can make
this stuff work
cross browser
background: -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);

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

43. Thou shalt not
browser sniff, lest
ye be struck down

44. 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)

45. ‣ 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

47. Thou shalt let user
agreements ruin your users’
experience!

48. Use of any Web browsers (other than generally
available third-party browsers), engines,
software, spiders, robots, avatars, agents, tools
or other devices or mechanisms to navigate,
search or determine the NYSE Web-site is strictly
prohibited.

49. You agree you will not, and will not permit any
third party to obstruct, receive, modify or
otherwise interfere with the display or delivery of
advertisements on the NYSE Web-site.

50. You may print or download a single, unaltered,
permanent copy or one temporary copy in a
single computer’s memory of any Content for
your personal, non-commercial use only

51. You agree to review this Agreement each time
you access the NYSE Euronext Web-site so that
you are aware of any and all modifications made
to this Agreement since your last visit

52. NYSE Euronext prohibits ... unauthorized
hypertext links by others to the NYSE Euronext
Web-site. NYSE Euronext reserves the right to
disable any unauthorized links.

53. Compromise?