JavaScript Progressive Enhancement in Practice
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
With the introduction of new frameworks (such as AJAX) and paradigms (such as Web 2.0), it’s very easy to lose your perspective and focus on implementing the best-looking web site that modern technologies can support. Such web sites are quite often full of inline JavaScript code, event handlers, and dynamic content fetched from the web server as needed or requested. While this approach might mesmerize your visitors, you’re usually losing the most important mechanism driving visitors to your web site: the search engines.
Two categories of web visitors are penalized by JavaScript-focused web page design: users who have disabled JavaScript in their browsers (or use browsers that do not support JavaScript, like older versions of the Internet Explorer on Windows CE platforms) and search engines that simply ignore embedded JavaScript or JavaScript-based links (for example, the links using javascript: pseudo-protocol). While you might decide to ignore the former group in certain environments, you simply cannot ignore the latter.
The importance of being accommodating to all your visitors, as well as to search engines, has led to the concept of graceful degradation—your web site should give useful information to the visitors even when they don’t have JavaScript support. As most developers start thinking about graceful degradation after the production site has shown significant drawbacks (you can find a good case study in my article "Make Pop-Up Windows Visible to Search Engines"), it’s way better to change your design process and focus on content, which is later augmented with formatting (using CSS) and dynamic effects (using JavaScript)—the path of progressive enhancement. The core principles of progressive enhancement include the following:
- All basic content and functionality should be accessible to all visitors, regardless of the browser they are using.
- All content should be contained in sparse, semantic markup.
- Enhanced formatting and layout is provided by externally linked Cascaded Style Sheets (CSS).
- Enhanced behavior and dynamic content is provided by externally linked JavaScript libraries.
In this article, we’ll focus on the JavaScript part of the concept, illustrating how you can use JavaScript to transform a classic Frequently Asked Questions page in a dynamic format while still retaining clean content and markup accessible to all visitors of your web site.
Content and Markup
The principle of keeping content in sparse semantic markup dictates the overall structure of our FAQ page. It will be divided into two parts: the top part representing the table of contents (TOC) with links to major categories (contained in <DIV id="toc">), and the bottom part containing all question-and-answer pairs for all categories (contained in <DIV id="faq">).
The TOC section will contain only a bulleted list of links pointing to major categories:
<div id="toc"> <p>... intro text ...</p> <ul> <li><a href="#html"><acronym title="Hypertext Markup Language">HTML</acronym></a></li> <li><a href="#css"><acronym title="Cascading Style Sheets">CSS</acronym></a></li> <li><a href="#dom"><acronym title="Document Object Model">DOM</acronym></a></li> </ul> </div>
The actual questions-and-answers section will be more structured:
- Each major category will have to be placed into its own DIV with an id attribute serving as a link anchor, thus avoiding the semantically unneeded <a name="anchor"> element.
- A major category will contain only a heading (H2) and a definition list (DL).
- All questions and answers will be written as a series of definition terms (questions, DT elements) followed by definition descriptions (answers, DD elements). Semantically, this makes more sense than writing questions and answers as regular paragraphs with distinctive CSS class names.
A sample category illustrating how you can nest quotes and paragraphs inside DD elements is shown in the following listing:
<div class="category" id="html"> <h2><acronym title="Hypertext Markup Language">HTML</acronym></h2> <dl> <dt>What is HTML?</dt> <dd><blockquote cite="http://www.w3.org/html/" title="W3C HTML home page"> <p>HTML is the publishing language of the World Wide Web.</p></blockquote></dd> <dt>What is XHTML?</dt> <dd>XHTML is reformulation of HTML as an XML application.</dd> <dt>How can I validate my HTML code?</dt> <dd>W3C offers free <a href="http://validator.w3.org/">HTML validator</a></dd> </dl> </div>
You can view a longer FAQ page here (you can also view its HTML source). Because it uses semantic markup, you can still understand the content even without CSS formatting.
The next phase in the progressive enhancement of our FAQ page is the addition of dynamic content based on JavaScript. We’ll do the enhancement in three phases:
- We’ll change the bulleted list in the TOC into a multilevel list that will be built dynamically based on the values of the DT elements.
- We’ll make the TOC expandable. Clicking on the category (first-level entry) will expand or collapse the list of questions belonging to that category, not jumping to the beginning of the category as before.
- We’ll modify the question-and-answer display logic and replace the scroll to the target element with the selective display of the selected question.