Nick Lewis: The Blog

Time and again, I get myself into conflicts by insisting that design makes or breaks a website. Often, those who disagree with me say things like, "well, we are an information site; our users don't care", or "maybe if we were going after an audience of teeny boppers, I'd agree -- but were aiming for an audience of busy professionals." I always knew they were dead wrong, and their decisions were going to harm the potential success of their websites -- but now I have studies to back up my argument.

I first learned to use unordered lists in 1999 while taking a highschool web mastering class. Regardless of the what the defenders of using divs for unordered lists might say, I would have got marked wrong even then had I used the technique that is used CNN/Money's website. My teacher would have grumbled, "What the hell are you thinking? You better start paying better attention! Why are your eyes bloodshot?"

For bulleted list items, unordered are the only reasonable choice of markup. The only real defense for CNN/Money's technique of using divs and hardcoded html entities for bullets is the inconsistent default margins and padding of unordered lists in browsers. But their technique is the mark of a beginner, an incompetent webmaster who hasn't updated their skills since 1995, or a lazy pothead. The CSS needed to make lists appear consistantly, in all of the many variations, be it block or inline, has been widely supported across all modern browsers for 4 years. (and yes, IE 5.5 mac is a modern browser, netscape 2.x isn't.)

So, lets get a coffin ready for divs and bullets appoarch for lists. Here's why CNN money [also known as fortune magazine] (and anyone who is coding HTML) should have used unordered lists.

I. For people with disabilities, semantic markup is more than a buzzword, or catch phrase of snobby html know-it-alls. Semantics are what allows them to enjoy the experience of navigating and reading pages on the web. In this case, a list would have alerted non-visual browsers that the latest items were part of a series -- something key for anyone using a text-only, or non-visual browser. However, since they used generic divs, there is no telling how confusing of a jumble it might actually be to blind people, or how difficult it might

Khalid Baheyeldin writes me asking:

Do you have your own version of taxonomy_menu? I used it in the past, but did not like it because it is an obscure item in the navigation menu. So, I am wondering how you configured the "browse" block on your site?

Khalid is actually the developer behind the feedback.module and the sitemap.module. Those modules are highly recommended, btw.

Preface(for kicks)

Requirements: Civicspace 8.1+, or Drupal 4.5+ with the Taxonomy_Menu Module Installed

This is a tutorial on the theory, and methods used to create this site's multi-level top navigation menu. The tutorial covers everything from obscure drupal php fuctions to generate custom dynamic menus, to advanced CSS techniques and practices. Warning: this tutorial will forever change the way you see drupal's navigation, and CSS. That's a promise (so long as you aren't already an expert).