Progressive Advancement in Web8

Progressive Advancement in Web8 (btw- web8 == html5 + css3) Paul Irish Isobar JSConf ’10 Friday, April 23, 2010

Friday, April 23, 2010

Native is better html5 form controls vs UI libraries html5 drag ‘n drop vs draggable() css transitions vs animate() border-radius, border-image, background-size vs using large sprites localStorage vs cookies Friday, April 23, 2010

SHIM. okay? Shim. not shiv. Friday, April 23, 2010

hx, ly. Printing, too. t l rea www.iecss.com/print-protector by @jon_neal Friday, April 23, 2010

now hx, ly. htm Printing, too. t l rea mo l5s hiv in der & niz r! www.iecss.com/print-protector by @jon_neal Friday, April 23, 2010

How Ready Is HTML5 & CSS3? Friday, April 23, 2010

Contenteditable Friday, April 23, 2010

CSS3 Please! Friday, April 23, 2010

CSS3 Helpers border-radius.com Friday, April 23, 2010

CSS3 Helpers border-image.com border-radius.com Friday, April 23, 2010

But what if there’s no support? Friday, April 23, 2010

Modernizr Making use of tomorrow’s technologies, today! Friday, April 23, 2010

Feature Detection Just Detect It™ Friday, April 23, 2010

sni ffin g us era gent s == = sn iffin g gl ue Friday, April 23, 2010

Native No Native Implementation Implementation . box { .no-borderradius .box { // use border-radius // maybe less padding? } } if (Modernizr.borderradius == false){ // call up DD_roundies, etc. } Friday, April 23, 2010

Native No Native Implementation Implementation .boxshadow div { .no-boxshadow div { box-shadow: 1px 1px 1px #666; border-bottom: 1px solid #666; } border-right: 1px solid #777; } Friday, April 23, 2010

// geo-location bridge function getLocation(callback){ if (getLocation.cache) return callback(getLocation.cache); if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { callback(getLocation.cache = { "lat": position.coords.latitude, "lon": position.coords.longitude, "obj": position }) }); } else { $.getScript('//www.google.com/jsapi',function(){ callback(getLocation.cache = { "lat": google.loader.ClientLocation.latitude, "lon": google.loader.ClientLocation.longitude, "obj": google.loader.ClientLocation }) }); } } // usage getLocation(function(pos){ console.log("I'm located at ",pos.lat,' and ',pos.lon); }); Friday, April 23, 2010

OM G it onl ’s y7 k! Friday, April 23, 2010

We got you covered, b. Rounded corners 2D Transformations @font-face fonts CSS Gradients Canvas SVG rgba(), hsla() colors Geolocation border-image CSS Columns box-shadow HTML5 Forms HTML5 Audio & Video Web Workers CSS Animations Ofﬂine Web Apps CSS Transitions … Friday, April 23, 2010

We got you covered, b. Rounded corners 2D Transformations webGL @font-face fonts CSS Gradients SMIL Canvas SVG hashchange event rgba(), hsla() colors Geolocation localStorage border-image CSS Columns sessionStorage box-shadow HTML5 Forms postMessage HTML5 Audio & Web Workers html5 drag ‘n drop Video Ofﬂine Web Apps web sql database CSS Animations CSS Transitions Friday, April 23, 2010

We got you covered, b. Rounded corners 2D Transformations webGL @font-face fonts CSS Gradients SMIL Canvas SVG hashchange event rgba(), hsla() colors Geolocation localStorage border-image CSS Columns sessionStorage box-shadow HTML5 Forms postMessage HTML5 Audio & Video Steal me! Web Workers html5 drag ‘n drop Ofﬂine Web Apps web sql database CSS Animations CSS Transitions Friday, April 23, 2010

Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Friday, April 23, 2010

dowebsitesneedtolookexactlythesameineverybrowser.com Friday, April 23, 2010

dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com Friday, April 23, 2010

ishtml5readyyet.com Friday, April 23, 2010

UP ! HU T wrong. S y ou ’re ishtml5readyyet.com Friday, April 23, 2010

Your mother does NOT ﬁnd a website she likes the look of, and then opens it another browser. ~Andy Clarke (@malarkey) Friday, April 23, 2010

A Performance Policy 2 truths 1. Both you and the client want the most responsive experience possible. 2. Everything added to the page slows it down. Friday, April 23, 2010

A Performance Policy During IA, IxD and visual design communicate impact of design decisions Tell the client all browsers will not have the same experience It’s not worthwhile to have feature parity Stop in the name of love Drop in the name of performance Friday, April 23, 2010

What would you prefer me to do? Spend my time hacking around issues in older technologies like Internet Explorer 6 or would you like that time spent making the site look the best that it can on better desktop browsers, as well as on the iPhone, iPod Touch, iPad, Blackberry and a whole host of other mobile devices? ~Andy Clarke (@malarkey) Friday, April 23, 2010

When performance is poor There are three options: 1. Redevelop the code 2. Drop the feature 3. Redesign approach of the UI Friday, April 23, 2010

Me: http://paulirish.com @paul_irish Friday, April 23, 2010

Progressive Advancement in Web8

by Paul Irish on Apr 23, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 14

Statistics

Progressive Advancement in Web8 — Presentation Transcript