Web standards improve 2theadvocate.com navigation

Written by Adrian Holovaty on April 3, 2003

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.

Comments

Posted by Tristan Nitot on April 3, 2003, at 3:01 p.m.:

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 5:05 p.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.

I'm still not sure that this navigation is all it's cracked up to be.

Great job with the redesign. York Peppermint Patty?

Posted by Mark on April 3, 2003, at 5:48 p.m.:

Could the arrows point down instead of to the right? I found it visually jarring when I clicked on it and instinctively moved my cursor to the right, only to find the menu open below me.

Posted by Adrian on April 3, 2003, at 5:50 p.m.:

Thanks, Tristan.

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 Adrian on April 3, 2003, at 6:03 p.m.:

Good call, Mark. I've updated the arrow graphic to point downward.

Posted by Jason on April 3, 2003, at 7: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.

Posted by Adrian on April 3, 2003, at 9:34 p.m.:

Jason: Thanks for the suggestion. Give it a shot now. I've put a specific width on "#nav p a", which should force IE to make the entire <li> clickable.

Posted by Julie on April 5, 2003, at 7:03 p.m.:

A tremendous improvement, Adrian...

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 5: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?

Posted by Adrian on April 7, 2003, at 5:58 p.m.:

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 6: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 Adrian on April 9, 2003, at 7:17 p.m.:

Nice, Jason! Good work. One suggestion: Give your main <ul> the id="nav"; that would eliminate the need for the container <div>.

Posted by Jason on April 9, 2003, at 7:51 p.m.:

Thanks Adrian. I had to change a couple of style declarations, but it works without the div and I've re-posted it in the same location (http://www.surgery.ubc.ca/mockup/advocate/allcss.html).

Posted by Romain on April 22, 2003, at 5:56 a.m.:

Well, vey nice Jason... But I love when the code validate. And here it doesn't. I don't do Xhtml, so I cannot really help.

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

Well.. nevermind. It's validating. Sorry about that. I look plain stupid now :p

Posted by Jason on April 23, 2003, at 10: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 9, 2003, at 1:13 a.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.

Posted by RSL on November 16, 2003, at 10:52 p.m.:

a Java Script and CSS expandable menu with few code and nice results

<html>

<head>

<style>

#exp blockquote

{

display: none; //this is the key feature to make this visible or not

margin-bottom: 0px;

margin-top: 0px;

}

</style>

<script>

function expande(a)

{ //this siwchts the visivility and responds with the correspoendig image

a=document.getElementById(a);

a.style.display=(a.style.display=='block')?'none':'block';

if(a.style.display=='none') { return './img/expand1.gif'; } // make you own nice images

if(a.style.display=='block') { return './img/expand2.gif'; }

}

</script>

</head>

<body>

<div id="exp">

<img onClick="this.src=expande('principal')" src="./img/expand1.gif">principal<br> //check

//relation betwen the expande function parameter and the id of blockquote

// you want to change

<blockquote id="principal"> // check the realion---------

<img onClick="this.src=expande('hijo 1')" src="./img/expand1.gif">hijo 1<br>

<blockquote id="hijo 1">

Sub hijo 1<br>

Sub hijo 2<br>

sub hijo 3

</blockquote>

hijo 2<br>

hijo 3

</blockquote>

</div>

</body>

</html>

Posted by Ivan on October 4, 2005, at 8:17 p.m.:

what if one of the options remains open at first (when you load the page) and then it closes as usual when you choose another parent menu item

should work changing the onClick parameter or its more tricky than that, and the javascript muts change?

Comments have been turned off for this page.