When building a website there’s an inevitable moment when it is required you think hard about navigational elements. I’m not talking about information architecture here. Information architecture usually helps answering the question: “How will this function?†(among others). Nope. I’m trying to answer the question “How will this look?†– purely from a graphic design perspective.
The above mentioned stage of the design process is one that I spend a considerable amount of time on and particularly enjoy within any project. In this post I want to share my latest experiment on navigation design.
In my quest for elegant, clever and nice navigation design I decided to let go of certain requirements. In this case I decided to ignore a few usability (and accessibility) best practices (note: this should of course be avoided in real life implementation).
However, I’ve set myself a few constraints which make perfect sense, even in an experiment. This design should of course be constructed using the sounder XHTML and CSS combination, as opposed to tables. Furthermore, once CSS is disabled, a nice unordered list should remain. Other than that the sky is the limit.
The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list? The answer of course is “Yes!â€. And there are a few designers who elegantly proved this point in the past.
As said and proved by many before – CSS can handle your wildest dreams. Unfortunately we are currently only limited by the pace of web standards implementation in modern browsers (specifically one browser, no names of course). This small experiment should work in most modern browsers, but your mileage may vary. Comments are more than welcome, but keep in mind that this is only a trial in design, not in practical implementation as such.
