Progressive Enhancement Checklist

What follows is a distillation of key concepts from this book. My hope is that you will find it a useful reference in your work.

You can also download this checklist in PDF form at adaptivewebdesign.info/2nd-edition/checklist.pdf.

People have to read what you write. Write for them like you’d talk to them. Your content should have a voice and a personality.

Design Meaningful Content

Think about the content you need and what you want it to do early in the process. Content is the foundation of every experience.

Craft the Conversation

Your website is a conversation with your customers. Think about the conversation you want to have with them. Evaluate each content, design, and interaction decision to ensure it supports that conversation.

Plan for the Unknown

“Final content” rarely exists. Focus on content structure, and don’t be afraid to temporarily borrow copy from competitors while designing your content structure and hierarchy.

Write for Real People

Make sure your copy is written with your users in mind. It should be clear and take into consideration factors such as domain knowledge, level of education, and how your users speak to each other.

Consider Content Beyond Copy

Carefully consider other content types such as images, video, and PDFs. Do they enhance the experience? Could the information they contain be expressed in text or in a less bandwidth-intensive way?

Keep Data Entry Conversational

Pay attention to field labels, button text, and error messages and look for ways to make them more human.

Don’t Fill Space

Resist the urge to fill every inch with related content, teasers, and more stuff. Evaluate “extra” content to ensure it supports the conversation you’re having with your users.

Read up on the history of web design and learn from the mistakes we’ve made so you can avoid making similar mistakes in the future.

Illuminate Your Content

Use basic HTML semantics to give greater meaning to your content.

Mean What You Say

If an HTML element already exists that does what you need it to do, use it.

Embrace Classification and Identification

Use class and id attributes to enhance and organize your web pages. Add microformats, microdata, and RDFa to empower your content to go beyond the browser.

Make Deliberate Markup Choices

Understand the document outline, pay attention to source order, and avoid authoring unnecessary markup. Embracing these three practices will make your website more usable and accessible.

Clarify Interfaces with ARIA

Use ARIA roles to inform assistive technology about the part an element is playing in your interface. But don’t use an ARIA role when there’s an HTML element that serves the same purpose.

Understand Fault Tolerance

Become familiar with how to author markup-based fallbacks and use fault-tolerant patterns to deliver natively adaptive interfaces.

Break down your interface into discrete, reusable patterns to achieve greater design consistency. Iterate on your patterns to improve adaptability, usability, and accessibility.

Don’t Design Yourself Into a Corner

Consider variable headline and body-copy lengths, image dimensions, and aspect ratios to create more flexible designs.

Understand How CSS Works

Study up on proximity, specificity, the cascade, and parsing errors to deliver different experiences to browsers with different capabilities.

Start Small and Be Responsive

Design your patterns “mobile first” following responsive web design best practices. But don’t forget that older browsers don’t understand media queries (and you can use that to your advantage).

Focus on Standards

Pay attention to vendor-prefixed properties and use them conservatively. If you use them, track the developing standard and update your style sheets as the spec changes. Remove the vendor-prefixed versions when the standard is well-supported.

Design Defensively

Provide fallbacks for new CSS properties and values. Use @supports to selectively deliver collections of style rules that depend on the availability of a new CSS feature.

Hide Content Responsibly

Pay attention to how you hide content in your CSS and in the JavaScript libraries you use. Some methods of hiding content introduce accessibility issues.

Consider the Experience with Alternate Media and Inputs

Consider how your website will render in print or on large screens. Think about how the design might need to adapt for users who don’t use a mouse.

Embrace Default Styles

Exercise caution when it comes to redesigning form and other native interaction controls. Redesigning native controls can require a lot of development time (and money) and may result in a less usable experience for your customers in the end.

Get to know the medium of the Web. Understand what you can control (and, more importantly, what you can’t).

Design a Baseline

Create an experience that works without JavaScript so your users will be able to do everything they need to do, even if something goes wrong.

Program Defensively

Use feature, object, and element detection to make your code more robust and minimize potential code-induced failures.

Establish Minimum Requirements for Enhancement

Consider using feature detection as a litmus test for whether you want to provide a JavaScript-enhanced experience.

Cut Your Losses

Consider delivering the “no JavaScript” experience to older, less-capable browsers to reduce development time and headaches.

Build What You Need

Use JavaScript to generate any markup needed for JavaScript-driven interfaces.

Describe What’s Going On

Use ARIA properties and states to describe complex JavaScript-driven interfaces.

Write Code That Takes Declarative Instruction

Author JavaScript programs that take instruction from declarative markup to create more flexible scripts that are easier to update.

Adapt the Interface

Pay attention to changes in the browser such as screen resizing, and adjust your interfaces in real time to provide the most appropriate experience.

Apply No Styles Before Their Time

Have a baseline set of styles for an interface without JavaScript and then turn on the JavaScript-dependent styles when you know JavaScript is available and your widget can be used.

Enhance on Demand

Look for opportunities to “lazy load” nice-to-have content (e.g., related items, comments) when users request it or only after all critical content has been downloaded.

Look Beyond the Mouse

Ensure your interfaces support a variety of input methods such as touch and keyboard, or combinations of these, at the same time.

Don’t Depend on the Network

Look for opportunities to move critical features offline to account for network loss.