layout: true class: all-slides .info-bar[ [@_akievet](https://twitter.com/_akievet) ] --- class: center, color-bkg, almost-middle # zen and the art of progressive enhancement --- .main-img[ ![Nature](./images/woods.png) ] --- class: color-bkg .quote["a robust site or application in the more traditional sense minimizes its dependencies. The minimum dependency for a web site should be an internet connection and the ability to parse HTML." — .author[BBC Future Media Standards and Guidelines]] --- name: plain-text class: center, almost-middle, color-bkg # what? --- class: center .main-img--small[ ![Picture of wrapped gift](./images/gift.png) ] --- .main-img[ ![Picture of a ship in a storm](./images/ship.png) ] --- .main-img[ ![A site with no content waiting on JS to load](./images/loading.png) ] --- class: center, almost-middle ![rope breaking](./images/rope.png) --- class: center, color-bkg, almost-middle # a brief *and opinionated* history lesson --- .main-img[ ![printed page to screen](./images/printed_to_screen.png) ] --- .main-img[ ![designer as God](./images/designer.png) ] --- class: almost-middle, center, color-bkg # alternatives --- class: center .main-img--large[ ![graceful degradation](./images/prog_enhancement.png) ] # graceful degredation --- class: center, almost-middle, color-bkg # some arguments against --- .quote["javascript is the baseline in 2015"] -- .quote["big companies are doing it"] -- .quote["programmers should aim to catch errors before they cause problems so... we'll just test!"] --- class: center, color-bkg, almost-middle # how? --- .main-img[ ![form follows function](./images/lamp_2.png) ] --- ## 1. design in text .main-img--x-small[ ![Hierarchies of Linear structured test](./images/structured_html.png) ] --- ## 2. use semantic html to convey content --- .col1[ ### semantic elements in html5 ```html