O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a navegar o site, você aceita o uso de cookies. Leia nosso Contrato do Usuário e nossa Política de Privacidade.
O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a utilizar o site, você aceita o uso de cookies. Leia nossa Política de Privacidade e nosso Contrato do Usuário para obter mais detalhes.
Progressive enhancement 2.0 what i'd like to share to designers
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 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
Before, developer are only dealing with 2browsers: But now…
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
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
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
Web browser: Web pageTelevision: television show
Q: Do web sites need to look exactly the same inevery browser? Nicholas: “NO! Your site SHOULD look different in different browsers!”
Nicholas:“Why would they upgrade if thingsalways look the same? Theywouldn’t.”“Give users an incentive toupgrade.”
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 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
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
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