Website usability, performance, and SEO with JavaScript navigation strategies

There's a growing concern of mine revolving around the desire to use JavaScript in conjunction with, or in replacement of, XHTML-based navigation on websites. There are a lot of resources out there investigating the use of JavaScript with regards to search engine performance, web accessibility, and web interoperability. I'm going to try and summarize my thoughts here, and establish general guidelines to a healthy use of JavaScript with website navigations.

Introduction

Navigation is such a vital piece of your website. It provides your users with a tool to move around and discover your content. As web professionals, we use navigation to predefine a structural organization of website content.

Jakob Nielsen, web usability guru, suggests that:

Without structural links, pages become orphans that are not contextualized:

Amen, brother. A well-constructed and contextualized navigation for your website can make or break your users' experience. Too much navigational information will confuse the user, and not enough will confuse the user. There's a middle ground, and it's different for every website.

At my company, we primarily build websites for - or in support of - newspapers. Newspapers have a long-standing traditional navigation structure, but they're optimized for print. We hold the responsibility to translate these navigational structures into something useful for web users.

It's easy to see how vital a well-constructed navigation can be to the success of your website. Ultimately, it's your job to make sure the user understands the website structure and is not prohibited in any fashion from doing so. Barriers include informational overload, readability, and - for the sake of this article - technological hurdles.

Using JavaScript with website navigation

At a high-level, there are two ways JavaScript can be used with navigation:

1. using JavaScript to enhance the user experience
2. using JavaScript to provide the user experience

Enhancing the user experience

A typical use of JavaScript to enhance the user experience would be to provide behavioral functionality in support of showing or hiding navigational menu items. Examples of this would include dropdown menus and / or displaying content's location within a hierarchical structure of other content. To fall into this category, the JavaScript should be unobtrusive to the overall user experience.

Unobtrusive JavaScript is a technique used to more strictly adhere to the behavioral nature of JavaScript as a scripting language. According to the technique, JavaScript should be used in circumstances where:

• the script successfully fills a behavioral gap not intended to be filled by XHTML or CSS
• the script does so in a fashion that gracefully degrades in instances where JavaScript functionality is not available
• the script takes into account browser inconsistencies and attempts to avoid problems associated with them

According to these guidelines, JavaScript could be successfully used in website navigation so long as:

• core navigational elements are established structurally through XHTML
• the lack of JavaScript does not prohibit the user from using the core navigation
• the JavaScript simply provides behavioral improvements to the navigation that may be less usable with XHTML only

Now, there are many stable CSS alternatives to providing behavioral functionality for navigation, but I'm not going to get into them.

Providing the user experience

In contrast, using JavaScript to provide the entire user experience presents several problems. The definition of 'providing the user experience' would be something to the effect of using JavaScript to generate an XHTML navigation on the fly from, perhaps, a JSON object.

As I've pointed out above, doing so would be in direct violation of several principles in that:

• the user's viewing medium is required to support JavaScript in order to allow the user to successfully move to and from content
• the script is not simply filling a behavioral gap, it is providing a solution that is normally suited for structural markup with XHTML

Thus, using JavaScript to solely provide the user's navigational experience is never recommended.

The effect on search engine optimization

Google has been making great strides towards indexing Flash and JavaScript generated content, but it's still not an exact science.

If JavaScript is used as it is intended as a behavioral layer to provide additional user experience elements (coined 'progressive enhancement'), the structural markup of a page should still contain the information that search engines are looking for.

Google says:

If you're starting from scratch, a good approach is to build your site's structure and navigation using only HTML. Then, once you have the site's pages, links, and content in place, you can spice up the appearance and interface with AJAX. Googlebot will be happy looking at the HTML, while users with modern browsers can enjoy your AJAX bonuses.

In the event that JavaScript is intended to enhance the user experience with an already defined XHTML structure on the page, no search engine performance degradation should occur.

However, in the event that the entire navigational structure of a website is defined in JavaScript and later interpreted into an XHTML structure on the page, it should be expected that serious search engine performance degradation will occur.

Web accessibility

Developing navigation solutions with JavaScript techniques not only takes a toll on SEO, but more importantly on web accessibility.

Adherence to web accessibility guidelines is vital to the usability of your website by users with screen readers, speech recognition software, and other assistive technologies. The availability and usefulness of JavaScript to these users is often limited, and your design teams must take this into consideration.

The mobile effort

The mobile web has come a long way in recent times, and while it is suggested that mobile strategies are not simply mirrored from desktop strategies, it should be noted that mobile phones traditionally (sans-iPhone) have little support for JavaScript.

If you're truly interested in delivering a quality mobile web product, read Cameron Moll's book, Mobile Web Design, and give Pete a shout.

Performance and page load times

As stated, JavaScript is intended to be a solution for providing a level of behavioral improvement to a website. Since JavaScript is a client-side scripting language, it relies on the web browser to process the script. Thus, JavaScript should not be rendered until the webpage has completed loading the XHTML onto the page. Unfortunately, this often means a period of loading time is associated with the rendering of the script.

Excessive amounts of JavaScript can also have serious performance issues, especially, for example, when parsing a large JSON object for manipulation into an XHTML navigation structure.

Conclusion

Any JavaScript technique used to enhance the user's experience with navigation should be very carefully implemented. Be absolutely sure there's no way to accomplish what you want with other, more friendly, means such as CSS.

If you must use JavaScript to enhance the user's experience, do so paying close attention to the guidelines set forth by the W3C and the ideals of progressive enhancement.

Finally, never, ever use JavaScript to single-handedly provide the navigation for your website.