When building a website, you have a few ways to go about doing it.

You can start by creating the most advanced version of the site with all of the scripts, styles, and so on, and then have it render in older browsers via graceful degradation, you may opt to ignore older browsers, or you can start with a basic page and add scripts and styles such that it becomes more functional via progressive enhancement.

In this series, we're going to take a look at the latter.

First, we're going to take a look at the theory behind progressive enhancement. But don't be intimidated - it's not rocket science. The rules you will have to follow are simple.

Why?

You may ask: Why should I bother with older browsers? At this point in time, most all major browsers automatically update.

First and foremost, unless you are creating a highly interactive web app, you must consider disabled users. They can use screen readers to access your site and these programs don't read styles or complicated interfaces simply because it would be too hard for the user to understand what is on the page.

Second, there are still people who disable JavaScript and/or CSS. There are many reasons for this - bandwidth caps, slow connections, and personal preferences. Some people also use text-based browsers, which can parse a limited amount of CSS, but ignore JavaScript.

Next, it will make your code more maintainable. You will likely have more semantic HTML. You will be able to revisit it in the future and easily understand what's happening with the markup, the styles, and the scripts.

Finally, it's important to remember that there are environments that do not allow users to install or upgrade any software, including the web browser (this is popular in large corporations).

And if you still aren't convinced, some countries have even legislated appropriate laws, forcing web developers to make their sites accessible to disabled users (for example, the UK).

Basic Principles

Now let's review the the basic rules of creating websites using progressive enhancement.

Basic Content Should Be Accessible to All Web Browsers

This seems pretty straightforward if you you understand the context in which the word "content" is being used.

Here, "content" is the information you want the user to receive in its most basic form - text. Headers, annotations, links, paragraphs and similar are okay, but images, music, animations are not the content we are talking about here (and they should be described properly using alt and title attributes).

Now a word about the "accessible" aspect: Not only should all web browsers be able to display your content, but they should to display it in a readable format. Thus, dumping all text into a single paragraph without formatting is a bad idea.

Basic Functionality Should Be Accessible to All Web Browsers

This means that if there is an anchor or a button on your page, the user should still be able to navigate the content. This is no matter if s/he is using the latest version of Chrome or an older version of Internet Explorer.

Semantic Markup Contains All Content

This point requires more planning especially when it comes to create elaborate designs. It forces you to put your content in basic HTML tags with as few of them as possible. This means that we can't nest a dozen of <div> elements within themselves to create some nice effect.

If you follow this rule, your HTML will be cleaner and easier to understand. The fireworks will reside in CSS.

Enhanced Layout Is Provided by Externally Linked CSS

First of all, forget about the style attribute in HTML tags. You will have to use classes, IDs, and other attributes and define their looks in your stylesheet.

The <style> tag is not an option either - the stylesheets have to be loaded using the <link> tags, so if a browser does not support CSS or it is disabled the files will not be downloaded.

Enhanced Behavior Is Provided by Unobtrusive, Externally Linked JavaScript

This is similar to the point above - no event handlers in HTML, no <script> tags within the content, and the page must work even if the file is not loaded. This means that you can't force users to rely on JavaScript to, for example, submit a form.

End-User Web Browser Preferences Are Respected

This is a little more complicated. You may ask yourself: What does a user's browser preferences have to do with my web page?

The first relation is the CSS. Basically, the layout should be responsive. All font sizes should be relative to user's default one (using em units instead of px).

Another is with regard to JavaScript: If the user has disabled it, don't force them to change this setting unless it's vital to the site's functionality. Do not show a big red box saying that the site will not work without JavaScript - instead, take the time to implement the functionality such that it works without JavaScript.

The Process of Design

Your design process may not change very much. You just have to remember the aforementioned rules and don't create any functionality that violates them.

If your design is following modern standards, you should be fine. The layout should be clean and simple. All of the effects should be purely cosmetic. All of the content should be placed in a way that will not make it unreadable or incomprehensible if the CSS and JavaScript are removed.

All HTML that is only for the effects should be removed and, if absolutely required, inserted with JavaScript on page load to avoid cluttering the page and using too much of the user's bandwidth (a JavaScript slider is a perfect example here - don't put its inner HTML directly in the page. It will create a big mess if there are no styles and scripts).

Testing For Progressive Enhancement

Testing requires a few more applications than just the major browsers.

Screen Readers

This will allow you to "see" your webpage as someone who has a vision impairment. There are plenty of them (the full list can be seen here). I recommend ChromeVox. It's Google Chrome extension and is very easy to use.

Text Browser

This is not completely necessary because you can remove all CSS and JavaScript from your web page, but if you're looking for a standalone application, then I recommend Lynx.

W3C Validator

Not everyone adheres to the HTML and CSS standards or evaluates their work against them, but using them will help track down problems with the HTML that may be invisible in a modern browser. This is important as some modern browsers do a decent job of trying to understand - and repair - broken HTML whenever it's rendered to the user. You can validate your code here.

Conclusion

This covers the basic theory of progressive enhancement. At this point, you should have everything that you need to know in order to begin building and testing pages using this strategy.

In the next article, we will put this theory to practice and create basic HTML layout for our page and style it with CSS.