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)


OMG Browser wars


Shiny new toys

svg

Contenteditable


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?

So why have we had a different approach
when it comes to the desktop?


So we create an experience that takes
advantage of hotness when we have it.

and function decently when we don’t.


How then?


Modernizr

Feature Detection


sni
ffin
g use
rag
ent
s ==
= sn
iffin
g gl
ue


Native No Native
Implementation Implementation
.box { .no-borderradius .box {
// use border-radius // maybe less padding?
} }

if (Modernizr.borderradius == false){
// call up DD_roundies, etc.
}


// 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);
});


OM
onl G it’s
y3
.7k
!


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 …


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


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

Modernizr
http://modernizr.com
@modernizr

Yah, it’s open source. Fork it, baby.


CSS3 Please!


.. but how can i convince my team
to use this stuff for modern
browsers?


Be the champion of performance.


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.


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


When performance is poor
There are three options:

1. Redevelop the code

2. Drop the feature

3. Redesign approach of the UI


Make the case


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


Tantek sez:


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


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


Me:
http://paulirish.com
@paul_irish


OM
G
THX
!
Me:
http://paulirish.com
@paul_irish


Progressive Advancement, by way of progressive enhancement

Recommended

Recommended

More Related Content

Similar to Progressive Advancement, by way of progressive enhancement

Similar to Progressive Advancement, by way of progressive enhancement (20)

More from Paul Irish

More from Paul Irish (6)

Recently uploaded

Recently uploaded (20)

Progressive Advancement, by way of progressive enhancement