Designing with Progressive Enhancement Building the Web that Works for Everyone

Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience — whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screen-reader, their experience should be as fully featured and functional as possible.

Designing with Progressive Enhancement is a practical guide that both explains the principles and benefits of progressive enhancement, and explores detailed examples to teach you how, where, and when to implement specific coding and scripting approaches that embody broadly accessible development practices.

In this book, you'll learn:

• Why common coding approaches leave users behind, and how progressive enhancement is a more inclusive and accessible alternative
• How to analyze complex interface designs, see the underlying experience that will work everywhere, and add enhancements safely
• A unique browser capabilities testing suite that helps deliver enhancements only to devices that can handle them
• Real-world best practices for coding HTML, CSS, and JavaScript to work with progressive enhancement, and cases where forward-looking HTML5 and CSS3 techniques can be applied effectively today
• How to factor in accessibility features like WAI-ARIA and keyboard support to ensure universal access
• Detailed techniques to transform semantic HTML into interactive components like sliders, tabs, tree controls, and charts, along with downloadable jQuery-based widgets to apply directly in your projects

With this book, you'll get:

Designing with Progressive Enhancement includes a comprehensive overview of progressive enhancement techniques and best practices, and detailed step-by-step instruction for twelve rich internet widgets with downloadable project-ready HTML, CSS and jQuery scripts.

Each widget starts with semantic HTML that will work on any device. We then transform that native basic markup into a complex component, include full keyboard support to replicate the native element behaviors users expect, and add ARIA attributes for screen readers (guided by co-editor of the W3C ARIA spec, James Craig). All widget code examples and project-ready jQuery scripts are available as a free download with book purchase.

Table of Contents

1. The case for designing with Progressive Enhancement
2. Our Progressive Enhancement Approach
   1. Progressive enhancement in action: the x-ray perspective
   2. Writing meaningful markup
   3. Applying styles effectively
   4. Scripting Enhancements and Interactivity
   5. Testing Browser Capabilities
3. Building Widgets with Progressive Enhancement
   1. Collapsible Content
   2. Tabs (with back button support)
   3. Tooltips
   4. Tree
   5. Charts
   6. Dialogs and Overlays
   7. Buttons
   8. Checkboxes, radio buttons, and ratings
   9. Slider
   10. Custom select
   11. Tag list builder
   12. Custom File Input
4. Looking Ahead

Designing with Progressive Enhancement shows how to build complex user interfaces that are accessible, and work on the widest variety of browsers.

Code included with the book

Downloadable code examples for the following widgets will be available free to those who purchase Designing with Progressive Enhancement.

To access the code examples: Flip to page 92 of the book and visit http://filamentgroup.com/dwpe/code/. The username is the 8th word on the page and the password is the 10th word on the page.

We'll post updates here once the book is released. Check back soon.

For frequent updates, be sure to follow Filament Group on