While cleaning out some files on my hard drive this evening, I came across a discarded navigation bar for the version 7.0 redesign of this site that I had nearly forgotten about altogether. It was one of the first gee-whiz improvements that I pulled off in prototyping the redesign — I should say “nearly pulled off,” actually. Ultimately, I tossed it out entirely from my plans for the site, considering it too cumbersome to update (it requires no fewer than six separate images to be manually generated each time the cover image is changed) and woefully inadequate in terms of manipulating CSS to conform to my intentions.
Specifically, the text that appears on roll-over doesn’t align to the bottom of the column that results, as it does in the Photoshop comp below. The result is a clear violation of Fitt’s Law, creating a metrically short but usably huge gap between the initial roll-over target and the actual link. You’ll see what I mean if you click on the image below to see the navigation in action. And if you view it in OmniWeb and perhaps some other niche browsers, you’ll see some further glaring glitches, like disappearing links on roll-over. And it doesn’t work at all in my mostest favorite browser of all time, Internet Explorer. Yeah, it’s all pretty ugly.
It was an idea that would have worked beautifully in Flash, but ultimately I wanted the site to be a purely XHTML/CSS endeavor. It’s also something that could benefit mightily from the Ajax approach recently christened by Jesse James Garrett, as it effectively tries to emulate the action of fetching information from the server, at least in the Cover Images menu items. Heck, if I could have transparently been fetching data from the server, I would have built a navigation ten times as cool as this. Alas, I’m not so technically endowed.
+