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.
- 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
onclickevent handlers to
return falseif the
- 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
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.