Progressive Advancement, by way of progressive enhancement

Progressive Advancementby way of Progressive Enhancementwith a sprinkle of Regressive Enhancement, where possible

Paul Irish

Google Chrome

FRONTEND2010

Sunday, September 12, 2010

Your mother does

NOT find a website

she likes the look of,

and then opens it

another browser.

~Andy Clarke (@malarkey)


OMG Browser wars


Shiny new toys

svg


http://html5readiness.com/svg/

http://html5readiness.com/






http://html5readiness.com/svg/

Contenteditable


http://annevankesteren.nl/test/contenteditable-style.htm





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


sniffing useragents === sniffing glue


Native

Implementation

.box {// use border-radius

}

No Native

Implementation

.no-borderradius .box {// maybe less padding?

}

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

}


// geo-location bridgefunction 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 }) }); }}// usagegetLocation(function(pos){ console.log("I'm located at ",pos.lat,' and ',pos.lon);});


OMG it’s only 3.7k!


Rounded corners

@font-face fonts

Canvas

rgba(), hsla() colors

border-image

box-shadow

HTML5 Audio & Video

CSS Animations

CSS Transitions

2D Transformations

CSS Gradients

SVG

Geolocation

CSS Columns

HTML5 Forms

Web Workers

Offline Web Apps

…

We got you covered, b.


Rounded corners

@font-face fonts

Canvas


border-image

box-shadow

HTML5 Audio & Video

CSS Animations

CSS Transitions

2D Transformations

CSS Gradients

SVG

Geolocation

CSS Columns

HTML5 Forms

Web Workers

Offline Web Apps


webGL

SMIL

hashchange event

localStorage

sessionStorage

postMessage

html5 drag ‘n drop

web sql database


Rounded corners

@font-face fonts

Canvas


border-image

box-shadow

HTML5 Audio & Video

CSS Animations

CSS Transitions

2D Transformations

CSS Gradients

SVG

Geolocation

CSS Columns

HTML5 Forms

Web Workers

Offline Web Apps


webGL

SMIL

hashchange event

localStorage

sessionStorage

postMessage

html5 drag ‘n drop

web sql database

or just take the tests

by themselves, sans-library


Modernizr

http://modernizr.com

@modernizr

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




CSS3 Please!


http://css3plz.com

http://css3plz.com

.. but how can i convince my team

to use this stuff for modern

browsers?


Be the champion of performance.


1. Both you and the client want the most

responsive experience possible.

2. Everything added to the page slows it

down.

A Performance Policy

2 truths


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


http://www.phpied.com/the-performance-business-pitch/

http://www.phpied.com/the-performance-business-pitch/

Killing code is a good thing

HTML5 form controls

VS

UI libraries

HTML5 drag ‘n drop

VS

jQuery.fn.draggable()

css transitionsVS

.animate()

border-radius

border-image

background gradients

VS

large image sprites

localStorage

VS

cookies


Tantek sez:


Tantek’s list:

dependable:

doctype

charset

selfclose, quotes

new semantics

audio/video

roughly usable:

canvas

experimentable:

awkward:

form inputs

meter/progress

geolocation

web sockets

autofocus,

placeholder

web sql database

indexeddatabase

webstorage

web workers


roughly usable:

canvas

awkward:

form inputs

meter/progress

geolocation

web sockets autofocus,

placeholder

Paul’s list:

data-* attrs

drag n drop

contenteditable

experimentable:

web sql database

indexeddatabase

webstorage

web workers

dependable:

doctype

charset

selfclose, quotes

new semantics

audio/video


Me:

http://paulirish.com

@paul_irish





Me:


@paul_irish

OMG THX!





Progressive Advancement, by way of progressive enhancement

Technology

Transcript of Progressive Advancement, by way of progressive enhancement