Progressive Advancement, by way of progressive enhancement

Progressive Advancement by way of Progressive Enhancement with a sprinkle of Regressive Enhancement, where possible Paul Irish Google Chrome FRONTEND2010 Sunday, September 12, 2010

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

OMG Browser wars Sunday, September 12, 2010

Shiny new toys svg Sunday, September 12, 2010

Contenteditable Sunday, September 12, 2010

A Question... if you’re designing a mobile experience, do you start with how its going to look in blackberry and s60 and winmobile? or do you design it to look fucking great in android, iOS, happy new webkits... and function decently on the rest? Sunday, September 12, 2010

So why have we had a different approach when it comes to the desktop? Sunday, September 12, 2010

So we create an experience that takes advantage of hotness when we have it. and function decently when we don’t. Sunday, September 12, 2010

How then? Sunday, September 12, 2010

Modernizr Sunday, September 12, 2010

Sunday, September 12, 2010

Feature Detection Sunday, September 12, 2010

sni ffin g use rag ent s == = sn iffin g gl ue Sunday, September 12, 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. } Sunday, September 12, 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); }); Sunday, September 12, 2010

OM onl G it’s y3 .7k ! Sunday, September 12, 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 … Sunday, September 12, 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 Sunday, September 12, 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 or just take the tests by themselves, sans-library Sunday, September 12, 2010

Modernizr http://modernizr.com @modernizr Yah, it’s open source. Fork it, baby. Sunday, September 12, 2010

CSS3 Please! Sunday, September 12, 2010

.. but how can i convince my team to use this stuff for modern browsers? Sunday, September 12, 2010

Be the champion of performance. Sunday, September 12, 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. Sunday, September 12, 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 Sunday, September 12, 2010

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

Make the case Sunday, September 12, 2010

Killing code is a good thing HTML5 form controls UI libraries HTML5 drag ‘n drop jQuery.fn.draggable() css transitions .animate() VS border-radius border-image large image sprites background gradients localStorage cookies Sunday, September 12, 2010

Tantek sez: Sunday, September 12, 2010

Tantek’s list: dependable: roughly usable: experimentable: doctype canvas geolocation charset web sockets selfclose, quotes awkward: web sql database new semantics form inputs indexeddatabase audio/video meter/progress webstorage autofocus, web workers placeholder Sunday, September 12, 2010

Paul’s list: dependable: roughly usable: experimentable: doctype canvas web sql database charset geolocation indexeddatabase selfclose, quotes web sockets webstorage new semantics autofocus, web workers audio/video placeholder data-* attrs drag n drop awkward: contenteditable form inputs meter/progress Sunday, September 12, 2010

Me: http://paulirish.com @paul_irish Sunday, September 12, 2010

OM G THX ! Me: http://paulirish.com @paul_irish Sunday, September 12, 2010

Progressive Advancement, by way of progressive enhancement

by Paul Irish on Sep 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 145

Statistics

Progressive Advancement, by way of progressive enhancement — Presentation Transcript

http://east.webdirections.org	143
http://webcache.googleusercontent.com	2