TroyGrosfield.com TroyGrosfield.com

Headline

Progressive Enhancement for Web Design

Author
by Troy Grosfield
Date
October 26th, 2010
Category
Developer
Story

If you’re into web development you’ve likely come across the term progressive enhancement. But what does this really mean?

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

Wikipedia

It’s the font-end web architecture strategy with three levels of clear separation:

  1. HTML
  2. JavaScript
  3. CSS

HTML

Your HTML should be as simplified as possible. Don’t include JavaScript event attributes (more on this later), inline javascript, or inline css.  For example, don’t do:

<a href="http://example.com/some/url"
   onclick="javascript:alert('hello world'); return false;"
   style="color: red;">click here</a>

Adding the styles and JavaScript events directly in your HTML will bloat your HTML files and won’t make the files at clear and concise. Clear symmantic markup is probably the most important part of your front-end architecture.  Keep your markup simple:

<a href="http://example.com/some/url">click here</a>

Then after the page has rendered, add your JavaScript element event handlers, see JavaScript section below, and your CSS.

Javascript

Always start your development with the thought that your user won’t have JavaScript enabled. Finish the core functionality of your site first. JavaScript is a progressive enhancement feature that should be added in after the core functionality has been completed. Don’t include JavaScript in your markup, except for including the external scripts, and in almost all cases externalize your JavaScript. If you haven’t been introduced to jQuery yet I highly recommended looking into it! You should be adding you events once all DOM elements have loaded. This can be done by running your script inside of the following:

$(document).ready(function(){
    // your js here
});

To add event handlers through JavaScript using jQuery,you can do the following:

<a href="http://example.com/some/url">click here</a>

<script type="text/javascript">
    $(document).ready( function(){
        $('a').click(function(){
            alert('hello world');
            return false;
        });
    });
</script>

This will open an alert box that says “hello world” whenever a link is clicked on your page. These events will be added to your page elements after the DOM elements have been loaded and will only be added if JavaScript is enabled.

Always be sure to include your JavaScript at the bottom of your html, just above the closing <body> tag.

CSS

Start with barebones markup with no styling in mind. Get the core functionality of your site working as you want it and worry about the styling later.  Include your CSS files at the top of your HTML file between the <head> tags and do your best to style based off of a class name instead of an id.  Styling based off of a class promotes reuse.  Styling based off of an id does not since id’s must be unique on an html page. Don’t include your styles directly in your elements.  Example:

<a href="http://example.com/some/url1"
   style="color: red; font-weight: bold;">click here 1</a>
<a href="http://example.com/some/url2"
   style="color: red; font-weight: bold;">click here 2</a>

This is bad because if you ever want to go change these link styles every single one of them must be changed instead of just having to make the change in one place. Instead, style by class name:

<a href="http://example.com/some/url1" class="link">click here 1</a>
<a href="http://example.com/some/url2" class="link">click here 2</a>

Then, in your external stylesheet add:

.link {
    color: red;
    font-weight: bold;
}

This will make your code much cleaner and easier to maintain.  Note that styles will look different in different browsers and that’s ok. The important thing is your end user has a consistent experience with the browser of their choice. The browsers that support CSS3 will reap the benefits of having all the extra goodies that CSS3 contains like rounded corners, gradients, etc. Those that do not support CSS3 simply won’t display CSS3 features.

Conclusion

This will keep your HTML cleaner and make your code easier to maintain.  It gives you clear separation between you HTML, your CSS, and your JavaScript files and is a good practice to follow.

Tags
Comments
No Comments »

No Comments Yet

Leave a reply