I’ve been a proponent of PE for a while, and have gotten push back from developers who want to create for the ‘latest and greatest’ and then look to fix any quirks later. One of they key areas of this battle has been Flash.
I see Flash as being the printed “m” on the M&M – it usually requires some JavaScript to work optimally, or at least there is very seldom Flash without JavaScript involved. Just curious as to other thoughts about this – in the example presented, would Flash be the printed “m” or a second candy shell?
Thank you for the wonderful article. I had no real understanding of the difference that progressive enhancement intends to bring to the table until I read this article. This article clearly portrays the advancements offered by such a development paradigm, and quickly offers up an understanding of it’s fundamental differences.
The article does miss explaining the ‘M’ printed on the candy. To me, this would represent the site’s favicon.
I’m a fan of progressive enhancement as I use NoScript on Firefox and hate it when a site forces me to allow their JavaScript just to use the site’s functionality, even though it’s not needed. Sometimes I’ll leave the site, but other ones I really need to use, so have to allow it.
Copy & paste the code below to embed this comment.
John K
I just don’t see the difference between progressive enhancement and graceful degradation. To me it seems like progressive enhancement is just graceful degradation done right.
Can anyone please tell me which of the two the following scenario adheres to?
Someone builds a Javascript image gallery that loads all images, and hides the non selected images using Javascript+css. Anchors are used by Javascript to display the selected image and hide the previous selected image. The default action of the anchors are suppressed by Javascript.
If Javascript is disabled, the images are not hidden and all appear in the page. The anchors “href” is set to target the image, so when a certain anchor is clicked, the browser jumps to the appropriate image on the page.
That was a quality article. And a good kick in the pants. Often when I go about CSS, even though I’m conscious to make it accessible and test it in older browsers, I focus on CSS being design – and I focus on design and plug the content in after. But really, the content does need to be first. Adding CSS while focusing on the content is a subtle but important shift in thinking. Thanks for the thoughts…
In the past i was styling my H’s nad A’s and P’s way before I put some content in the page. After that i started adding some content and then style it, then add some more content, and so on…
After I read your article it all clicked for me – I knew where I wanted to go with the development of my HTML pages.
Now I put in all of my content, then I apply styles to it. It was remarkable to notice how much LESS ie-workarounds I had to apply to my code by doing so. Sometimes I even don’t have to apply any. (those are the times when I’m grinning like a madman).
It amazes me that folks still mark up their pages this way. No self-respecting GD/PE website would replace real hyperlinks with inline JavaScript in the markup. Instead, the HTML link should (re)load the page with the next chunk of content, and a linked JavaScript file would override that hyperlink with the ScrollArrow() behavior.
Copy & paste the code below to embed this comment.
evanchaney
I believe in the idea of progressive enhancement and the reasoning behind it. I wonder your thoughts, Aaron, on how the idea can be applied, or if it does apply, to Web applications.
An argument can (and is being) made that applications need not be universally accessible; that an application, by nature of the behavior it has and the technologies it depends on, has minimum system requirements.
How do you view progressive enhancement as relates to applications for creating content, manipulating content or completing tasks that use Web technologies as the runtime environment inside a browser?
Copy & paste the code below to embed this comment.
antandcharmi
I’m way late reading this and so my comment may be utterly redundant by now, but I think that the difference between Graceful Degradation and Progressive Enhancement is in the point-of-view of the designer.
PE is a forward-planning effort including older browsers’ needs from the start, while GD is backward-looking stop-gap approach. GD builds an ideal site, and only throws in rough and basic accessibility as a quick and lazy afterthought; whereas PE deliberately plans well-designed access to the content from the ground up, adding more beautiful interactions along the way.
So they both achieve the same goal, but PE does it better (though perhaps at greater cost).
However, I also see a danger with PE:
The web is much, much more than content nowadays. It is just as much market-related entertainment and interaction. Entertaining and easy-to-use web-sites will have readers who not only stick, but also spread the word all over the web, increasing the site’s ‘web share’.
But starting from content and older-generation accessibility concerns from the ground up can unwittingly blinker your artistic flair and result in your missing a much better interaction design possible in the latest generation of browsers.
To tell the truth I haven’t designed a web-site yet but I think my personal instinctive approach would be a 3-pass design phase – first the ideal, then the basic, and finally a re-working of the two to find the best combination:
1. To carefully AVOID thinking of older browser needs at first for the artistic creative phase. To focus on designing a rewarding and easy EXPERIENCE for the user whatever it might involve.
2. Then to do the same thing again for the oldest browsers, and see how much of their design can overlap with your ideal design.
3. Finally to marry the two and produce a child design, now from the PE point of view, perhaps sacrificing some aspects of your ideal design. Or even perhaps to divorce the two, if the ideal is worth the maintenance.
Copy & paste the code below to embed this comment.
antandcharmi
As a PS to the above.
I misrepresented PE slightly above, in that as I understand it the aim is to forget the browser issues, and design the delivery of the content itself, THEN build that delivery for all levels of browser.
I guess I really am just qualifying PE by saying that we must design not only for content delivery but also for interaction and entertainment, and as a result, we are forced to consider browser capabilities from the start. And so, not to be unconsciously limited, we need to indulge in the luxury of the latest version of browsers before designing the delivery of content from the ground up.
I like thinking about Progressive Enhancement first, otherwise Graceful Degradation can end up like a zombie as this: http://ui-notes.com/progressive-enhance-vs-graceful-degradation/
Browser compatibility is very important part of website design. I face lots of errors when; I check my site in different browsers, Some websites works on Firefox but not in IE, Some website works in Chrome but not in IE and Firefox. Main reason of these errors is javascript element. Its can hurt your business customer, if your webpage is not browser compatibility.
43 Reader Comments
Back to the ArticleMarty DeAngelo
I’ve been a proponent of PE for a while, and have gotten push back from developers who want to create for the ‘latest and greatest’ and then look to fix any quirks later. One of they key areas of this battle has been Flash.
I see Flash as being the printed “m” on the M&M – it usually requires some JavaScript to work optimally, or at least there is very seldom Flash without JavaScript involved. Just curious as to other thoughts about this – in the example presented, would Flash be the printed “m” or a second candy shell?
Alex Stanford
Thank you for the wonderful article. I had no real understanding of the difference that progressive enhancement intends to bring to the table until I read this article. This article clearly portrays the advancements offered by such a development paradigm, and quickly offers up an understanding of it’s fundamental differences.
Thanks again,
Alex
Kendall Conrad
The article does miss explaining the ‘M’ printed on the candy. To me, this would represent the site’s favicon.
I’m a fan of progressive enhancement as I use NoScript on Firefox and hate it when a site forces me to allow their JavaScript just to use the site’s functionality, even though it’s not needed. Sometimes I’ll leave the site, but other ones I really need to use, so have to allow it.
John K
I just don’t see the difference between progressive enhancement and graceful degradation. To me it seems like progressive enhancement is just graceful degradation done right.
Can anyone please tell me which of the two the following scenario adheres to?
Someone builds a Javascript image gallery that loads all images, and hides the non selected images using Javascript+css. Anchors are used by Javascript to display the selected image and hide the previous selected image. The default action of the anchors are suppressed by Javascript.
If Javascript is disabled, the images are not hidden and all appear in the page. The anchors “href” is set to target the image, so when a certain anchor is clicked, the browser jumps to the appropriate image on the page.
Graceful degradation or progressive enhancement?
Jeff Vdovjak
That was a quality article. And a good kick in the pants. Often when I go about CSS, even though I’m conscious to make it accessible and test it in older browsers, I focus on CSS being design – and I focus on design and plug the content in after. But really, the content does need to be first. Adding CSS while focusing on the content is a subtle but important shift in thinking. Thanks for the thoughts…
Pavel Kuts
In the past i was styling my H’s nad A’s and P’s way before I put some content in the page. After that i started adding some content and then style it, then add some more content, and so on…
After I read your article it all clicked for me – I knew where I wanted to go with the development of my HTML pages.
Now I put in all of my content, then I apply styles to it. It was remarkable to notice how much LESS ie-workarounds I had to apply to my code by doing so. Sometimes I even don’t have to apply any. (those are the times when I’m grinning like a madman).
A great read! All three articles. Thank, you
Paul Novitski
“http://www.panic.com/coda/ — A great example of progressive enhancement.”
Yikes, I don’t think so:
<a href=”[removed]ScrollArrow(‘right’,‘toolbar’,‘scroller’,‘new-pane’);”>
It amazes me that folks still mark up their pages this way. No self-respecting GD/PE website would replace real hyperlinks with inline JavaScript in the markup. Instead, the HTML link should (re)load the page with the next chunk of content, and a linked JavaScript file would override that hyperlink with the ScrollArrow() behavior.
evanchaney
I believe in the idea of progressive enhancement and the reasoning behind it. I wonder your thoughts, Aaron, on how the idea can be applied, or if it does apply, to Web applications.
An argument can (and is being) made that applications need not be universally accessible; that an application, by nature of the behavior it has and the technologies it depends on, has minimum system requirements.
How do you view progressive enhancement as relates to applications for creating content, manipulating content or completing tasks that use Web technologies as the runtime environment inside a browser?
antandcharmi
I’m way late reading this and so my comment may be utterly redundant by now, but I think that the difference between Graceful Degradation and Progressive Enhancement is in the point-of-view of the designer.
PE is a forward-planning effort including older browsers’ needs from the start, while GD is backward-looking stop-gap approach. GD builds an ideal site, and only throws in rough and basic accessibility as a quick and lazy afterthought; whereas PE deliberately plans well-designed access to the content from the ground up, adding more beautiful interactions along the way.
So they both achieve the same goal, but PE does it better (though perhaps at greater cost).
However, I also see a danger with PE:
The web is much, much more than content nowadays. It is just as much market-related entertainment and interaction. Entertaining and easy-to-use web-sites will have readers who not only stick, but also spread the word all over the web, increasing the site’s ‘web share’.
But starting from content and older-generation accessibility concerns from the ground up can unwittingly blinker your artistic flair and result in your missing a much better interaction design possible in the latest generation of browsers.
To tell the truth I haven’t designed a web-site yet but I think my personal instinctive approach would be a 3-pass design phase – first the ideal, then the basic, and finally a re-working of the two to find the best combination:
1. To carefully AVOID thinking of older browser needs at first for the artistic creative phase. To focus on designing a rewarding and easy EXPERIENCE for the user whatever it might involve.
2. Then to do the same thing again for the oldest browsers, and see how much of their design can overlap with your ideal design.
3. Finally to marry the two and produce a child design, now from the PE point of view, perhaps sacrificing some aspects of your ideal design. Or even perhaps to divorce the two, if the ideal is worth the maintenance.
antandcharmi
As a PS to the above.
I misrepresented PE slightly above, in that as I understand it the aim is to forget the browser issues, and design the delivery of the content itself, THEN build that delivery for all levels of browser.
I guess I really am just qualifying PE by saying that we must design not only for content delivery but also for interaction and entertainment, and as a result, we are forced to consider browser capabilities from the start. And so, not to be unconsciously limited, we need to indulge in the luxury of the latest version of browsers before designing the delivery of content from the ground up.
Saç kaynak
“The Chocolatey Layers of Progressive Enhancement” i like that idea so much, really so clever :))
Ehecatl
I like thinking about Progressive Enhancement first, otherwise Graceful Degradation can end up like a zombie as this: http://ui-notes.com/progressive-enhance-vs-graceful-degradation/
lukehenry
Browser compatibility is very important part of website design. I face lots of errors when; I check my site in different browsers, Some websites works on Firefox but not in IE, Some website works in Chrome but not in IE and Firefox. Main reason of these errors is javascript element. Its can hurt your business customer, if your webpage is not browser compatibility.