Post on 15-Jan-2015
description
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)
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
sniffing useragents === sniffing glue
Sunday, September 12, 2010
Sunday, September 12, 2010
Sunday, September 12, 2010
Native
Implementation
.box {// use border-radius
}
No Native
Implementation
.no-borderradius .box {// maybe less padding?
}
if (Modernizr.borderradius == false){// call up DD_roundies, etc.
}
Sunday, September 12, 2010
// 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);});
Sunday, September 12, 2010
Sunday, September 12, 2010
OMG it’s only 3.7k!
Sunday, September 12, 2010
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.
Sunday, September 12, 2010
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.
webGL
SMIL
hashchange event
localStorage
sessionStorage
postMessage
html5 drag ‘n drop
web sql database
Sunday, September 12, 2010
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.
webGL
SMIL
hashchange event
localStorage
sessionStorage
postMessage
html5 drag ‘n drop
web sql database
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
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
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
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
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
Sunday, September 12, 2010
Tantek sez:
Sunday, September 12, 2010
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
Sunday, September 12, 2010
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
Sunday, September 12, 2010
Sunday, September 12, 2010
Sunday, September 12, 2010
Sunday, September 12, 2010
Me:
http://paulirish.com
@paul_irish
Sunday, September 12, 2010
Me:
http://paulirish.com
@paul_irish
OMG THX!
Sunday, September 12, 2010