- May 14, 2010
Progressive enhancement to the rescue
What we really wanted was a “magic bullet:” a single, manageable codebase that would work everywhere, created with the cleanest, most efficient and future-compatible development approach.
We believe we’ve found a near-perfect solution with progressive enhancement. First coined by Steven Champeon and Nick Finck at the March 2003 South by Southwest conference (“Inclusive Web Design for the Future” by Steven Champeon and Nick Finck, delivered 3/11/03 at SXSW, http://hesketh.com/publications/inclusive_web_design_ for_the_future), progressive enhancement is as much a mindset as a methodology. It focuses first and foremost on content and functionality. The goal is to build a perfectly functional and usable page that uses only the expressive potential of HTML semantics, creating a page that is accessible from the start and guaranteed to work on any web-enabled device—mobile phones, gaming systems, web-browsing refrigerators, and anything else you can think of.
We’ve been using progressive enhancement as a cornerstone of our development process for years, and have realized that it is a currently practical and future-compatible methodology for site development:
- It promotes coding clarity: thinking from the bottom up encourages cleaner and more modular code, where each functional component has a single purpose and can be reused throughout the interface in multiple contexts.
- It keeps things centralized and simple, allowing organizations to maintain a single, unified codebase that is compatible across all desktop, mobile, and video game devices.
- It positions sites for future compatibility: the simplest version that works today will continue to work tomorrow, and features included based on capabilities can be easily adapted without requiring major retrofit or removal of fussy hacks.
- It allows for a simpler interface with the back-end. We always use native, fully functional elements to serve as the single data connection to the server, and use scripting to create proxy connections to keep enhanced custom elements in sync with the basic elements.
In most cases, implementing progressive enhancement and delivering on the promise of universal access doesn’t take more work; it’s mostly a matter of unlearning some bad habits, looking at design and development from a different perspective, and ensuring that a lot of small things that need to be done right are done right.
The goal of this book is to help anyone develop a universally accessible site by applying simple, workable progressive enhancement techniques that have been tested in the real world.
After that, we’ll look at a dozen specific interface components or widgets and take you step by step through a process to show the specific markup, style, scripting, and enhanced accessibility features you’ll use when working with progressive enhancement. These examples individually provide specific how-tos, and collectively represent a set of principles and methods that can be extended to other coding situations to broadly apply progressive enhancement in any situation.
We’ve used these techniques on our own site and in a number of client engagements, and have found that our approach helps to make progressive enhancement practical and actionable. We hope that by the time you’ve finished this book, you’ll agree.