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

Strategies For Progressive Enhancement

Avatar for Drew McLellan Drew McLellan
September 27, 2011
Technology
97
1

Strategies For Progressive Enhancement

Avatar for Drew McLellan

Drew McLellan

September 27, 2011

More Decks by Drew McLellan

See All by Drew McLellan
HTML5 APIs PHP Yorkshire 2017
Avatar for Drew McLellan drewm
1
210
HTML5 APIs Confoo Montreal
Avatar for Drew McLellan drewm
1
280
PHP Payments with Omnipay
Avatar for Drew McLellan drewm
0
130
HTML5 APIs Confoo Vancouver
Avatar for Drew McLellan drewm
0
300
Learn to Love Regular Expressions
Avatar for Drew McLellan drewm
0
170
Ecommerce Projects with Moltin
Avatar for Drew McLellan drewm
0
700
Writing Portable PHP
Avatar for Drew McLellan drewm
0
140
Getting to Grips with Regular Expressions
Avatar for Drew McLellan drewm
1
280
Back to Front Performance - Oct 2013
Avatar for Drew McLellan drewm
0
130

Other Decks in Technology

See All in Technology
社内RAGの導入で気を付けたポイント
Avatar for やくも yakumo
2
150
AI時代の私の技術インプットとアウトプット術
Avatar for tonkotsuboy_com tonkotsuboy_com
3
620
Claude Codeですべての日常業務を爆速化しよう！
Avatar for みのるん minorun365
PRO
14
11k
Typiaで配信JSONの安全性を構造的に担保する(TSKaigi2026)
Avatar for RightTouch righttouch
PRO
1
160
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
3
770
The Making of AI Chips
Avatar for Preferred Networks pfn
PRO
0
750
TSKaigi 2026 - Auth.jsからBetter Authへの 移行に見る「型とランタイム」の 設計思想の変化
Avatar for teamLab teamlab
PRO
1
260
AI Agent に“攻略本”を渡したら、150フォームの移行が回り始めた話/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
1
430
最新技術を"今は選ばない"という技術選定
Avatar for Tech Leverages leveragestech
PRO
0
410
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
0
190
サプライチェーン攻撃への備えについて考えている #湘なんか
Avatar for すてにゃん stefafafan
3
2.4k

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
190
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
320
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
600
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170

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