April 27, 2014

Web Compatibility Using Graceful Degradation and Progressive Enhancement

When you look at the development cycle of a piece of software like a web application, compatibility is probably one of the least fun aspects of a project. With websites specifically, developers have a handful of browsers and rendering engines to test, each of which still supports an array of versions. This task can seem a little insipid at times, which is why many smaller sites undergo minimal testing.

Progressive enhancement and graceful degradation are the two different paradigms you can employ to ensure your web project looks (and works) great when rendered on any client with the least amount of superfluous testing possible. They’re both good models to adopt when working on your project and the one you pick will likely depend on the nature of the project and the way you approach the front-end development stylistically.


Graceful Degradation

graceful-degradation-iconGraceful degradation typically involves building your front end out to the point where it’s a finished product, then testing in other (sometimes less sophisticated) browsers and then building and testing “fall backs” for lower supported versions of those browsers. This allows a front-end developer to creatively design interfaces using the latest technologies, but also ensures that the site functions on older clients.


  • Easier to create a complicated or specialized user interface
  • Affords the developer the luxury of focusing on working on the site itself rather than constantly thinking about compatibility nuances
  • When done properly fall-back functionality is considered for every situation


  • Sometimes, developing a suitable fall-back may be a time consuming process, especially when a project uses technologies that were recently adopted by browsers
  • May result in (sometimes unnecessarily) bulky applications that are slower and less readable by crawlers
  • Can sometimes override the users’ preferences
  • Many developers simply tell users to update their browsers rather than developing fall-backs for the actual functionality. As a result, these users miss out on the experience unless and until they perform the update.


Progressive Enhancement

Progressive enhancement entails starting simple and building up. By not depending on any novel technologies and keeping essential functionality simple, one can swiftly ensure it’s compatible in various versions of all common browsers. More c0mplex features are then added, but they’re usually almost entirely visual and non-essential to the site’s purpose.


  • Less time is spent on compatibility testing
  • Maintains simple design and clean, easy-to-manipulate code
  • Content is highly accessible, both to users on any client and to important bots like search engine crawlers.


  • Some applications with complicated front-end interfaces simply can’t be built this way
  • Many aspects of the application may need to be made from scratch as involving 3rd party code can also mean involving code that depends on newer browser versions.

My choice on which to use depends on what it is I’m doing: if I’m building something without using very much 3rd party code and if much of the logic will be done server side, I can safely take the progressive enhancement route. If I’m building a unique and complex user experience, graceful degradation is the more prudent choice.

In those occasional instances where either options would seem to be equally advantageous, I think of the site’s future and purpose and use that as gauge. Progressive enhancement feels sort of Zen and fits well when I’m trying to keep the project succinct. Graceful degradation affords the ability to have a little fun and experiment with developing interesting elements.

Filed under:  User Experience Web Development  ||  Tagged under:

Orun Bhuiyan

As SEOcial's marketing technologist, Orun loves to discuss his hard-won knowledge on topics like SEO, programming and design. He's an enthusiast in emerging technologies, including big data and the semantic web.
Leave a comment
comments powered by Disqus

Base Terminology

SEO is the process of affecting the visibility of a website or a web page in a search engine's un-paid ("organic") search results.
The semantic web refers to the next stage of the world wide web and aims to ascribe semantic meaning to all web content through a collection of systems of classification. This means that, in the future, machines will be able to better understand the content we produce, resulting in better search results, new applications and an Internet that is fundamentally different from the one we use today!
What if each of the objects around you had a unique identifier that can be connected to the Internet? The goal of the Internet of things is to equip all objects in the world with tags that allow them to be digitally organized or manipulated. The implications? Less theft, less waste and the ability to control your surroundings in a manner never before possible.
Conversion optimization is the practice of modifying the parameters of a lead-generating system to stimulate a higher success rate as defined by goals. Most conversion optimization is structured to create an increase in ROI (return on investment). We frequently use multivariate and A/B split testing when optimizing conversion, wherein we test two or more systems at the same time, analyze their performance and deduce precisely what action items will bring us closest to the set goals in the least amount of time.
Market diagnostics or analytics is the process of collecting and analyzing business data — especially consumer data. This allows us to assess and improve the effectiveness of a marketing campaign.
In many applications today, there is such a phenomenal quantity of data available that it's difficult to collect and process with traditional database tools. The field of collecting, manipulating and drawing conclusions from massive quantities of data from a particular source is known as big data.
What started as a CMS (content management system) that was only meant to create and edit blog content has grown at a tremendous rate to become the most ubiquitous system for developing websites on the internet. WordPress accounts for an incredible 15% of all sites on the web.

RT @PicardTips: Picard engineering tip: Use the metric system.

7 months ago

RT @PicardTips: Picard management tip: Suppress your inner alarm. Be the calmest person in the room.

1 year ago

RT @dakami: i'm not saying everything you need to know about hacking, machine learning, and hacking machine learning is in this photo https…

2 years ago

Request Our Portfolio

  1. Which option best describes you? *

  2. Are you a key decision maker in the business you represent? *