Progressive Enhancement vs. Graceful Degredtion

When creating a webpage, the designer can approach it in many ways. The two most popular ways are through progressive enhancement and graceful degradation. Both of these approaches are influenced through web browsers and how they display information and the the design.
With so many web browsers out there, and so many versions of them it can become quite a task to make a page that looks good and functions well on them.
Some designers approach a project by making sure the website works on all the browers, using the more outdated browsers as guidelines. They do not focus on the design of the page, but more of the content of the page. This approach is called Progressive Enhancement. The benefits of this approach is that older browsers and cell phones benefit from it. It is also a faster and less expensive approach than graceful degradation.
When using progressive enhancement, you plan out the content, and then the presentation, and finally the scripting of the page.

Other web designers plan on a page by using the most recent browsers as guidelines for how to create a page. They focus more on the design of the page, wanting to be able to use the bells and whistles that are out there even though not everyone can see and benefit from them. This approach is called graceful degradation. When using this approach, the designer must decide which design elements are the most important. When they decide what elements they MUST have, they then have to code those elements for each browser. An example of this is if they wanted to create a box shadow.

“Let’s start with a box-shadow for Firefox, Chrome, Safari and Opera:
.button {
-webkit-box-shadow: 5px 5px 5px #777; /* for Chrome + Safari */
-moz-box-shadow: 5px 5px 5px #777; /* for Firefox */
box-shadow: 5px 5px 5px #777; /* for Opera 10.5, IE9
and future-proofing */
Now, let’s extend this with some CSS for IE specifically:
/* call this in IE only */
.button {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(
color=’#777777′, Direction=135, Strength=5);
}” (

Some elements such as rounded corners or gradient colors will not work on older browsers. The rounded colors will become square and the gradient colors will become flat.

I personally feel that Progressive Enhancement is the best approach. This is because it relies more on what the webpage is about. Why is this page online, what information is it trying to send out to the users? I do not think a box shadow will influence users whether or not to purchase an item or believe the information on the page is true. Some do believe that these elements are extremely important and stick to the idea of graceful degradation.
To each their own on how they create a site, I believe I will use progressive enhancement, but who knows I may change.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s