5 Benefits of Progressive Enhancement

The unstated expectation many clients have about a website is that it will look pretty much the same, no matter where they see it. Whether it's in the latest version of Firefox or an old version of Internet Explorer, the site should look and work exactly the same. Unfortunately, this often unquestioned assumption has been holding back the advancement of web design for years, as developers strive for what we have called "pixel perfection" among browsers with very different capabilities.

A new philosophy in web design circles proposes to change that. Progressive Enhancement means that web designs do not have to look exactly the same on every browser and every version, but should take full advantage of each browser’s capabilities to deliver the best possible experience. As a corollary, though, Progressive Enhancement also states the website's basic content and functionality should be available, regardless of the browser version.

Progressive Enhancement is primarily based on the best use practices of CSS3 and HTML5, the two most important web standards. CSS3 and HTML5 are the next generation of standards we’ll be using to create web pages, and they are quickly taking over as the way to get the best results out of the web. In fact, it’s becoming increasingly common to hear, “I want an HTML5 website,” instead of “I want a Web 2.0 website.” Using the term “HTML5” has evolved from meaning just the web standards technology to indicating that you want cutting-edge web design and functionality.

However, many web designers and developers are reluctant to start using HTML5 and new CSS3 styles because they worry that they don’t work on all browsers equally. While this is true, that shouldn’t keep you from using them as a part of your design, as long as you take a few simple precautions to ensure that your website’s essential capabilities come across in each browser:

• Basic content should be accessible to all browsers, even if it does not appear in exactly the same format.
• Basic functionality should be accessible to all browsers but may perform and act differently.
• Enhanced layout is provided by externally linked CSS, separating content from styles.
• End-user browser preferences are respected, to ensure accessibility needs are met for all visitors.

So what are the benefits of Progressive Enhancement, and why should you use it to create your websites?

1. Faster to develop. Using more code and less graphics allows developers to develop sites more quickly and accurately. It's much easier to make changes to the design, allowing the design team to go to a prototype faster and test out design ideas. The savings in time can be as much as several days or even weeks, since we don’t spend time adjusting designs for every browser possibility.

2. Cheaper to maintain and modify. Developers can make small and large changes to the website design without the designer having to create many new graphics. It also takes much less time to make even major design changes in the code, rather than re-cutting images.

3. Better design and branding. PE adds new visual design capabilities that are native to the web, such as multiple drop-shadows and glows. It also improves interaction design using the new styles and transitions to provide better user interface feedback.

4. Improved search. Using properly constructed HTML5, called semantic HTML, will greatly increase the searchability of your web pages, increasing their rank on Google.

5. Reactive design. Another new trend in web design is creating websites that "react" and optimize to the environment in which they are displayed. The same web pages can be displayed in a wider variety of devices, including tablets and smart phones, with minimal additional effort to change any of the content.