A Stripe of List Style Inspiration

by Jason Beaird — Aug 20, 2007

When most web designers think about css-styled link lists, the mental images that come to mind are of the trusty old horizontal and vertical navigation menus we’ve all become accustomed to building into our sites. That's because the CSS styled unordered list has rightfully become the standard markup for site navigation. There are enough beautifully styled top, left, and right navigation blocks out there that attest to the unlimited styling potential of the unordered link list, but are we really letting them achieve their potential?

In an effort to provide an intuitive and accessible user experience, it seems we’ve established a set of unwritten rules for link lists that, quite frankly, makes them all look the same. Don’t believe me? Jump over to your favorite CSS gallery and take a look at the menus and nav blocks of the latest featured sites. You’d be hard pressed to find anything that doesn’t look like a variant of a list from Russ Weakley’s list gallery site: Listamatic. Unfortunately though, most of the styles featured on the Listamatic site are really just unpolished examples and the majority are 3 or more years old. Way back when Mark Newhouse wrote his ground shattering Taming Lists article at ALA, he concluded with these words:

Believe it or not, we have just scratched the surface of what can be done to modify lists with style sheets. I won’t claim that all of the techniques presented here are the most practical CSS that you'll come across, but I do hope they make you think about how using CSS can release you to use more structured markup.

Little did Mark know, we'd still be creating modified lists that mimic those that he published almost 5 years ago. Now I’m all for accessibility and familiar navigation structures, but there are times when we should take full advantage of our creative license and bust out of the box of predictable page elements. Obviously, the main navigation block isn't the place to go buck wild. Users want to know how to navigate at first glance, but that doesn't mean the rest of the lists on your site have to fit the same mold. We should be trying to do things with CSS that haven't been done before and looking for opportunities to create something unique. I recently had the chance to do just that with a list style I wrote for a recent work project. The result was Expand-A-Stripe:

The design credit for the list above goes to my coworker Micah. He came up with the design comp for the site and planned for the area to be a flash element, which would have been fine, but it worked so well as a pure HTML list style that we decided flash wasn’t necessary. So go ahead, see if you can find room for expand-a-stripe in your design arsenal and never give up on finding new things to do with the tools that you have available.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float