adrian holovaty

April 3, 2003, 2:29 AM ET

Web standards improve 2theadvocate.com navigation

2theadvocate.com, a brand-new news site in Baton Rouge, La., that merges a local television station and newspaper, was launched early yesterday morning. They're doing some great stuff -- particularly in the traffic section, which features a Flash map of the city with traffic accidents drawn in dynamically via a live data feed. Very cool.

I was surfing the site earlier today and stopped to play with the JavaScript-driven left-rail navigation, which looks nice and clean. After clicking the navigation several times and looking under the hood, though, I was not as impressed. Here's why:

1. It requires JavaScript. For users who disable JavaScript, seven of the 10 navigation choices do nothing when clicked. The choices should degrade gracefully into simple text links for JavaScript-less browsers.
2. Some options drop down, but others don't. "Get Email Alerts," "Traffic" and "Weather" are direct links that take you to specific pages, whereas the rest of the navigation choices are only drop-downs. The only visual difference between the two link types is a subtle gray mouseover on the direct links. Expecting a drop-down but getting a link to another page is jarring.
3. The navigation bar alone weighs almost 50 KB. And that's not including the commented-out parts, which add another 4 KB. What's to blame? Messy spacer graphics and unnecessary table structure.
4. The show/hide methodology is inconsistent. For example, if you click "Food," then "News," both will be expanded. But if you click "News," then "Food," "News" will collapse as "Food" expands. That's unintuitive and irritating.

With these problems in mind, I set about redoing the navigation bar with clean code and a more usable interface. Take a look at the results.

The navigation bar looks almost identical in the browsers I tested it in (Windows: Internet Explorer 6, Mozilla 1.3, Opera 7), and it's more accessible and usable in several ways. It even looks decent -- an elegant, plain-text, unordered list -- in the Cruel Mistress. A quick runthrough:

1. Problem 1 was solved by wrapping each link with a valid link and telling the onclick event handlers to return false if the document.getElementById JavaScript capability, which is required for dynamic drop-downs, isn't detected.
2. Problem 2 was solved by displaying the white arrow only for drop-down options. It's a more obvious visual clue distinguishing those choices.
3. Problem 3 was solved by eliminating all table structures, spacer images and redundant classes. I redid the navigation from the bottom up in clean, table-free p's and li's, with the design specifications contained in a number of CSS rules. Now the page weighs 8 KB -- 16 percent of its original size.
4. Problem 4 was solved by an improved JavaScript algorithm.