Progressive Enhancement 2.0The 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

A-Grade Browser3 layers are capable to use

C-Grade BrowserOnly HTML

Yahoo! Graded Browser Support

HTML

CSS

JavaScript

HTML

Before, developer are only dealing with 2 browsers:

But now…

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

Reality: not every browser can support all the different technology

Developer may:

①Limit the website's potential so that it will work with older browsers②Not support some of the browsers③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 ?

We obsessed with Identical experiences across all browsers

Nicholas:

Web browser: Web pageTelevision: television show

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

Q: Do web sites need to look exactly the same in every browser?

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

“Give the best possible experience given the device capabilities.

Not the same experience for everybody.”

Nicholas:

The time are mostly spent on bug fixes, work around

Rounded Corners, Drop Shadows, Gradients

“Only with CSSNot 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 behavioronly with native APIs”

Use it in the supported browsers

Nicholas:

“You care the content” Nicholas:

“Your users only use one browser”Nicholas:

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

You will get a nice little notice that tell you you cannot use chat on facebook in IE6

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 newer browser, and that’s okay.”

Nicholas:

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

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

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

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

Nicholas:

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

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

Source