The importance of being separate

Posted Feb 27, 2007 in CSS, HTML, JavaScript, Markup, Web Design, XHTML.

The recent explosion in the use of AJAX (Asynchronous JavaScript and XML), particularly in the so-called Web 2.0 applications, has had both positive and negative aspects. Most server-side applications suffer from refresh-related delays that prevent the user from experiencing the fluidly-interactive environment they are used to when working with desktop computers. AJAX uses client-side scripting to restore much of that fluidity, and the user experience is greatly enhanced. Unfortunately, many implementations of these technologies have caused a significant backward step in the quest for accessibility and data reuse.

During the web standards revolution at the beginning of this century, one of the central philosophies was the separation of presentation and behavior from content. The essence and meaning of the data within a document were contained purely within that document's markup (XML, XHTML, HTML, etc.). Presentation (CSS) and behavior (JavaScript) were kept separate so that the data in the original document could be used in ways that the document's author may not have considered. The result was unparalleled accessibility. Documents could be accessed using many different user agents besides the web browser. Suddenly it became popular to use cellular phones for accessing web pages, and the visually-impaired web surfers found it easier to navigate the documents embracing this method.

Many implementations of AJAX break this system by embedding presentational and behavioral technologies directly into document markup. Sites that do this can only be used with user agents supporting (and running) JavaScript, effectively taking accessibility back to a level not seen since the late 1990s. An early example of this is Google Maps. It cannot run at all if JavaScript is disabled (or not present). The problem is partly addressed by producing specific versions for cellular phones and in-car navigation systems, but this is an example of the kind of code forking the standards revolution was trying to avoid.

To be successful and relatively future proof, AJAX implementations must try keep the various technologies separate. Books like Jeremy Keith's DOM Scripting and Bulletproof Ajax outline the principles of unobtrusive JavaScript very well, and Christian Heilmann neatly ties these together in the snappily-titled Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional.

AJAX is certainly a great addition to the web designer's arsenal, but only if implemented properly. If the AJAX code is embedded obtrusively into documents, the result will be the kind of mess often seen during the dark days of the DHTML explosion. That era of web design was so awful that it has prevented many of today's designers from embracing AJAX now. My message to web designers and developers is this: do not underestimate the importance of separation.


  1. Gravatar

    hang on, you're calling out Google Maps for using Javascript? Blind people aren't exactly Maps' target audience.

    Posted by testy user on Mar 03, 2007.

  2. Gravatar

    I didn't mention blind people in conjunction with Google Maps. I was referring to the fact that the default version of the application will only work in a normal web browser, and special versions for mobile devices (on which maps are especially useful) have to be created instead. Google Maps should have been created to work without JavaScript in the initial instance (relying on server-side scripting), and then fancy AJAX behaviors could have been added afterward to enhance the experience for users with traditional browsers.

    Posted by Simon Jessey on Mar 03, 2007.