Progressive Enhancement

One of the goals of this course is to create web pages using the technique of Progressive Enhancement.

Progressive enhancement is the process of enhancing the accessibility and usability of web pages by adding layers of presentation and behaviour but without relying on those layers.

For example, if you turn off javascript is the web page still accessible ?

As you browse the net you occasionally find web pages where a link has been disabled and replaced with a bit of javascript.

For example, a link that doesn't jump to directly to Google's home page but rather loads Google into a small popup window.

<a href='javascript:void(0);' 
   onclick="window.open('http://www.google.com', 'new',
   'width=600,height=450,left=50,top=90');">Google</a>

Google

All pretty cute, but what happens when javascript script is turned off?


Exercise

Use the webdeveloper toolbar in Firefox to turn off javascript and try clicking the link.
(Not using Firefox.... oh dear, perhaps you should be !)


As you see nothing happens, we have a broken link.

So, how can we keep the link but take advantage of javascript if it is available ?.
In other words how can we 'Progressively Enhance' the user experience.

Here's a solution

<a href='http://www.google.com'
   onclick="window.open('http://www.google.com', 'new',
   'width=600,height=450,left=50,top=90');return false;">Google</a>

Google

We swap link's href='javascript:void(0);' for the original link href='http://google.com' so clicking on the link will still work if javascript is disabled.
The page will just load in the existing window instead of in our javascript customised window.

If javascript is enabled it will load Google in our customised window as we wanted but the href='http://www.google.com/' section will also load Google in the old window. Not good.

We can stop that by adding return false; to the end of the onclick event. return false; stops the browser from executing the href section and loading the webpage.

There we have it, if javascript is turned off the user can still navigate buts gets a nicer experience if javascript is turned on.

This is the art of Progressive Enhancement.


Exercise

1 Find a webpage that breaks with javascript turned off and see if you can correct it.