Graceful Degradation and Progressive Enhancement.

A presentation on graceful degradation and progressive enhancement.

Accompanying slide notes. 

Slide 1: The start of the web:

In the early 1990’s the web was first linked to hypertext, a lot of other systems such as Usenet and electronic mail systems were already in use they were mostly text based systems and only requiring in small-scale design such as headings and paragraphs, layouts fonts and alike was usually out of the end users control so no design work had to be completed.

Slide 2: The first browsers:
Tim Berners-Lee develops a method of deploying information via hypertext and using a layout standard called html.
The first browsers WorldWideWeb and Mosaic, where designed to basically the same standards, mostly displaying linked text layouts were completed using stiles.
As it was mostly just text and pictures the websites of this time looked almost the same in most browsers.
In summary (Berners-Lee, 1999)
.

Side 3: The Next Generation a run for features:
Multiple browsers were developed at this point the most prominent of being Internet Explorer and Netscape navigator, however there were other such as the AOL browser.
In this generation of browsers there was a features race in a hope that developers would develop just for the venders’ specific browser.
However this tactic of essentially attempting to monopolise the browser markets with proprietary systems leads to the first major issues with cross browser compatibility.

Slide 3.1: Web Design Examples:
The internet had become “mainstream” and web design had become a legitimate method of individuals and organisations communicating with users and the world at large.

Slide 4: Graceful degradation:
The issues of cross browser compatibility, presented a challenge for the developers from this generation.
As the usability of websites across the various systems became more apparent the developers started to implement engineering design solutions one of which is Fault-tolerance or graceful degradation.

Slide 5 Graceful degradation definitions
Fault-tolerance or graceful degradation is a method of designing a system so that the systems faults don’t fully break the system.
They are still used for in some systems as:
•    Faster deployment and les design work is required
•    To patch an existing or deployed system.
•    Old systems as they may provide workarounds.
   
Slide 6 graceful degradation methods:
The main way of implementing graceful degradation is to pick specific browsers to develop for. This is usually the one that is in most common usage among the target audience of the web applications.
•    Providing an alternative system for the end users to use.
•    Locking out unsupported or untested browsers.

Slide 7: an example of graceful degradation:
JavaScript is usually the first browser issue use that developers come across. For example.

(Heilmann, 2009 )
The issue with “print this page” there is no way of linking to the print button in most html4 and lower. So JavaScript is used.
Slide 8: solution with graceful degradation:
However JavaScript isn’t supported in all browsers and can be turned off, the method of of graceful degradation used in this instance is the use of the sematic “no script” tag.



(Heilmann, 2009 )
This is considered degrading gracefully we explain to the user that something is wrong and how to work around the issue. (Heilmann, 2009 )



Slide 9: The benefits of graceful degradation:

Using graceful degradation and developers can build web applications in a what that don’t effect the user experience in a when that it doesn’t break the fucsoality of the web applications.
•    A standard user experience.
•    Add more features.
•    Used privately to patch a diploid system.

Slide 10: Progressive enhancement definitions:
Unlike graceful degradation we don’t add in the functionality then remove it, instead we start with a base line that will work no matter what browser is used then add additional functionality if the web browser can support it.
•    Separate HTML CSS and JavaScript
•    Sematic tags.

Slide 11: Progressive enhancement method:
Using the same example we can design the print this feature in a progressive enhancement method.

Please print this page for your records.

(Heilmann, 2009 )
This will work in all browses as it’s just a paragraph.
Slide 11: Adding additional functionality:
For the rest of the functionality we use unobtrusive JavaScript to add a print button only when the browser supports it:

.. Please print this page for your records.

(Heilmann, 2009 )
So we have added the function then enhanced its functionality. The script should also be in an external file shown inline for presentation.
Slide 12: Advantages of using progressive enhancement:
Using the progressive enhancement methodology, websites and web applications are:
•    By their nature more accessible.
•    Improved SEO as bête readability using semantics.
•    Maintenance
o    Readable code
o    Separate HTML CSS and JavaScript
Bibliography
Berners-Lee, T., 1999. Weaving the Web. In: The original design and ultimate destiny of the World Wide Web, by its inventor. s.l.:Orion business, now Texere.
Heilmann, C., 2009 . Graceful degradation versus progressive enhancement. [Online]
Available at: http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/
[Accessed 28 December 2011].