progressive enhancement 2.0 what i'd like to share to designers
Post on 20-Aug-2015
319 Views
Preview:
TRANSCRIPT
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
top related