---
title: Progressive Enhancement
url: https://www.grahambrooks.com/post/2010-12-24-progressive-enhancement/
date: 2010-12-24T00:00:00+00:00
author: Graham Brooks
tags:
- Web
---

# Progressive Enhancement

[Progressive Enhancement](http://en.wikipedia.org/wiki/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](http://martinfowler.com/bliki/SegmentationByFreshness.html)

The term Segmentation by freshness was coined by
[Martin Fowler](http://martinfowler.com) 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).