0
ProgressiveEnhancement
Hello.Zach LeathermanFront End Engineer est. 1998UI “Architect” at Union Pacific RailroadWeb 3.0, 6 Bladed Razors, 7 Minute...
Problem?
WEB BROWSERS
3.6, 4, 5
Fennec
Camino
Flock              SeaMonkey        K-Meleon
MicroB
4, 5http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
11, 12
Konqueror
(NetFront)
(NetFront)
RockMelt              Shiira           SkyFire  iCab               OmniWeb
11Mini 4, 5, 6
Internet Channel
6
7, 8
9
Maxthon   Avant Browser
SPECIFICATIONS
Design Documents
HTML2                         HTML576 pages                     500 pages           http://html5.hadw.com/
UNRELIABLE orSLOW NETWORKS
Cheap shot
IMPERFECT CODE
<a href=”#”	 onclick=”throw Error(‘Whoops’)”>   GO TO NEXT PAGE</a>
You’re unittesting, right?
P.E.
I need my spaceHTML                 JavaScript       CSS
HTML Content      CSS PresentationJavaScript Behaviors
HTML First      CSS SecondJavaScript Third
Example
HTML
Ajax Target HTML
CSS
Modify Ajax Target
JavaScript
Choose Your                           Weapons Wiselyhttp://www.flickr.com/photos/29503348@N03/4915763648/
Performance
Accessibility
Common Mistakes
<noscript>
HTML5 Boilerplate
What to P.E.
Text   Images alt=”Text”      CSS DefaultsJavaScript No Ajax           No Behaviors
Text     ImagesFlash Video Transcripts            Still Images
Text     Telegraph         1838Images1865 Telefax Audio1876 Telephone      1896 RadioVideo 1927 Television      1930 Video...
Inclusive            One Web,            Mobile First   Two Web                                    JavaScript       IE Onl...
LayoutsResponsive Design & Text   http://blog.andyhume.net/responsive-by-default
InteractionsKeyboard > Mouse > Touch
NetMag    Issue 208http://issuu.com/curtisbrenneman/docs/net208
Pragmatism
Who to P.E.
http://developer.yahoo.com/yui/articles/gbs/
http://jquerymobile.com/gbs/
Ok, but how does this      help me?
IE6 and Blackberry 4.xstill have CSS, JavaScript          support
Three Ways To Fork    http://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/
User Agent Sniffing          Bad.        “Mozilla”      “Like Gecko”
Weak Inference   Not much better.
Feature Detection       Good.
Tool Snobbery
Warning Signs
APIs areJavaScript Only
Clientside JavaScriptTemplating
MobileComponentFrameworks
Good, Bad, & Ugly
Retrofit Existing Code
Requires Thought
Slightly Larger  Code Base
Tool Snobbery
Thanks!Zach Leatherman @zachleat http://zachleat.com
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Upcoming SlideShare
Loading in...5
×

Progressive Enhancement

1,138

Published on

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 <noscript> 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.

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Progressive Enhancement"

  1. 1. ProgressiveEnhancement
  2. 2. 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
  3. 3. Problem?
  4. 4. WEB BROWSERS
  5. 5. 3.6, 4, 5
  6. 6. Fennec
  7. 7. Camino
  8. 8. Flock SeaMonkey K-Meleon
  9. 9. MicroB
  10. 10. 4, 5http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
  11. 11. 11, 12
  12. 12. Konqueror
  13. 13. (NetFront)
  14. 14. (NetFront)
  15. 15. RockMelt Shiira SkyFire iCab OmniWeb
  16. 16. 11Mini 4, 5, 6
  17. 17. Internet Channel
  18. 18. 6
  19. 19. 7, 8
  20. 20. 9
  21. 21. Maxthon Avant Browser
  22. 22. SPECIFICATIONS
  23. 23. Design Documents
  24. 24. HTML2 HTML576 pages 500 pages http://html5.hadw.com/
  25. 25. UNRELIABLE orSLOW NETWORKS
  26. 26. Cheap shot
  27. 27. IMPERFECT CODE
  28. 28. <a href=”#” onclick=”throw Error(‘Whoops’)”> GO TO NEXT PAGE</a>
  29. 29. You’re unittesting, right?
  30. 30. P.E.
  31. 31. I need my spaceHTML JavaScript CSS
  32. 32. HTML Content CSS PresentationJavaScript Behaviors
  33. 33. HTML First CSS SecondJavaScript Third
  34. 34. Example
  35. 35. HTML
  36. 36. Ajax Target HTML
  37. 37. CSS
  38. 38. Modify Ajax Target
  39. 39. JavaScript
  40. 40. Choose Your Weapons Wiselyhttp://www.flickr.com/photos/29503348@N03/4915763648/
  41. 41. Performance
  42. 42. Accessibility
  43. 43. Common Mistakes
  44. 44. <noscript>
  45. 45. HTML5 Boilerplate
  46. 46. What to P.E.
  47. 47. Text Images alt=”Text” CSS DefaultsJavaScript No Ajax No Behaviors
  48. 48. Text ImagesFlash Video Transcripts Still Images
  49. 49. Text Telegraph 1838Images1865 Telefax Audio1876 Telephone 1896 RadioVideo 1927 Television 1930 Videophone
  50. 50. Inclusive One Web, Mobile First Two Web JavaScript IE Only Exclusive Required Web WebKit Only
  51. 51. LayoutsResponsive Design & Text http://blog.andyhume.net/responsive-by-default
  52. 52. InteractionsKeyboard > Mouse > Touch
  53. 53. NetMag Issue 208http://issuu.com/curtisbrenneman/docs/net208
  54. 54. Pragmatism
  55. 55. Who to P.E.
  56. 56. http://developer.yahoo.com/yui/articles/gbs/
  57. 57. http://jquerymobile.com/gbs/
  58. 58. Ok, but how does this help me?
  59. 59. IE6 and Blackberry 4.xstill have CSS, JavaScript support
  60. 60. Three Ways To Fork http://allyoucanleet.com/2011/02/05/the-cost-of-feature-testing/
  61. 61. User Agent Sniffing Bad. “Mozilla” “Like Gecko”
  62. 62. Weak Inference Not much better.
  63. 63. Feature Detection Good.
  64. 64. Tool Snobbery
  65. 65. Warning Signs
  66. 66. APIs areJavaScript Only
  67. 67. Clientside JavaScriptTemplating
  68. 68. MobileComponentFrameworks
  69. 69. Good, Bad, & Ugly
  70. 70. Retrofit Existing Code
  71. 71. Requires Thought
  72. 72. Slightly Larger Code Base
  73. 73. Tool Snobbery
  74. 74. Thanks!Zach Leatherman @zachleat http://zachleat.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×