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:

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.

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.

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.

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:

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.

Problem 2 was solved by displaying the white arrow only for drop-down options. It's a more obvious visual clue distinguishing those choices.

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.

Comments

Excellent work! I posted a quick article in french. Keep up the goog work.

--Tristan, http://openweb.eu.org/

Posted by 5ft on April 3, 2003, at 11:05 a.m.:

So, do we hope that they just run into your new intuitive java nav., or do we need to make a phone call here?

Your simplified version is quite better than the current live version. However, I'm still not sure that type of navigation is as user-friendly as it makes out to be. For instance, if one is merely browsing through the nav. and clicks on Entertainment then goes to Food. The Food menu options sorta slip above and away from the mouse pointer. And again the same thing occurs if you are to click on News then decide to go to Sports instead.

5ft: I have a hunch the folks who designed the site read my blog, so here's hoping they'll run into it. They're welcome to take any or all of my code, of course.

Good point about the menus "slipping away" in both version of the nav. I could solve that by *not* collapsing every other menu item when another is expanded -- but that would lead to quite a long vertical navbar if all the menus were expanded at the same time.

Posted by Jason on April 3, 2003, at 1:34 p.m.:

Could you make the entire <li> clickable? When I first opened your sample, I assumed that I could click on the arrows to bring up the sub menu. It wasn't intuitive to me to have to click on the text to initate the action suggested by the icons.

Given the design of the rest of the new 2theadvocate.com site, my only suggestion would be to wrap the entire text of the navigation in a simple HTML <font size=1> tag which the stylesheet will override in browsers which can read it. Without it, the larger text that otherwise results in noscript browsers will completely blow out the narrow navbar table cell.

Posted by Már on April 7, 2003, at 12:02 p.m.:

Excellent! My only question is why you don't convert the <p> tags into <ul><li> to maintain the semantic symmetry throughout?

Great question, Már. I'd started with nested <ul>'s, but they turned out to be a horrible headache. Because of the way nested <ul>'s work -- with a <ul> embedded in its parent's <li> -- I had trouble targeting each level of the <ul> tree individually and making it look remotely consistent across browsers. (I *did* successfully use embedded <ul>'s for the sub-subnavigation, such as the Entertainment/Movies subtree -- mainly because there wasn't much difference in background color or font between the third-level and second-level <ul>'s.)

That said, it's probably possible to do this all in <ul><li>'s, and I welcome anybody to give it a shot; please post the link here if you do.

Posted by Jason on April 9, 2003, at 1:48 p.m.:

I fiddled around with the <ul>'s and <li> and came up with this: http://www.surgery.ubc.ca/mockup/advocate/allcss.html.

I made a few minor modifications, but it shouldn't be impossible to make it look and behave exactly like the original.

Posted by Romain on April 22, 2003, at 1:23 a.m.:

Posted by Jason on April 23, 2003, at 5:49 p.m.:

Thanks Romain. I've been fiddling with the menu a little bit more and right now if your browser does not have javascript enabled, the entire menu will display. Unfortunately this breaks XHTML strict validation. Anybody know of a workaround for this problem that I have overlooked?

Posted by KristinnM on November 8, 2003, at 7:13 p.m.:

How do I, lets say, make a menu open when the page is loaded?

Lets say you chose Sports, then Team Pages, and then Hornets.

Then you decide to look at another team. Then you will have to click Sports and Team Pages again, then the team, instead of just clicking the team.

I tried to add onload="return toggle('bleh', 1);" to the body tag, but it seems only possible to open top level menus when the page loads.