Progressive enhancement and Graceful degradation example, I don't get it

Question

I've read about these two different design approaches, I understand the theoric difference between Prog.Enhancement and Graceful Degradation, however I don't get the example you can read at this link: Progressive enhancement and Graceful degradation example

With G.D. he creates a link that through Javascript prints the page. With P.E. does the same, but he uses the "buttons" instead of "links".

This is the code used with P.E. process:

    <p id="printthis">Thank you for your order. Please print this page for your records.</p>
<script type="text/javascript">
(function(){
  if(document.getElementById){
    var pt = document.getElementById('printthis');
    if(pt && typeof window.print === 'function'){
      var but = document.createElement('input');
      but.setAttribute('type','button');
      but.setAttribute('value','Print this now');
      but.onclick = function(){
        window.print();
      };
      pt.appendChild(but);
    }
  }
})();
</script>

Couldn't he do the same thing keep using links? I mean the problem of Javascript support keep existing even in P.E. and is solved exactly like in G.D., telling the user to print the page by himself.

Thanks in advance

Answer 1

No. In this example, there is no link. Just a <p>. Putting in a normal <a> would mean that anyone with JS disabled and anyone whose browser can't do window.print() will see a link that doesn't do anything or go anywhere (and possibly might throw up an error box if the browser is old enough). The UI would be visibly broken. To enhance the page another way, the author could change the <p> to an <a>, but he chose to go with an <input type="button">. There are lots of options.

But the point of this example is to start with a UI that isn't broken in any way for anyone -- including users who have JS disabled and browsers that don't have required features -- and then build up. That's the point of PE. On the other hand, the GD way is to build the page for your main audience and find ways to hide the things that break, so lesser browsers still get something nice without seeing lots of broken things all over the place.

I know you didn't ask, but in my personal experience, the distinction between PE and GD is completely artificial and very 2009. A lot of this had to do with IE6 (a 2001 browser that would not die), but mobile gave it a new urgency.

Back then mobile was seen by many people as a separate system requiring special treatment, and so it was an important question: do you built for mobile and desktop and then add features for your core desktop audience? Or do you build the site for your core desktop audience and then trimmed back on the things that might break on mobile.

Answer 2

Progressive enhancement and graceful degradation can often seem similar because they are. All progressively enhanced designs will degrade gracefully, but not all gracefully degrading designs are progressively enhanced. It’s about perspective. Progressive enhancement, as Andrew says, is about starting from a universally usable core experience and enhancing that experience (with HTML, CSS, and JavaScript) as you are able. Different folks with different needs and capabilities will get different experiences—experiences that are usable and appropriate to them—and that's ok. Graceful degradation, in contrast, would allow you to block access to a site because the person isn’t using a browser you don’t want to test on because you aren’t throwing an error, you’re only blocking them from accessing the site (and likely recommending a different browser that you have tested).

Progressively enhanced sites create more opportunities for folks to use your products and read your content because the philosophy recognizes the inherent variability and fragility of the Web as a delivery mechanism. Designers/developers following a purely gracefully degrading approach may unintentially limit their audience and reduce the stability of their site because they don't consider that variability.

I've written at length about the is in my book Adaptive Web Design. The first edition is available for free online. The second edition came out at the end of 2015.