The mechanics of progressive enhancement
The mechanics of progressive enhancement
Let’s take a look under the hood to see how to apply it and how much effort it really takes to build a progressively enhanced website.
To apply progressive enhancement, it is wise to separate your markup, presentation, and behavior as much as possible. (This is a good practice anyway, not just for applying progressive enhancement.) One of the best ways to achieve this is to use external assets only and link them in the header of your HTML file. You can use hooks like id and class attributes to reference the elements in your HTML page.
For CSS this means avoiding inline styles. A cool feature of CSS is that it will be ignored if not enough CSS support is available, so any CSS enhancement will be applied automatically where possible.
For JavaScript, the best way to separate markup and behavior is to avoid inline JavaScript and use unobtrusive scripting instead. Unobtrusive techniques usually first check if a browser is capable of supporting the script’s features before it is applied by either an onload or DOMContentLoaded event.
Note: Until DOMContentLoaded is fully supported across browsers, you can use the following cross-browser solution.
From strictly a web standards point of view, the ideal way to embed Flash content would be to use the Flash Satay method. This uses only the object tag, which contains a fallback method to display alternative content for browsers that do not support it. In theory, you could embed all your basic content within the object tag and the browser would do the filtering for you.
In reality, however, Flash Satay has a few major drawbacks, caused by incomplete browser support, browser bugs, and an unfortunate feature of Flash Player to attempt to play SWF content published for a higher plug-in version. The possible result is broken, duplicate, or no content.
JavaScript-based detection and embedding methods are a good alternative. Fortunately there are some great tools available on the market, like UFO, SWFObject, and the Flash Player Detection Kit.
Although all these methods enable you to use progressively enhanced Flash content, UFO and SWFObject are built with progressive enhancement in mind: They both replace basic HTML content with rich Flash content when enough Flash and JavaScript support is available. Utilizing the Flash Player Detection Kit for progressive enhancement requires taking a few additional steps because you have to define your basic HTML in JavaScript and then duplicate it and embed it in a noscript tag.
Example 1 (also available in the accompanying ZIP file) illustrates how UFO serves a Flash banner while using progressive enhancement. You can use Mozilla Firefox and the Web Developer Extension to test your enhancements. Using the extension, you can easily toggle support for the following:
- JavaScript (select Disable > Disable JavaScript and then reload your page)
- CSS (select CSS > Disable Styles > All Styles)
- Images (select Images > Replace Images with Alt Attributes)
Example 1 contains the following HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Serving a Flash banner using progressive enhancement
</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen"
href="styles.css" />
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"ufo_thebanner.swf", width:"728",
height:"90", majorversion:"6", build:"0", menu:"false" };
UFO.create(FO, "promotion");
</script>
</head>
<body>
<div id="promotion">
<a href="http://demo.refunk.com/adobe/devnet/
progressive_enhancement/example3/">
<img src="ufo_thebanner.jpg"
alt="I abducted UFO and lived to tell" /></a>
</div>
</body>
</html>
Styles.css contains the following CSS code:
a img {
border:none;
}
As you can see, the process of embedding Flash is extremely clean and simple. UFO automatically takes care of Flash Player detection and replaces the basic content with enhanced Flash content when enough browser technology support is available (see Figure 1).
Figure 1. Example 1 web page showing the Flash content
Visual browsers without the required Flash plug-in or JavaScript support will display a clickable image without the default link border (see Figure 2).
Figure 2. Example 1 web page showing alternative HTML content
Search engines will recognize the image’s descriptive “alternative” text and link. Text browsers and web robots will display a text link with the image’s alt text (see Figure 3).
Figure 3. Example 1 web page showing descriptive alt HTML content
Although this is a very basic example, it shows how easy it is to apply progressive enhancement. It doesn’t have to take much effort to create visible and accessible web content.
Comments