- The ever-widening world of the web
- The landmines of Web 2.0
- Progressive enhancement to the rescue
This chapter is from the book
This chapter is from the book
This chapter is from the book
Progressive enhancement to the rescue
When faced with the incredible range of different users and devices we needed to support on our day-to-day projects, we began to wonder how to provide a site or application that would work for everyone, feature the most advanced interface elements for those who were capable, and still be manageable to develop and test for real-world client projects. We needed a pragmatic approach that provides a solid, usable baseline experience for any device, and reserves the richly designed features that require the tight coordination of JavaScript, CSS, and plugins for a subset of popular, modern desktop and mobile visitors.
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.
Only after the HTML markup is as descriptive and clear as possible do we develop CSS and JavaScript—both written to external files and then unobtrusively applied to the HTML markup to transform it into a rich, interactive experience. We avoid inline styles or event handlers whenever possible. The key to progressive enhancement starts with the careful separation of content (HTML), presentation and styles (CSS), and behavior (JavaScript), which allows us to deliver a workable and appropriate experience for each browser.
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 allows for “universal access,” not only by providing wide accessibility for screen readers and other assistive technologies, but also for users with JavaScript or CSS disabled or for outdated and less capable browsers.
- 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.
- It allows for a single, common codebase across experiences. Each site we develop can use the same HTML page for both the basic and enhanced experiences because the only difference is how CSS and JavaScript are layered on top of this foundation markup.
Over the past few years, progressive enhancement has been quietly adopted by some of the biggest and best sites on the web, precisely because it allows them to reach the widest possible audience. Browse Google, Facebook, Amazon, or Digg with JavaScript and/or CSS turned off, and you’ll see that the sites will work surprisingly well. Each site may approach progressive enhancement a bit differently, but each achieves the same goal of delivering a usable experience to anyone who visits.
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.
In the first section, we’ll review our approach to implementing progressive enhancement, including a different way of thinking about planning designs, and our unique methodology for testing the capabilities of each browser before applying enhancements. Then we’ll review the HTML, CSS, and JavaScript best practices that will arm you with all the tools you’ll need to build sites a new and better way.
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.