What is Progressive Enhancment and why it is so important.

April 27, 2015 12:55 pm

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.

 Progressive enhancement is simple in theory ; serve standards-compliant, HTML-only pages to increase the likelihood that any device will render the content in a usable way. Then, only for browsers that understand CSS and JavaScript, unobtrusively layer style and script enhancements onto the page.

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.

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.

Post a Comment

Your email address will not be published. Required fields are marked *