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

570 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
570
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Progressive Enhancement 2.0The Interesting Concept I’d Like to Share
  2. 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. 3. Progressive enhancement uses web technologies in a layeredfashion that allows everyone to access the basic content andfunctionality of a web page, using any browser or Internetconnection, while also providing an enhanced version of thepage to those with more advanced browser software or greaterbandwidth.http://en.wikipedia.org/wiki/Progressive_enhancement
  4. 4. What is Progressive Enhancement ?
  5. 5. ContentPresentationBehavior
  6. 6. HTML CSSJavaScript
  7. 7. Yahoo! Graded Browser Support HTML HTML CSS JavaScript A-Grade Browser C-Grade Browser3 layers are capable to use Only HTML
  8. 8. Before, developer are only dealing with 2browsers: But now…
  9. 9. Reality:not every browser can support all the differenttechnologyTo support all browser in the same way,•development takes too long•too many bugs•our pages are slow (bad performance)•horrible user experiences
  10. 10. Developer may:a.Limit the websites potential so that it will workwith older browsersb.Not support some of the browsersc.Use progressive enhancement to ensure that thesite can work on both modern and older browsers
  11. 11.  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 allbrowsers
  12. 12. Web browser: Web pageTelevision: television show
  13. 13. Q: Do web sites need to look exactly the same inevery browser? Nicholas: “NO! Your site SHOULD look different in different browsers!”
  14. 14. Nicholas:“Why would they upgrade if thingsalways look the same? Theywouldn’t.”“Give users an incentive toupgrade.”
  15. 15. The small list of build-in in new browser
  16. 16. Nicholas: “Give the best possible experience given the device capabilities.Not the same experience for everybody.”
  17. 17. The time are mostly spent on bug fixes, work around
  18. 18. Nicholas: Rounded Corners, Drop Shadows, Gradients “Only with CSSNot Adobe Photoshop, not manually”
  19. 19. Nicholas: “Older browsers often need a lot more code to do the same thing” Less code=faster
  20. 20. Nicholas:“Adopt the advanced scripting and behavior only with native APIs” Use it in the supported browsers
  21. 21. Nicholas: “You care the content”
  22. 22. Nicholas:“Your users only use one browser”
  23. 23. 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
  24. 24. The Gmail for the iPad also have the same elements just rearranged a little bit to give a better experience on a tablet device
  25. 25. Can you tell the rounded corners only on Chrome and Firefox?
  26. 26. You will get a nice little notice that tell you you cannot use chat on facebook in IE6
  27. 27. Nicholas:Because they decided that It was too much work tocontinue to support on IE6, when they could spend moretime on newer features for the more capable browsers.“Chat is really the progressive enhancement. Youcan go in, you can still see your timeline, you canstill do whatever, you just can’t chat. That’s anadded bonus you get only when you’re using anewerget a nice little notice that tell you you cannot use chat onYou will browser, and that’s okay.” facebook in IE6
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. SourceProgressive Enhancement 2.0: Because the Web isn’t Print:http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnosticNicholas Zakas: Progressive Enhancement 2.0 on YouTube:http://www.youtube.com/watch?v=hdTxeR90_1E

×