CHAPTER 6: TAKE IT AWAY

“If you want to build a ship, don’t drum up the men to gather wood, divide the work and give orders. Instead, teach them to yearn for the vast and endless sea.”

— Antoine de Saint-Exupery

In our brief time together, we’ve covered a lot of ground. We witnessed progressive enhancement in action, tracing the development of a simple text document into a beautiful, functional, and accessible web page. It was a whirlwind journey to be sure, but hopefully you are coming away from it with a better picture of what progressive enhancement is, why it works, and how to incorporate it into your design and development process. Perhaps you’ve even picked up a few useful techniques that you’ll be able to apply in your own projects.

To assist you in your efforts, I have compiled a progressive enhancement checklist that you can use (and share with your colleagues) to help ensure you’ve given proper consideration to the most important aspects of progressive enhancement. Assuming you don’t want to ruin this book by tearing out the page, you can download the checklist too.

Now get out there and make something great!

THE PROGRESSIVE ENHANCEMENT CHECKLIST

Content & HTML

Author copy that is well-written and makes sense when read aloud: This is the baseline experience for every user and it matters.

Choose semantically-appropriate elements: Using the existing semantics in HTML does wonders for accessibility (and search engine optimization).

Use Microformats to fortify HTML’s gaps: Microformats are extensions to the HTML lexicon and are supported by numerous browsers and several search engines.

Use classification to group elements serving the same function: Classification (i.e., using the class attribute) helps convey meaning about elements when HTML’s inherent semantics fail you and no microformats fit the bill.

Identify landmark elements: Identification (i.e., using the id attribute) is a great way to give context to specific regions of a page or specific instances of a classified element.

CSS

Double check your compound selectors: Mixing selectors of vastly different complexity can cause issues when a browser doesn’t understand one of them: the entire rule set will be ignored. If your intent is to hide the rule set from older browsers, however, this can be a useful tactic.

Organize your CSS rules with the cascade in mind: Order matters and proper organization of your style rules can help you create a progressive design and make your CSS more maintainable.

Hide groups of advanced CSS rule sets from older browsers: One of the most powerful tools available in CSS for hiding rule sets en masse is by using @media blocks.

Use Conditional Comments to handle IE issues: Older versions of IE are notoriously buggy and Conditional Comments are the best way to provide CSS and JavaScript patches to specific versions of IE. They work best in the “trickle-down” pattern.

Make sure you’ve accounted for alternate media and contexts: Media assignment and media queries can be used to deliver tailored layouts and experiences based on the user’s context.

JavaScript

Ensure all JavaScript is “unobtrusive”: Scripts should be maintained as far from the markup as possible and should be as generic as possible. This allows you to re-factor them independently. Your JavaScripts should not be tied to specific markup, but be flexible enough to adapt as your pages evolve.

Make sure all content is accessible and all necessary tasks can be completed without JavaScript turned on: You can’t rely on JavaScript. Period. If you want to enhance with JavaScript, follow the Hijax pattern.

Use JavaScript to generate any additional markup it needs: JavaScript is great at manipulating the DOM, so there’s no reason to hard-code markup into a page that is only there for your script’s benefit.

Use JavaScript to enable script-related styles: There are few things as annoying as content being organized into a widget and having the widget not work because JavaScript is turned off or there’s an error in the script. Use a switch to allow JavaScript to turn widget-related styles on.

Delivered scripts à la carte whenever possible: Any script that can run independently should be designed to do so, with its own set of tests to determine whether or not it can run.

Accessibility

Use ARIA landmarks where appropriate: If you’re using HTML5, some ARIA landmarks may seem redundant, but it’s better to have too cover your bases. It’s trivial to use them and they can greatly improve the accessibility of a page.

Use ARIA roles and states to provide users with more detail about widgets: When you create a widget using JavaScript, there are very few ways to provide users with valuable information about what is happening when they are interacting with it. Roles and states fill in the blanks.

Use tabindex to control a user’s journey through the page: Using the tabindex attribute, you carve a path through your page, bringing users to the important landmarks quickly and easily. Taking it a step further, JavaScript can be used to adjust what can and cannot be focused as a user interacts with various page components.

ADAPTIVE WEB DESIGN

Crafting Rich Experiences with Progressive Enhancement

CHAPTER 6: TAKE IT AWAY

THE PROGRESSIVE ENHANCEMENT CHECKLIST

Content & HTML

CSS

JavaScript

Accessibility

FURTHER READING

Content & Copywriting

Markup

CSS

JavaScript

Accessibility & ARIA