progressive enhancement
DESCRIPTION
Progressive Enhancement is one of the most important and useful software engineering tools in our web development toolbox, but in practice it's largely ignored. We'll dive into the basics of PE, the common pitfalls (think and the newer class="no-js"), how to support Blackberry 4.x and IE6 without a ton of extra work, tools to avoid that violate PE best practices, and how to apply PE pragmatically.TRANSCRIPT
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