ADAPTIVE WEB DESIGN

Crafting Rich Experiences with Progressive Enhancement

by Aaron Gustafson

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.

FURTHER READING

Content & Copywriting

The Elements of Content Strategy
by Erin Kissane, A Book Apart, 2011

Content Strategy for the Web
by Kristina Halvorson, New Riders, 2009

Writing Content that Works for a Living
by Erin Kissane, A List Apart

Reviving Anorexic Web Writing
by Amber Simmons, A List Apart

Better Writing Through Design
by Bronwyn Jones, A List Apart

Calling All Designers: Learn to Write!
by Derek Powazek, A List Apart

Attack of the Zombie Copy
by Erin Kissane, A List Apart

Markup

HTML5 for Web Designers
by Jeremy Keith, A Book Apart, 2010

Designing with Web Standards, 3rd Edition
by Jeffrey Zeldman and Ethan Marcotte, New Riders, 2009

Developing with Web Standards
by John Allsopp, New Riders, 2009

Microformats: Empowering Your Markup for Web 2.0
by John Allsopp, Friends of ED, 2007

Web Standards Solutions: The Markup and Style Handbook, Special Edition
by Dan Cederholm, Friends of ED, 2009

Where Our Standards Went Wrong
by Ethan Marcotte, A List Apart

How to Grok Web Standards
by Craig Cook, A List Apart

Using XHTML/CSS for an Effective SEO Campaign
by Brandon Olejniczak, A List Apart

CSS

CSS3 for Web Designers
by Dan Cederholm, A Book Apart, 2010

Handcrafted CSS: More Bulletproof Web Design
by Dan Cederholm and Ethan Marcotte, New Riders, 2009

CSS Mastery: Advanced Web Standards Solutions, Second Edition
by Simon Collison, Andy Budd, and Cameron Moll, Friends of ED, 2009

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)
by Dan Cederholm, New Riders, 2007

More Eric Meyer on CSS
by Eric Meyer, New Riders, 2004

Eric Meyer on CSS: Mastering the Language of Web Design
by Eric Meyer, New Riders, 2002

“Adaptive Layouts with Media Queries”
by Aaron Gustafson, .net Magazine, Issue 205

Responsive Web Design
by Ethan Marcotte, A List Apart

Accessible Data Visualization with Web Standards
by Wilson Miner, A List Apart

Big, Stark & Chunky
by Joe Clark, A List Apart

Elastic Design
by Patrick Griffiths, A List Apart

CSS Design: Going to Print
by Eric Meyer, A List Apart

JavaScript

Bulletproof Ajax
by Jeremy Keith, New Riders, 2007

DOM Scripting
by Jeremy Keith, Friends of ED, 2006

Test-Driven Progressive Enhancement
by Scott Jehl, A List Apart

Behavioral Separation
by Jeremy Keith, A List Apart

Improving Link Display for Print
by Aaron Gustafson, A List Apart

JavaScript Triggers
by Peter Paul Koch, A List Apart

Accessibility & ARIA

Designing with Progressive Enhancement: Building the Web that Works for Everyone
by Todd Parker, Scott Jehl, Maggie Costello Wachs, and Patty Toland, New Riders, 2010

Just Ask: Integrating Accessibility Throughout Design
by Shawn Lawton Henry, Lulu, 2007

Design Accessible Web Sites: 36 Keys to Creating Content for All Audiences and Platforms
by Jeremy Sydik, Pragmatic Bookshelf, 2007

Accessible Web 2.0 Applications with WAI-ARIA
by Martin Kliehm, A List Apart

HTML5 and the myth of WAI-ARIA redundance
by Steve Faulkner, The Paciello Group Blog

DHTML Style Guide
by AOL Developer Network

Making Compact Forms More Accessible
by Mike Brittain, A List Apart

High Accessibility Is Effective Search Engine Optimization
by Andy Hagans, A List Apart

What Is Web Accessibility?
by Trenton Moss, A List Apart