Keiichi Anime Forever Blog

Our network bar is the little bar that is above most of the pages on KAF. For guests, it provides links to visit other sections of KAF and serves as a quick site map. For members, it also provides alerts about new messages and information on what other members are currently doing (like who is currently in the chat and who is playing certain multiplayer games). We have had the bar for a few years now, and it’s a really useful central messaging center.

To accommodate some significant issues with the design of the previous network bar, we have rolled out another one with a new look and a few new features. Non-members won’t notice much of a difference, but members will now notice that the bar displays a list of your friends that are online and the status of the TeamSpeak 2 server. Right now it doesn’t display a list of members playing Digital Paint: Paintball 2 anymore, but that is in the works.

The new network bar solved four problems that we had with the old one:

• Because menus opened by hovering over the menu titles, the menus couldn’t have scrollbars (without being awkward to use) and consequently, long lists could not be put into the menus. Menus are now opened on the new network bar by clicking, and now more information can be cleanly put into the menus.
• The network bar now supports tooltips, so now new members will know what the things on the bar actually mean. This was a feature that we wanted for a long time.
• The old bar required only CSS to work, but this caused problems of its own. Sometimes the bar didn’t work correctly on some configurations.
• Because the individual items on the network bar did not touch the bottom of the network bar, menus had to drop down from the middle of the bar and it was a bit odd from an aesthetic point of view.

Unfortunately, JavaScript is now absolutely required to use the bar. Perhaps we will make it somewhat degradable if you happen to have JavaScript off, but don’t have your hopes up too high. Getting a pure-CSS implementation of the menus to work wouldn’t be trivial.

By the way, the bar looks absolutely atrocious on IE 6, but it works. It looks best on Firefox, Chrome, and Safari, because the three support rounded corners.

Yes, the bar looks quite Facebook-y. Originally it didn’t in Photoshop, but then we wanted to solve issue #4 (listed above), and so we had to do it this way (which we originally avoided with the previous iterations of the network bar). Getting the original design to work in code would have also generated much more CSS and JS, and we didn’t want to emulate that aspect of Facebook (bloat).