Progressive Enhancement is a web development technique or pattern. The basic premise is that a web site should be accessible to all users and then to overlay additional functionality based on the client’s capability.
Web technologies and good web development practices over the last few years had encouraged this approach. Popular web sites delivery semantic HTML to allow screen readers and other client devices to understand the content of being delivered. Advances in both browser capabilities and CSS have encouraged this and the use of inline styles has reduced over time. The advent of JavaScript libraries that hide browser compatibility problems have made the development of progressively enhanced content easier to achieve.
Progressive enhancement can be used in a number of ways. Here are a few examples:
- Segmentation by freshness
- Included function
Segmentation by Freshness
The term Segmentation by freshness was coined by Martin Fowler to describe how progressive enhancement can be used to partition content by how fresh or how frequently it is updated.
Included Function
Many web sites tailor their functionality based on how well you are known to the site. An anonymous user can perhaps browse content but not contribute to the site. To contribute content you need to log in perhaps using a username and password.</p>
To provide this feature pages might include a link to the login form
<a href='login'>Login</a>. In the basic implementation this is a
complete in terms of functionality. The user clicks on the link, is
presented with the login form, which they fill in and submit. If the
credentials are correct they are redirected back to the page
containing the link - but are now authenticated and have access to
additional features.
Although functional just providing a link to login seems a little light. Most web sites designers would prefer to include the login feature directly in the page and not require users to navigate to another page.
Including the login form in every page is both time consuming and leads to maintainance problems later when perhaps an additional ‘remember me’ feature is required. One option is to do some sort of server side include where the contents of the form is included by a server side statement and the page is aggregated before the content is returned to the client.
An alternative approach is to use JavaScript in the client browser that replaces the link to the login page with the contents of the page returned by the link’s href attribute.
So far these two approaches appear the same, but what if the request for the login form checks to see if the user is already authenticated? In this case the request might return a different result ‘Welcome back Graham’ or some other message. For the server-side include this would mean that the page contents depends on the user requesting the page and is therefore not cacheable. For the JavaScript version the main page is cacheable and only the small login form or message is specific to the users requesting the content.
On the server side things are simpler too. All included content is delivered as web content over HTTP. For each piece of included content an additional request is required but this request does not slow down the rendering of the main page because it is loaded later (although the delay may be imperceptible to the user).