SlideShare a Scribd company logo

Practical progressive enhancement

Presented at Cardiff's monthly dev meetup, Unified.diff, on 5 June 2013. Learn what progressive enhancement is and how it can help your content authors do amazing things automagically.

1 of 76
Practical progressive
enhancement
Graham Bird
Senior Web Producer,
Cardiff University
@mrgrahambird
Hello
Just what is
progressive
enhancement?
STRAW
POLL
Here’s the deal
* more on this later
1. Start with accessible, semantic
and clean* HTML
Here’s the deal
* more on this later
1. Start with accessible, semantic
and clean* HTML
2. Add external CSS
Here’s the deal
* more on this later

Recommended

Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 

More Related Content

What's hot

Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithUXPA International
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can buildMonika Piotrowicz
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Estelle Weyl
 

What's hot (18)

Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Rapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris GriffithRapid HTML Prototyping with Bootstrap - Chris Griffith
Rapid HTML Prototyping with Bootstrap - Chris Griffith
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0Moving from Web 1.0 to Web 2.0
Moving from Web 1.0 to Web 2.0
 
Diy frozen snow globe
Diy frozen snow globeDiy frozen snow globe
Diy frozen snow globe
 

Viewers also liked

Progressive methods of teaching
Progressive methods of teachingProgressive methods of teaching
Progressive methods of teachingEmalyn Adriano
 
Philosophy in Education: Progressivism
Philosophy in Education: ProgressivismPhilosophy in Education: Progressivism
Philosophy in Education: ProgressivismJenny Reyes
 
John Dewey’s Educational Progressivism
John Dewey’s Educational ProgressivismJohn Dewey’s Educational Progressivism
John Dewey’s Educational ProgressivismChristopher Pappas
 

Viewers also liked (8)

Progressive education
Progressive educationProgressive education
Progressive education
 
Progressive education
Progressive education Progressive education
Progressive education
 
Progressivism
ProgressivismProgressivism
Progressivism
 
Progressive methods of teaching
Progressive methods of teachingProgressive methods of teaching
Progressive methods of teaching
 
Progressivism
ProgressivismProgressivism
Progressivism
 
Philosophy in Education: Progressivism
Philosophy in Education: ProgressivismPhilosophy in Education: Progressivism
Philosophy in Education: Progressivism
 
Perennialism
PerennialismPerennialism
Perennialism
 
John Dewey’s Educational Progressivism
John Dewey’s Educational ProgressivismJohn Dewey’s Educational Progressivism
John Dewey’s Educational Progressivism
 

Similar to Practical progressive enhancement

How clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsHow clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsThe Guardian Open Platform
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
Front End Craftsmanship
Front End CraftsmanshipFront End Craftsmanship
Front End Craftsmanshiprocketspops
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
Creating HTML Pages
Creating HTML PagesCreating HTML Pages
Creating HTML PagesMike Crabb
 
Toutch Jquery Mobile
Toutch Jquery MobileToutch Jquery Mobile
Toutch Jquery MobileJinlong He
 
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF ReferenceBootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF ReferenceBootstrap Creative
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrapdennisdc
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasEnough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasKubide
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)Hendrik Ebbers
 
Gaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third YearGaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third YearDezyneecole
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Daniel Downs
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
 

Similar to Practical progressive enhancement (20)

How clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrationsHow clean "semantic" markup can power simple Facebook Connect integrations
How clean "semantic" markup can power simple Facebook Connect integrations
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
iWebkit
iWebkitiWebkit
iWebkit
 
Front End Craftsmanship
Front End CraftsmanshipFront End Craftsmanship
Front End Craftsmanship
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Creating HTML Pages
Creating HTML PagesCreating HTML Pages
Creating HTML Pages
 
Toutch Jquery Mobile
Toutch Jquery MobileToutch Jquery Mobile
Toutch Jquery Mobile
 
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF ReferenceBootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF Reference
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
Twitter bootstrap
Twitter bootstrapTwitter bootstrap
Twitter bootstrap
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Enough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas ZakasEnough with the javas cript already! de Nicholas Zakas
Enough with the javas cript already! de Nicholas Zakas
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
 
Gaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third YearGaurav Jatav , BCA Third Year
Gaurav Jatav , BCA Third Year
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Xxx
XxxXxx
Xxx
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
 

Recently uploaded

Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionNeo4j
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Cprime
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31shyamraj55
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareAsma Ben Abacha
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUG
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUGBoosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUG
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUGRick Ossendrijver
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...ShapeBlue
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 

Recently uploaded (20)

Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
KUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ionKUBRICK Graphs: A journey from in vogue to success-ion
KUBRICK Graphs: A journey from in vogue to success-ion
 
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
Improving IT Investment Decisions and Business Outcomes with Integrated Enter...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in Healthcare
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUG
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUGBoosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUG
Boosting Developer Effectiveness with a Java platform team 1.4 - ArnhemJUG
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
CloudStack 101: The Best Way to Build Your Private Cloud – Rohit Yadav, VP Ap...
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 

Practical progressive enhancement

  • 2. Graham Bird Senior Web Producer, Cardiff University @mrgrahambird Hello
  • 4. Here’s the deal * more on this later
  • 5. 1. Start with accessible, semantic and clean* HTML Here’s the deal * more on this later
  • 6. 1. Start with accessible, semantic and clean* HTML 2. Add external CSS Here’s the deal * more on this later
  • 7. 1. Start with accessible, semantic and clean* HTML 2. Add external CSS 3. (Lazy-load) external JavaScript Here’s the deal * more on this later
  • 8. 1. Start with accessible, semantic and clean* HTML 2. Add external CSS 3. (Lazy-load) external JavaScript 4. End with accessible, semantic and clean HTML Here’s the deal * more on this later
  • 11. 10 years old 1993 2013 Half as old as the web!One web page 4.1 billion web pages
  • 18. Content Styling Behaviour 2003 Inclusive Web Design for the Future, Steve Champeon & Nick Finck, SXSW
  • 21. Bootstrap jQuery Mobile Require.js 2013 jQuery jQuery plugins Retina! Responsive! Polyfills@font-face Content? TodoMVCAPIs Tomorrow HTML5 CSS3
  • 22. Bootstrap jQuery Mobile Require.js 2013 jQuery jQuery plugins Retina! Responsive! Polyfills@font-face Content? TodoMVCAPIs Tomorrow HTML5 CSS3
  • 23. <html> <body> <div class=”container”> <div class=”row”> <div class=”span8”> <h1>Latest sales figures</h1> <p>It’s difficult to draw any conclusions from our latest results.</p> <div id=”chart”></div> <h2>Leave a comment, if you can</h2> <div id=”comments”></div> </div> <div class=”span4”> <h4>How to not find us</h4> <div id=”map”></div> <h4>Don’t follow us on Twitter</h4> <div id=”tweets”></div> </div> </div> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  • 24. <html> <body> <div class=”container”> <div class=”row”> <div class=”span8”> <h1>Latest sales figures</h1> <p>It’s difficult to draw any conclusions from our latest results.</p> <div id=”chart”></div> <h2>Leave a comment, if you can</h2> <div id=”comments”></div> </div> <div class=”span4”> <h4>How to not find us</h4> <div id=”map”></div> <h4>Don’t follow us on Twitter</h4> <div id=”tweets”></div> </div> </div> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  • 29. <ul class=”nav nav-tabs”> <li class=”active”><a href=”#description”>Description</a></li> <li><a href=”#key-features”>Key features</a></li> <li><a href=”#guarantee”>Guarantee</a></li> </ul> <div class=”tab-content”> <div id=”description” class=”tab-pane active”> <p>This watch is a design classic.</p> </div> <div id=”key-features”> <p>Every watch has a strap and a face with numbers on it.</p> </div> <div id=”guarantee”> <p>All watches come with a 5 year guarantee.</p> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
  • 32. 1. The content 2. Unordered list of anchor links
  • 33. 1. The content 2. Unordered list of anchor links 3. Nothing else (but classes)
  • 34. 1. The content 2. Unordered list of anchor links 3. Nothing else (but classes) 4. One div tag
  • 35. <ul class=”nav nav-tabs”> <li class=”active”><a href=”#description”>Description</a></li> <li><a href=”#key-features”>Key features</a></li> <li><a href=”#guarantee”>Guarantee</a></li> </ul> <div class=”tab-content”> <div id=”description” class=”tab-pane active”> <p>This watch is a design classic.</p> </div> <div id=”key-features”> <p>Every watch has a strap and a face with numbers on it.</p> </div> <div id=”guarantee”> <p>All watches come with a 5 year guarantee.</p> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
  • 38. 1. The simplest & least HTML possible
  • 39. 1. The simplest & least HTML possible 2. No inline CSS
  • 40. 1. The simplest & least HTML possible 2. No inline CSS 3. Unobtrusive JavaScript
  • 41. 1. The simplest & least HTML possible 2. No inline CSS 3. Unobtrusive JavaScript 4. Nothing in the source for JS purposes
  • 44. <div id=”myCarousel” class=”carousel slide”> <ol class=”carousel-indicators”> <li data-target=”#myCarousel” data-slide-to=”0” class=”active”></li> <li data-target=”#myCarousel” data-slide-to=”1”></li> <li data-target=”#myCarousel” data-slide-to=”2”></li> </ol> <div class=”carousel-inner”> <div class=”active item”>...</div> <div class=”item”>...</div> <div class=”item”>...</div> </div> <a class=”carousel-control left” href=”#myCarousel” data- slide=”prev”>&lsaquo;</a> <a class=”carousel-control right” href=”#myCarousel” data- slide=”next”>&rsaquo;</a> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • 45. <div id=”myCarousel” class=”carousel slide”> <ol class=”carousel-indicators”> <li data-target=”#myCarousel” data-slide-to=”0” class=”active”></li> <li data-target=”#myCarousel” data-slide-to=”1”></li> <li data-target=”#myCarousel” data-slide-to=”2”></li> </ol> <div class=”carousel-inner”> <div class=”active item”>...</div> <div class=”item”>...</div> <div class=”item”>...</div> </div> <a class=”carousel-control left” href=”#myCarousel” data- slide=”prev”>&lsaquo;</a> <a class=”carousel-control right” href=”#myCarousel” data- slide=”next”>&rsaquo;</a> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Oh, the humanity!
  • 46. <div id=”myCarousel” class=”carousel slide”> <ol class=”carousel-indicators”> <li data-target=”#myCarousel” data-slide-to=”0” class=”active”></li> <li data-target=”#myCarousel” data-slide-to=”1”></li> <li data-target=”#myCarousel” data-slide-to=”2”></li> </ol> <div class=”carousel-inner”> <div class=”active item”>...</div> <div class=”item”>...</div> <div class=”item”>...</div> </div> <a class=”carousel-control left” href=”#myCarousel” data- slide=”prev”>&lsaquo;</a> <a class=”carousel-control right” href=”#myCarousel” data- slide=”next”>&rsaquo;</a> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • 47. <div id=”myCarousel” class=”carousel slide”> <div class=”carousel-inner”> <div class=”active item”>...</div> <div class=”item”>...</div> <div class=”item”>...</div> </div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • 49. <a href=”#” onClick=”_gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Baby’s First Birthday’]);”>Play</a> 1 2
  • 50. <a href=”#” onClick=”_gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Baby’s First Birthday’]);”>Play</a> 1 2
  • 51. <a href=”#” onClick=”_gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Baby’s First Birthday’]);”>Play</a> 1 2
  • 52. <a href=”#” onClick=”_gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Baby’s First Birthday’]);”>Play</a> 1 2
  • 53. <a class=”ga-event” href=”http://youtu.be/123456” data-category=”Videos” data- action=”Play” data-label=”Baby’s First Birthday”>Play</a> <script type=”text/javascript”> $(function(){ if($(‘.ga-event’).length > 0) { $(‘.ga-event’).each(function() { $(this).click(function() { var linkCategory = $(this).data(‘category’); var linkAction = $(this).data(‘action’); var linkLabel = $(this).data(‘label’); _gaq.push([‘_trackEvent’, linkCategory, linkAction, linkLabel]); }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 58. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 59. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 60. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 61. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 62. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 63. <div id=”tweets-unifieddiff”></div> <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
  • 64. <div id=”tweets-unifieddiff”></div> <a class=”twitter-feed” href=”http://twitter.com/unifieddiff”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
  • 65. <div id=”tweets-unifieddiff”></div> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 66. <div id=”tweets-unifieddiff”></div> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • 67. <a class=”twitter-feed” href=”http://twitter.com/unifieddiff” data- results=”3”>Follow us on Twitter</a> <script type=”text/javascript”> $(function(){ if($(‘.twitter-feed’).length > 0) { $(‘.twitter-feed’).each(function() { var userName = $(this).attr(‘href’).replace(‘http://www.twitter.com/’, ‘’); var numResults = $(this).data(“results”); $(this).prepend(‘<div id=”tweets-’ + userName + ‘”></div>’); $(this).remove(); $(‘#tweets-’ + userName).jtwt({ “username”: userName, “count”: numResults }); }); } }); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  • 70. ✓ Make your site usable with CSS and JavaScript disabled
  • 71. ✓ Make your site usable with CSS and JavaScript disabled ✓ Don’t hide the content
  • 72. ✓ Make your site usable with CSS and JavaScript disabled ✓ Don’t hide the content ✓ Think features, not browsers (Modernizr)
  • 73. ✓ Make your site usable with CSS and JavaScript disabled ✓ Don’t hide the content ✓ Think features, not browsers (Modernizr) ✓ Don’t include anything in your HTML that requires JavaScript to work
  • 74. ✓ Make your site usable with CSS and JavaScript disabled ✓ Don’t hide the content ✓ Think features, not browsers (Modernizr) ✓ Don’t include anything in your HTML that requires JavaScript to work ✓ Get clever with classes and data attributes
  • 75. ✓ Make your site usable with CSS and JavaScript disabled ✓ Don’t hide the content ✓ Think features, not browsers (Modernizr) ✓ Don’t include anything in your HTML that requires JavaScript to work ✓ Get clever with classes and data attributes ✓ Give your content editors automagical powers