SlideShare a Scribd company logo
1 of 43
Progressive Enhancement 2.0
The Interesting Concept I’d Like to Share
Nicholas C. Zakas
                    A front-end consultant, author, and speaker.
                    He worked at Yahoo! for almost five years,
                    where he was front-end tech lead for the
                    Yahoo! homepage and a contributor to the
                    YUI library.

                    Nicholas is a strong advocate for
                    development best practices including
                    progressive enhancement, accessibility,
                    performance, scalability, and maintainability.
Progressive enhancement uses web technologies in a layered
fashion that allows everyone to access the basic content and
functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the
page to those with more advanced browser software or greater
bandwidth.

http://en.wikipedia.org/wiki/Progressive_enhancement
What is Progressive Enhancement ?
Content



Presentation


Behavior
HTML



   CSS


JavaScript
Yahoo! Graded Browser Support



           HTML                    HTML



           CSS


       JavaScript
     A-Grade Browser          C-Grade Browser
3 layers are capable to use      Only HTML
Before, developer are only dealing with 2
browsers:




     But now…
Reality:
not every browser can support all the different
technology




To support all browser in the same way,
•development takes too long
•too many bugs
•our pages are slow (bad performance)
•horrible user experiences
Developer may:

a.Limit the website's potential so that it will work
with older browsers
b.Not support some of the browsers
c.Use progressive enhancement to ensure that the
site can work on both modern and older browsers
 Get angry if we see different from
           different browsers?
          Quality = The same across all browser?
          Not Professional if it’s not consistent ?



Nicholas:
We obsessed with Identical experiences across all
browsers
Web browser: Web page
Television: television show
Q: Do web sites need to look exactly the same in
every browser?


   Nicholas:
   “NO! Your site SHOULD look different in
   different browsers!”
Nicholas:

“Why would they upgrade if things
always look the same? They
wouldn’t.”

“Give users an incentive to
upgrade.”
The small list of build-in in new browser
Nicholas:

  “Give the best possible experience
      given the device capabilities.
Not the same experience for everybody.”
The time are mostly spent on bug fixes, work around
Nicholas:
   Rounded Corners, Drop Shadows, Gradients



          “Only with CSS
Not Adobe Photoshop, not manually”
Nicholas:
  “Older browsers often need a lot
  more code to do the same thing”

            Less code=faster
Nicholas:

“Adopt the advanced scripting and behavior
          only with native APIs”

     Use it in the supported browsers
Nicholas:
     “You care the content”
Nicholas:
“Your users only use one browser”
It’s a progressive enhancement you can still attach a file by
 clicking attach a file there if you don’t have drag-and-drop
The Gmail for the iPad also have the same elements just rearranged
     a little bit to give a better experience on a tablet device
Can you tell the rounded corners only on Chrome and Firefox?
You will get a nice little notice that tell you you cannot use chat on
                             facebook in IE6
Nicholas:
Because they decided that It was too much work to
continue to support on IE6, when they could spend more
time on newer features for the more capable browsers.

“Chat is really the progressive enhancement. You
can go in, you can still see your timeline, you can
still do whatever, you just can’t chat. That’s an
added bonus you get only when you’re using a
newerget a nice little notice that tell you you cannot use chat on
You will browser, and that’s okay.”
                         facebook in IE6
There are little things based on capabilities at the time. Firefox didn’t have the
      same fonts, CSS animations transition in order to create carousel
Nicholas:


     “Whenever a user comes to the page, they get whatever
     in the main point of the page.”

     For Web sites, content is key
     For Web applications, focus on 1 or 2 core features, that
     are why people use your product.




There are little things based on capabilities at the time. Firefox didn’t have the
      same fonts, CSS animations transition in order to create carousel
Summary
• Users care the content
• Users only use one browser
• Focus on the key features of your product
• Support the best possible experience, not the same
  experience for everybody
• Give users an incentive to upgrade
Source
Progressive Enhancement 2.0: Because the Web isn’t Print:
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

Nicholas Zakas: Progressive Enhancement 2.0 on YouTube:
http://www.youtube.com/watch?v=hdTxeR90_1E

More Related Content

What's hot

Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPressJoseph Dolson
 
EdTechJoker Spring 2020 - Lecture 6 - WordPress
EdTechJoker Spring 2020 - Lecture 6 -   WordPressEdTechJoker Spring 2020 - Lecture 6 -   WordPress
EdTechJoker Spring 2020 - Lecture 6 - WordPressBryan Ollendyke
 
Inclusive design 24 (gaad)
Inclusive design 24 (gaad)Inclusive design 24 (gaad)
Inclusive design 24 (gaad)Mike Gifford
 
Increasing Productivity With Google Apps & Gmail Tools
Increasing Productivity With Google Apps & Gmail ToolsIncreasing Productivity With Google Apps & Gmail Tools
Increasing Productivity With Google Apps & Gmail Tools4Good.org
 
Ode to an Accessibility Bug
Ode to an Accessibility BugOde to an Accessibility Bug
Ode to an Accessibility BugWendy Chisholm
 
Basic WordPress Workshop Presentation
Basic WordPress Workshop PresentationBasic WordPress Workshop Presentation
Basic WordPress Workshop PresentationFelix Albutra
 
Did wordpressdothat
Did wordpressdothatDid wordpressdothat
Did wordpressdothatJon Bishop
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
FLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONFLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONJoseph Labrecque
 
Wordpress intro
Wordpress introWordpress intro
Wordpress introthe-colab
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and AccessibilityJoseph Dolson
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPressbtopro
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewAidan Foster
 
Wikify your Doc Set: A Writer's Role in Web 2.0
Wikify your Doc Set: A Writer's Role in Web 2.0Wikify your Doc Set: A Writer's Role in Web 2.0
Wikify your Doc Set: A Writer's Role in Web 2.0Anne Gentle
 

What's hot (20)

Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
 
i Books
i Booksi Books
i Books
 
EdTechJoker Spring 2020 - Lecture 6 - WordPress
EdTechJoker Spring 2020 - Lecture 6 -   WordPressEdTechJoker Spring 2020 - Lecture 6 -   WordPress
EdTechJoker Spring 2020 - Lecture 6 - WordPress
 
Comparison ppt
Comparison pptComparison ppt
Comparison ppt
 
Inclusive design 24 (gaad)
Inclusive design 24 (gaad)Inclusive design 24 (gaad)
Inclusive design 24 (gaad)
 
Increasing Productivity With Google Apps & Gmail Tools
Increasing Productivity With Google Apps & Gmail ToolsIncreasing Productivity With Google Apps & Gmail Tools
Increasing Productivity With Google Apps & Gmail Tools
 
Ode to an Accessibility Bug
Ode to an Accessibility BugOde to an Accessibility Bug
Ode to an Accessibility Bug
 
Library 2.0 : Weblogs : Wordpress
Library 2.0 : Weblogs : WordpressLibrary 2.0 : Weblogs : Wordpress
Library 2.0 : Weblogs : Wordpress
 
Basic WordPress Workshop Presentation
Basic WordPress Workshop PresentationBasic WordPress Workshop Presentation
Basic WordPress Workshop Presentation
 
WordPress
WordPressWordPress
WordPress
 
Did wordpressdothat
Did wordpressdothatDid wordpressdothat
Did wordpressdothat
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
FLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATIONFLASH AND AIR IN EDUCATION
FLASH AND AIR IN EDUCATION
 
Wordpress intro
Wordpress introWordpress intro
Wordpress intro
 
Wordpress 101 Training
Wordpress 101 TrainingWordpress 101 Training
Wordpress 101 Training
 
WordPress and Accessibility
WordPress and AccessibilityWordPress and Accessibility
WordPress and Accessibility
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
 
Wikify your Doc Set: A Writer's Role in Web 2.0
Wikify your Doc Set: A Writer's Role in Web 2.0Wikify your Doc Set: A Writer's Role in Web 2.0
Wikify your Doc Set: A Writer's Role in Web 2.0
 
Eureko frameworks
Eureko frameworksEureko frameworks
Eureko frameworks
 

Similar to Progressive enhancement 2.0 what i'd like to share to designers

Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochKeynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochFuture Insights
 
Web maker - Web making Tools
Web maker - Web making Tools Web maker - Web making Tools
Web maker - Web making Tools Komal Gandhi
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
Moz Cafe December 2012
Moz Cafe December 2012Moz Cafe December 2012
Moz Cafe December 2012Vivek Kiran
 
Web browsers and browser version support
Web browsers and browser version supportWeb browsers and browser version support
Web browsers and browser version supportIan Brennan
 
New voice, new tone, new IA: Writing for the modern developer
New voice, new tone, new IA: Writing for the modern developerNew voice, new tone, new IA: Writing for the modern developer
New voice, new tone, new IA: Writing for the modern developerKeith Boyd
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsAnjaliTanpure1
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyZoe Gillenwater
 
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User ExperienceWeb Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User ExperienceChromeInfo Technologies
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web designNate Walton
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignMaria D'Amato
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowMichael Kowalski
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureguidecreative
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Henny Swan
 
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on AccessibilityUsing Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on AccessibilityD2L
 
MDN Development & Web Documentation
MDN Development & Web DocumentationMDN Development & Web Documentation
MDN Development & Web DocumentationJay Patel
 

Similar to Progressive enhancement 2.0 what i'd like to share to designers (20)

Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochKeynote- We're going wrong: Choosing the web's future. Peter Paul Koch
Keynote- We're going wrong: Choosing the web's future. Peter Paul Koch
 
Mozilla Webmaker
Mozilla Webmaker Mozilla Webmaker
Mozilla Webmaker
 
Web maker - Web making Tools
Web maker - Web making Tools Web maker - Web making Tools
Web maker - Web making Tools
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Moz Cafe December 2012
Moz Cafe December 2012Moz Cafe December 2012
Moz Cafe December 2012
 
Web browsers and browser version support
Web browsers and browser version supportWeb browsers and browser version support
Web browsers and browser version support
 
Soodam
SoodamSoodam
Soodam
 
New voice, new tone, new IA: Writing for the modern developer
New voice, new tone, new IA: Writing for the modern developerNew voice, new tone, new IA: Writing for the modern developer
New voice, new tone, new IA: Writing for the modern developer
 
321 alexander kimmobilestrategy
321 alexander kimmobilestrategy321 alexander kimmobilestrategy
321 alexander kimmobilestrategy
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Web Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User ExperienceWeb Application Development Tools for Creating Perfect User Experience
Web Application Development Tools for Creating Perfect User Experience
 
The future of BYU web design
The future of BYU web designThe future of BYU web design
The future of BYU web design
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Everything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web DesignEverything Old is New Again: The State of Web Design
Everything Old is New Again: The State of Web Design
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
Guide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFutureGuide Series Interactive Design_PastPresentAndFuture
Guide Series Interactive Design_PastPresentAndFuture
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?
 
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on AccessibilityUsing Web 2.0 Tools inside Brightspace with an Eye on Accessibility
Using Web 2.0 Tools inside Brightspace with an Eye on Accessibility
 
MDN Development & Web Documentation
MDN Development & Web DocumentationMDN Development & Web Documentation
MDN Development & Web Documentation
 

More from rita

Ch2 first steps_in_drawing
Ch2 first steps_in_drawingCh2 first steps_in_drawing
Ch2 first steps_in_drawingrita
 
Drawing on the Right Side of the Brain- Introduction
Drawing on the Right Side of the Brain- IntroductionDrawing on the Right Side of the Brain- Introduction
Drawing on the Right Side of the Brain- Introductionrita
 
Government Should Prohibit the Children from Going to Cram Schools before jun...
Government Should Prohibit the Children from Going to Cram Schools before jun...Government Should Prohibit the Children from Going to Cram Schools before jun...
Government Should Prohibit the Children from Going to Cram Schools before jun...rita
 
SuperEco: Our Concept Design for Reducing Food Mileage to Help the Earth
SuperEco: Our Concept Design for Reducing Food Mileage to Help the EarthSuperEco: Our Concept Design for Reducing Food Mileage to Help the Earth
SuperEco: Our Concept Design for Reducing Food Mileage to Help the Earthrita
 
SERVICE DESIGN FOR EXPERIENCING RECREATION CYCLING LIFE STYLE
SERVICE DESIGN FOR EXPERIENCING  RECREATION CYCLING LIFE STYLESERVICE DESIGN FOR EXPERIENCING  RECREATION CYCLING LIFE STYLE
SERVICE DESIGN FOR EXPERIENCING RECREATION CYCLING LIFE STYLErita
 
Mobile User Interface Design
Mobile User Interface DesignMobile User Interface Design
Mobile User Interface Designrita
 
國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人rita
 

More from rita (7)

Ch2 first steps_in_drawing
Ch2 first steps_in_drawingCh2 first steps_in_drawing
Ch2 first steps_in_drawing
 
Drawing on the Right Side of the Brain- Introduction
Drawing on the Right Side of the Brain- IntroductionDrawing on the Right Side of the Brain- Introduction
Drawing on the Right Side of the Brain- Introduction
 
Government Should Prohibit the Children from Going to Cram Schools before jun...
Government Should Prohibit the Children from Going to Cram Schools before jun...Government Should Prohibit the Children from Going to Cram Schools before jun...
Government Should Prohibit the Children from Going to Cram Schools before jun...
 
SuperEco: Our Concept Design for Reducing Food Mileage to Help the Earth
SuperEco: Our Concept Design for Reducing Food Mileage to Help the EarthSuperEco: Our Concept Design for Reducing Food Mileage to Help the Earth
SuperEco: Our Concept Design for Reducing Food Mileage to Help the Earth
 
SERVICE DESIGN FOR EXPERIENCING RECREATION CYCLING LIFE STYLE
SERVICE DESIGN FOR EXPERIENCING  RECREATION CYCLING LIFE STYLESERVICE DESIGN FOR EXPERIENCING  RECREATION CYCLING LIFE STYLE
SERVICE DESIGN FOR EXPERIENCING RECREATION CYCLING LIFE STYLE
 
Mobile User Interface Design
Mobile User Interface DesignMobile User Interface Design
Mobile User Interface Design
 
國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人國科會期中發表 交大陪伴型機器人
國科會期中發表 交大陪伴型機器人
 

Progressive enhancement 2.0 what i'd like to share to designers

  • 1. Progressive Enhancement 2.0 The Interesting Concept I’d Like to Share
  • 2. Nicholas C. Zakas A front-end consultant, author, and speaker. He worked at Yahoo! for almost five years, where he was front-end tech lead for the Yahoo! homepage and a contributor to the YUI library. Nicholas is a strong advocate for development best practices including progressive enhancement, accessibility, performance, scalability, and maintainability.
  • 3.
  • 4. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth. http://en.wikipedia.org/wiki/Progressive_enhancement
  • 5.
  • 6.
  • 7. What is Progressive Enhancement ?
  • 9. HTML CSS JavaScript
  • 10. Yahoo! Graded Browser Support HTML HTML CSS JavaScript A-Grade Browser C-Grade Browser 3 layers are capable to use Only HTML
  • 11. Before, developer are only dealing with 2 browsers: But now…
  • 12. Reality: not every browser can support all the different technology To support all browser in the same way, •development takes too long •too many bugs •our pages are slow (bad performance) •horrible user experiences
  • 13. Developer may: a.Limit the website's potential so that it will work with older browsers b.Not support some of the browsers c.Use progressive enhancement to ensure that the site can work on both modern and older browsers
  • 14.  Get angry if we see different from different browsers?  Quality = The same across all browser?  Not Professional if it’s not consistent ? Nicholas: We obsessed with Identical experiences across all browsers
  • 15.
  • 16.
  • 17.
  • 18. Web browser: Web page Television: television show
  • 19.
  • 20.
  • 21. Q: Do web sites need to look exactly the same in every browser? Nicholas: “NO! Your site SHOULD look different in different browsers!”
  • 22. Nicholas: “Why would they upgrade if things always look the same? They wouldn’t.” “Give users an incentive to upgrade.”
  • 23.
  • 24.
  • 25.
  • 26. The small list of build-in in new browser
  • 27. Nicholas: “Give the best possible experience given the device capabilities. Not the same experience for everybody.”
  • 28.
  • 29. The time are mostly spent on bug fixes, work around
  • 30. Nicholas: Rounded Corners, Drop Shadows, Gradients “Only with CSS Not Adobe Photoshop, not manually”
  • 31. Nicholas: “Older browsers often need a lot more code to do the same thing” Less code=faster
  • 32. Nicholas: “Adopt the advanced scripting and behavior only with native APIs” Use it in the supported browsers
  • 33. Nicholas: “You care the content”
  • 34. Nicholas: “Your users only use one browser”
  • 35. It’s a progressive enhancement you can still attach a file by clicking attach a file there if you don’t have drag-and-drop
  • 36. The Gmail for the iPad also have the same elements just rearranged a little bit to give a better experience on a tablet device
  • 37. Can you tell the rounded corners only on Chrome and Firefox?
  • 38. You will get a nice little notice that tell you you cannot use chat on facebook in IE6
  • 39. Nicholas: Because they decided that It was too much work to continue to support on IE6, when they could spend more time on newer features for the more capable browsers. “Chat is really the progressive enhancement. You can go in, you can still see your timeline, you can still do whatever, you just can’t chat. That’s an added bonus you get only when you’re using a newerget a nice little notice that tell you you cannot use chat on You will browser, and that’s okay.” facebook in IE6
  • 40. There are little things based on capabilities at the time. Firefox didn’t have the same fonts, CSS animations transition in order to create carousel
  • 41. Nicholas: “Whenever a user comes to the page, they get whatever in the main point of the page.” For Web sites, content is key For Web applications, focus on 1 or 2 core features, that are why people use your product. There are little things based on capabilities at the time. Firefox didn’t have the same fonts, CSS animations transition in order to create carousel
  • 42. Summary • Users care the content • Users only use one browser • Focus on the key features of your product • Support the best possible experience, not the same experience for everybody • Give users an incentive to upgrade
  • 43. Source Progressive Enhancement 2.0: Because the Web isn’t Print: http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic Nicholas Zakas: Progressive Enhancement 2.0 on YouTube: http://www.youtube.com/watch?v=hdTxeR90_1E