The History of the Web

Almost as soon as there were computers, they began to fail unexpectedly. And so early machinists and computer scientists turned to fail safes early on to account for these circumstances, and to keep systems and software operational even when one component failed. To gracefully degrade, and tolerate faults.

The Internet was built like this, given that it was created with at least the vague possibility of surviving a nuclear war. It was designed to send packets of data at a time, instead of entire signals, so that partial messages could still be received and unpacked.

This kind of systems design is known as graceful degradation, and it was also applied to the technologies of the web. HTTP, HTML, and later CSS, were designed to continue rendering, even with errors, connection issues, invalid content, or any number of possible failures.

Towards Progressive Enhancement

As designers and developers began building on the web, they brought the spirit of graceful degradation with them. Browsers were advancing at a rapid clip, and early web designers wanted to make use of that; give their visitors something that felt modern and sleek. But there was a wide gap between what each browser could do. To try and account for that, web designers turned to graceful degradation, creating a baseline experience for modern browsers, that still attempted to render at least something when those web technologies weren’t available on older or different browsers.

But in this case, it had an opposite effect. Pages might show up regardless of browsers (after all, the web was built to fail gracefully too), but much of its content and functionality would be tucked away behind modern features. And so some pages began to be unusable in all but the latest available browsers.

In 2003, with the problem growing each year, Steven Champeon and Nick Finck took the stage at South by Southwest to propose an alternative in a talk named “Inclusive Web Design for the Future.” They began their presentation with a proposition for web developers around the world: “Leave no one behind.”

Graceful degradation, in their view, had outlived its utility for websites. Instead of a system of fail safes, it had become a crutch, or at its worst, an afterthought. The most modern, cutting edge technology was now a default, and graceful degradation was brought in at the end to try and paper over what older browsers would render. Most of the time, this didn’t work.

It is a failure of web design, described Champeon and Finck, to abandon that experience at the point of connection simply because somebody doesn’t have the latest browser. They had a different idea. It was called progressive enhancement.

Progressive enhancement flips things around. It begins with a core experience that conveys the information needed for a web page, and then layers on additional enhancements one by one meant for users with high powered devices, or more modern browsers, or stable internet connections. But none of these enhancements are required to understand the meaning of the page. And the additional layers, which at the time included CSS and then, JavaScript, were kept separate from that core experience, and only delivered to web users capable of using them.

Champeon and Finck peppered in a number of practical strategies to their presentation. Through a combination of fallbacks, separation of concerns and a little bit of planning, they set forth an achievable roadmap for developers. It had been something that they had both spent many years considering.

Steven Champeon: Designing an Inclusive Web

In the earliest days of the web, Champeon was a regular presence on popular mailing lists, answering questions about web technologies he had learned from his own experiments. Not long after he started his own list, web design-L, where he continued his journey helping budding web developers build a more universal web.

Champeon recognized the web as something fundamentally different from its graphic design predecessors and he worked to help others realize the power of web-based markup. He advocated for a separation of concerns—keeping that markup (HTML) separate from a pages styling (CSS) and behaviors (JavaScript)—which would later become a core tenet of progressive enhancement. One of his earlier public experiments demonstrated how you could style a webpage much differently using CSS, without changing the HTML at all, something like what CSS Zen Garden would eventually become.

The web’s limitations, according to Champeon, were a symptom of its universality. In order to deliver the web to everyone, it had to perform in uncertain contexts and without always knowing the visitors location, connection, device, or circumstance. So the constraints put on designers were meant to guide their decision making, not be walked around, as he once said in an interview.

One definition of design is that it isn’t possible without a set of constraints, that it is the relationship between the constraints and the solution that makes design possible… . Real creativity involves dealing with problems all the way through, and on the Web, that means thinking about markup, about document semantics, multiple presentation paths, accessibility, and behavior

In the late 1990’s, Champeon began working with Jeffrey Zeldman, Glenn Davis, and other web standard stalwart to push the at-war browsers Netscape and Microsoft to comply with web standards. He co-founded the Web Standards Project (WaSP)—and later ran it—to formalize those efforts. It was during this time advocating for web standards and educating others on his important that the pieces of progressive enhancement came together.

Nick Fick: Understanding through education

Nick Finck also came to the web with an eye towards education. Back in 1998, with the web still in its infancy, he created one of the first web-based magazines, Digital Web Magazine. His goal was to connect people with the web, and its possibilities. Later he would work alongside Champeon at WaSP helping to educate others on the importance of standards-driven designs.

In 2001, Finck wrote “Building with Rusted Nails,” which reads as both guidebook and manifesto, and grounds a lot of his thinking about the web. He described the challenge for every web team, to build a site that is informed by design principles, easy to use, clear and understandable, and universally accessible.

This was only possible when the entire team understood the context of the web, and the variety of ways in which it was consumed. “Every web site must be built upon a core understanding of the medium,” Finck wrote, “its benefits, and its limitations.” Years later, understanding would later be the foundation upon which progressive enhancement was built.

Spreading out progressive enhancement

As WaSP gained momentum among browser makers and the larger web community, progressive enhancement became a central component of their education. People learned how to start with an experience that could be viewed by comfortably by everyone, and then layer other elements on top of that.

Through these efforts, more people began to understand how to apply progressive enchancement. For a while at least, it became somewhat the default for building on the web, supplanting graceful degradation as a dominant approach.

Over time, the strategies that Champeon and Finck outlined were adapted each time new technologies were introduced to the community. And every time approaches or best practices drift away, there are those that remember enough to guide us back. It is an idea that has been lasting and enduring for two decades, and will continue.