Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Strategies For Progressive Enhancement

Drew McLellan
September 27, 2011
Technology
1
94

Strategies For Progressive Enhancement

Drew McLellan

September 27, 2011
Tweet

More Decks by Drew McLellan

See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
drewm
1
140
HTML5 APIs Confoo Montreal
drewm
1
210
PHP Payments with Omnipay
drewm
0
100
HTML5 APIs Confoo Vancouver
drewm
0
250
Learn to Love Regular Expressions
drewm
0
110
Ecommerce Projects with Moltin
drewm
0
680
Writing Portable PHP
drewm
0
96
Getting to Grips with Regular Expressions
drewm
1
250
Back to Front Performance - Oct 2013
drewm
0
120

Other Decks in Technology

See All in Technology
なぜCodeceptJSを選んだか
goataka
0
160
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
170
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
760
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
530
Storage Browser for Amazon S3
miu_crescent
1
140
オプトインカメラ：UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
230
Qiita埋め込み用スライド
naoki_0531
0
4.8k
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150

Featured

See All Featured
The Cult of Friendly URLs
andyhume
78
6.1k
Side Projects
sachag
452
42k
Faster Mobile Websites
deanohume
305
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Thoughts on Productivity
jonyablonski
67
4.4k
A Tale of Four Properties
chriscoyier
157
23k
Music & Morning Musume
bryan
46
6.2k
Navigating Team Friction
lara
183
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Testing 201, or: Great Expectations
jmmastey
40
7.1k

Transcript

  1. - STRATEGIES FOR - PROGRESSIVE ENHANCEMENT THINK VITAMIN JAVASCRIPT CONFERENCE

    - 13 SEPTEMBER 2010 -

  2. DREW MCLELLAN

  3. FRONT END DEVELOPER (SOMETIMES)

  4. JQUERY

  5. GOOD JAVASCRIPT DESIGN STARTS WITHOUT JAVASCRIPT

  6. THE WEB WORKS IN LAYERS

  7. HTML IMPLEMENTATION 1

  8. STYLE WITH CSS 2

  9. ENHANCE WITH JAVASCRIPT 3

  10. CHECK YOU’VE NOT BROKEN ANYTHING 4

  11. PROGRESSIVE ENHANCEMENT !== GRACEFUL DEGRADATION

  12. BE THE BEST DEVELOPER YOU CAN BE

  13. “WE REQUIRE JAVASCRIPT”

  14. DESIGNING A FEATURE TO WORK WITHOUT JAVASCRIPT IS NOT EXTRA

    EFFORT

  15. IT’S BASE EFFORT.

  16. ADDING JAVASCRIPT IS THE EXTRA BIT

  17. PRIORITISE BASIC FUNCTIONALITY

  18. HIJACK!

  19. SIMPLE, RIGHT?

  20. A SIDE NOTE ON CSS...

  21. <body> $(‘body’).addClass(‘js’); <body class=“js”> .js #thing

  22. PREVENT CSS FOR HIJACKED ELEMENTS MESSING WITH THE DEFAULT STATE

  23. THUMBNAIL IMAGES

  24. “ADD A FRIEND” LINK

  25. BASIC AJAX FORM

  26. DRAG’N’DROP REORDERING

  27. MODAL DIALOGUES

  28. CAROUSELS

  29. MORE CAROUSELS

  30. REMEMBER:

  31. HTML IMPLEMENTATION 1

  32. STYLE WITH CSS 2

  33. ENHANCE WITH JAVASCRIPT 3

  34. CHECK YOU’VE NOT BROKEN ANYTHING 4