Graceful Degradation (GE) “degrades” a user’s experience. The less capable the browser or device, the worse the experience. The loss of presentational elements affects the availability of content and the functionality of the website. It is like falling down a staircase: it’s painful, confusing, and thoroughly unenjoyable.
Progressive Enhancement (PE), on the other hand, “enhances” a user’s experience. At its most basic level, a website’s function is to convey information – content. In order to make this content accessible to as many browsers, search engines, and circumstances as possible, PE places it in the basic HTML layer. After the HTML is complete, PE progressively adds presentational features, such as CSS or JavaScript, to the content. If a user has the capability, they can gain the full experience and presentation of the website; if they don’t, they can still interact with a functioning webpage and get the needed information. With PE, we are moving up that staircase: content is our floor and, depending on our leg functionality, we can move up to different levels of presentation.
Knowing the difference between these two techniques is even more valuable in the age of mobile devices. More often than not, your user will take in the majority of their content via their cellphone or tablet. Content and presentation need to be able to adapt to different sizes and work responsively.
Graceful Degradation builds a webpage for a desktop format. It then adds in mechanisms such as media queries to take away features and make the page fit smaller screens. This method is inefficient and can be labor-intensive.
Progressive Enhancement, on the other hand, starts by building a webpage in its mobile format. This prioritizes the most important content and features. PE then progressively adds in secondary features as the screen size increases and there is space to do so effectively.
Savvy IT 