A Weblog entry posted on Monday, July 30 2007

Applying progressive enhancements to your website by Nate

What is progressive enhancement?

According to wikipedia, the definition of progressive enhancement is:

…a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies, in a layered fashion that allows everyone to access the basic content and functionality of a Web page, using any browser or Internet connection, while also enabling those with better bandwidth or more advanced browser software to experience an enhanced version of the page.

The key aspect here is that the core content is accessible to everyone. It allows you to add enhancements to a page while not requiring the end user to have specific technology enabled or plugins installed. Those who do have the technology and plugins will received the enhanced versions. Those without will still be able to retrieve the core content. It is a win/win situation. Lets take a look behind the scenes for a few examples.

A look under the hood: technologies involved

Let’s take a look at just a few of the terminologies that will be referred to throughout this article:

• HTML

  HyperText Markup Language is the core of how web pages are constructed. HTML is used to define structure and give semantic meaning to your content layer. It is important to understand the tags you have available to you and when and where they should be properly used. Even if you have already started with a design sketch or wireframe, be sure to separate the structural pieces you will be using and mark them up correctly in HTML.

• CSS

  Cascading Style Sheets comprise your presentational layer. This layer sits on top of your HTML layer and controls how the page looks. It controls everything related to positioning, color, and typography.

• JavaScript

  JavasScript is the topmost layer that comprises your behaviors. This layer sits on top of both your HTML and CSS and can manipulate the behavior of almost any aspect of your website. JavaScript gives you access to the DOM (Document Object Model) which allows you to move elements on a page, create new elements on a page, and apply different event behaviors such as click, scroll, hover, resize, and more.

• AJAX

  Asynchronous JavaScript and XML is actually a hybrid of JavaScript and other server side technologies such as JSON, XML, HTML, and PHP (or other scripting language of choice). AJAX allows you to fetch content from the server without requiring a page refresh.

How to get started

Every project is unique. It is important to plan from the beginning. Plan for your content. Plan for your design and layout. Plan for the advanced features that you would like to implement. Plan for the appropriate hooks you will need for styling and functionality. Planning is a key part to creating a site that is accessible to all and should be done before you start with any coding. Once you have a plan in place, the fun begins.

1. Get your content structured and in place. Here you are building the foundation for the rest of your website. Be sure to keep your HTML clean of any presentational tags or attributes. At this point, your site should be easy to navigate and move around. All links should work and point to a valid destination. The page, when read from top to bottom, should make perfect sense. Boring as it may seem, this is how search engine spiders and assistive devices will navigate your page so it is a very important step.

2. The foundation has been set, now it is time to apply some presentational enhancements to your page. You will apply all style enhancements via an external stylesheet that you will include in the head of your document. It will house all information related to your layout, typography, and color. For some examples of how this is achieved visit the CSS Zen Garden. This site allows developers to assign their own styles to a core HTML file. Notice that the HTML never changes, just the CSS layer on top.

3. Our foundation is set, and our styles are in place. Now it is time to add some advanced functionality. Using unobtrusive JavaScript and the DOM allow you to alter the page to suit your needs. This includes things like toggling display, animation, and building elements on the fly. You have great power with JavaScript. It is important not get too wrapped up in the technology and make sure that your uses of JavaScript are actually enhancing the user experience—not hindering it. JavaScript can be tricky, so it is important to understand the quirks associated with different browsers. For more information on the different quirks and their workarounds visit Peter-Paul Koch’s Quirksmode website.

Testing your site for progressive enhancement

There are several ways that you can test your website for progressive enhancement. It should be noted that this is there is no catch-all solution, and that one of the best ways to check is not by an automated checker - but by you, the developer. Here are a few things to check for:

• Check the accessibility reports. These reports will let you know if there are any issues in your structure, presentation, or behavior that would hinder someone from accessing the content at the core.
• Use a text-only browser such as Lynx. Checking your site in Lynx will give you an idea of how your content is accessed sans presentation and behavior. Are you able to browse the entire site? Do all links have valid destinations?
• If you develop with Firefox you can use the Web Developer toolbar by Chris Pederick. This toolbar will allow you to disable CSS and JavaScript and see how your site functions. Also, with the use of Firebug you can test to make sure your behaviors are working as intended (via the console).

The benefits of progressive enhancement

Building with progressive enhancement eliminates the need for a specific technology or plugin to view your content. It eliminates any possible barriers to your content. As web developers we cannot be guaranteed that our visitors will have a specific technology or plugin, or that they have the ability to enable or install them. Remember, your site can be accessed from an array of locations using an array of devices and it is important to make sure that the core content is readily available to your visitor, including our friendly search engine bots.

In closing I will leave you with a quote by Nate Koechley of Yahoo!

Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates a barrier to participation. Availability and accessibility of content should be our key priority.

Yahoo! Developer Graded Browser Support

Recommended resources and reading list

Many other people have written articles and books related to this subject. Here are a few books that I have found helpful:

• HTML Mastery by Paul Haine, Friends of Ed, 2006
• Transcending CSS by Andy Clarke, New Riders, 2006
• CSS Mastery by Andy Budd, Simon Collison, and Cameron Moll, Friends of Ed, 2006
• Bulletproof Web Design by Dan Cederholm, New Riders, 2007 (Second Edition)
• DOM Scripting by Jeremy Keith, Friends of Ed, 2005
• Bulletproof AJAX by Jeremy Keith, New Riders, 2007
• Simply JavaScript by Cameron Adams and Kevin Yank, Sitepoint, 2007
• PPK On JavaScript by Peter-Paul Koch, New Riders, 2006