Download - Progressive Enhancement
ProgressiveEnhancement
Hello.Zach LeathermanFront End Engineer est. 1998UI “Architect” at Union Pacific RailroadWeb 3.0, 6 Bladed Razors, 7 Minute Abs:
849K Pageviews, 1.3K RSS subscribersBigText jQuery Plugin AuthorOmaha Startup Weekend: GiftBright and CallSpinnerNo affiliation:
@zachleat http://zachleat.com
Problem?
WEB BROWSERS
3.6, 4, 5
Fennec
Camino
Flock SeaMonkey
K-Meleon
MicroB
4, 5
http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
11, 12
Konqueror
(NetFront)
(NetFront)
RockMelt Shiira
OmniWebiCab
SkyFire
11Mini 4, 5, 6
Internet Channel
6
7, 8
9
Maxthon Avant Browser
SPECIFICATIONS
Design Documents
UNRELIABLE or SLOW NETWORKS
Cheap shot
IMPERFECT CODE
<a href=”#” onclick=”throw Error(‘Whoops’)”> GO TO NEXT PAGE</a>
You’re unit testing, right?
P.E.
HTMLCSS
JavaScript
I need my space
HTML CSS
JavaScript
ContentPresentationBehaviors
HTML CSS
JavaScript
FirstSecondThird
Example
HTML
Ajax Target HTML
CSS
Modify Ajax Target
JavaScript
Choose Your Weapons Wisely
http://www.flickr.com/photos/29503348@N03/4915763648/
Performance
Accessibility
Common Mistakes
<noscript>
HTML5 Boilerplate
What to P.E.
TextImages
CSSJavaScript
alt=”Text”DefaultsNo AjaxNo Behaviors
TextImages
Flash Video Transcripts Still Images
TextImagesAudio
Video
1838 Telegraph1865 Telefax1876 Telephone1896 Radio1927 Television1930 Videophone
One Web,Mobile First
JavaScriptRequired Web
IE OnlyWebKit Only
Two WebIncl
usiv
eExclusive
LayoutsResponsive Design & Text
http://blog.andyhume.net/responsive-by-default
InteractionsKeyboard > Mouse > Touch
http://issuu.com/curtisbrenneman/docs/net208
NetMagIssue 208
Pragmatism
Who to P.E.
http
://de
velo
per.y
ahoo
.com
/yui
/art
icle
s/gb
s/
Ok, but how does this help me?
IE6 and Blackberry 4.x still have CSS, JavaScript
support
Three Ways To Forkhttp://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/
User Agent SniffingBad.
“Mozilla”“Like Gecko”
Weak InferenceNot much better.
Feature DetectionGood.
Tool Snobbery
Warning Signs
APIs are JavaScript Only
Clientside JavaScript Templating
Mobile Component Frameworks
Good, Bad, & Ugly
Retrofit Existing Code
Requires Thought
Slightly Larger Code Base
Tool Snobbery