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.

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

7. What is Progressive Enhancement ?

8. Content
Presentation
Behavior

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

18. Web browser: Web page
Television: television show

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.”

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.”

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