About this Book:

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.

Accessible charts and graphs

Generate dynamic data-driven charts from HTML tables using the HTML5 canvas API

example of graphs generated from an HTML table

Customized Native Form Controls

Layer enhancements on top of existing HTML components to execute complex designs without sacrificing accessibility.

example of custom select menu and styled radio and checkboxes

Non-native Form Controls

Create custom interactions such as sliders, star-ratings, and list builders that manipulate standard form controls behind the scenes.

example of a slider control, star ratings widget, and list builder

Application-style navigation components

Build highly interactive and accessible desktop-style components like tree controls, modal dialogs, and custom tooltips.

example of tree control and modal dialog widget

Table of Contents

  1. The case for designing with Progressive Enhancement (Chapter Available Online)
  2. Our Progressive Enhancement Approach
    1. Progressive enhancement in action: the x-ray perspective
    2. Writing meaningful markup
    3. Applying styles effectively (Chapter Available Online)
    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

Code Examples:

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

The book features EnhanceJS, a new JavaScript framework that tests browser capabilities in order to target enhancements effectively, and twelve full-featured, accessible, progressive-enhancement-powered widgets built using jQuery. Designing with Progressive Enhancement teaches you how to use EnhanceJS to apply enhancements only in browsers that are capable of rendering them properly.

This site runs on EnhanceJS as well!

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: Visit http://filamentgroup.com/dwpe/code/. The username is dwpe and the password is the first word of the first paragraph in chapter 15 of the book (case sensitive).

News & Reviews:

“An absolute must read for any web designer or developer who doesn’t already master the art of progressive enhancement. In fact, I think it’s a must read even if you think you know everything about progressive enhancement already.”

- Roger Johansson of 456 Berea Street Read full review on 456bereastreet.com

“I highly recommend this book to anyone, at any level of web design skills. … Using the book, I was able to quickly convert an ancient website into a beautiful jQuery-driven site, that thrilled my clients.”

- K. Penn via Amazon Read full review on Amazon.com

“Web accessibility without compromising on design. Filament Group does it best. Think I’ll be picking up a copy of this”

- Matt Brickner via Twitter View tweet on twitter.com

“Great purchase. If you’re interested at all in forward & compatibility of the sites you build this book is one you’ll need to learn.”

- P. Dunphy via Amazon Read full review on Amazon.com

“Awesome, I can already feel my code getting lighter.”

- skeey on Twitter View tweet on twitter.com