November 2006
JavaScript & progressive enhancement
Using CSS to style HTML pages allows us to separate structure (the content) from presentation. Separating structure from presentation reduces page loading times, improves search engine ranking and increases a websites' reach. It also ensures a website is more easily maintained and will ultimately save you time and money.
More recently emerging JavaScript techniques such as 'progressive enhancement', 'Unobtrusive JavaScript' and 'graceful degradation' have added a third layer, the behavioural layer.
The behavioural layer
The behavioral layer is created by placing all Javascript in an external file. The JavaScript is then applied using the DOM. Methods such as getElementsByTagName() allow us attach the JavaScript based on rules set in the external JavaScript file rather than entering JavaScript inline.
Advantages of creating a behavioral layer are as follows:
- The JavaScript is more maintainable
- Debugging is simpler
What is JavaScript?
JavaScript has been with us since December 1995 when it was first deployed by the Netscape browser version 2.0b3 (for those who like detail!). It's both a client-side and server-side scripting language.
JavaScript is more commonly and for the purposes of this article a client-side scripting language. It can be used to validate forms, open new browser windows and swap images amongst other things.
Old web technologies
Advert: User experience consultant job vacancy
Webcredible currently has a job vacancy for a user experience consultant!
We're looking for someone to work on a variety of challenging usability, IA & design projects for household name clients.
If this sounds interesting then read about our user experience consultant job vacancy and send over your CV!
Unfortunately web designers have had a tendency to misuse JavaScript. The additional functionality JavaScript affords developers has often led to websites becoming unusable. JavaScript functionality that could hinder the user experience includes:
- Pop-up windows
- Disabling the right mouse button
- Disabling the back button
- Scrolling special effects
This was also compounded by the fact that cross-browser support was unreliable at best.
JavaScript is now an established scripting language and browser support is relatively consistent. The hot topic at the moment is called progressive enhancement. This is the technique of using JavaScript to enhance the user experience.
What is progressive enhancement?
Progressively enhancing your site using JavaScript means you should:
- Ensure a site is functional even if users don't have JavaScript available
- Only use JavaScript to add new layers of enhanced functionality
Let's use a real world example to illustrate how JavaScript can be used to progressively enhance a site.
Using JavaScript to validate a feedback form.
Initially, as with all forms, validation rules must be applied server-side. If you rely on client-side validation and the client-side script is unavailable you may:
- Receive poorly formatted data
- Receive unusable data
- Be exposed to security breaches
The second step is where we use JavaScript to progressively enhance the form. The form will therefore be validated with client-side JavaScript. Validating the form client side intercepts the form submission client-side and stops users from having to wait for the page to reload if it's been filled out incorrectly.
Extra effort creating a JavaScript behavioral layer means the form can be made more usable. Intercepting the form before it is submitted means the user's experience is improved but without JavaScript available the form is still fully functional.
This article was written by Paul McCarthy. Paul's crazy about CSS and using JavaScript for good (not evil) - so crazy that he works for Webcredible, an industry-leading user experience consultancy, helping to make the Internet a better place for everyone. He loves spending his time working on the world's most accessible CMS and is very good at CSS training.
What next?
- Read more DOM scripting & JavaScript articles on this website
- Have us implement DOM scripting & accessible JavaScript on to your website
- Get a new website through our user-centered design and accessible web design expertise
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend one of our 6 interactive usability & accessibility training courses
Republish our DOM scripting & JavaScript articles
All our DOM scripting & JavaScript articles are available for republishing, provided the author bio and links in the bio remain intact. You can also use our RSS news feed to republish all of our usability articles.
Bookmark or recommend this article
Add this article to:
You can also tell a friend about this article right now!