Better folder tabs using transparent PNGs?
Ever since I read Steve Krug’s book, Don't Make Me Think, I've been thinking a lot about the idea of tabbed browsing, which is, to be very specific, a user interface pattern that employs the visual representation of file folder tabs to provide the user a means of navigating multiple chunks of content. Tabbed navigation is arguably one of the most widely understood conventions for maneuvering through a website. As a designer faced with such conventions, there is a strong temptation to re-interpret the visual metaphor. Could it be improved?—it’s definition stretched? This leads to innumerable variations on the theme of tab.
So, do I have some provocative new approach to reveal? Well, no. Actually, what happened is that, while my senses were attuned to the tab pattern, I've noticed that most tabs tend to be very rectangular with some amount of space between each tab. I know that this configuration simplifies the web designer/developer’s work by dividing the graphical elements of each navigation item into discrete chunks that are a breeze to translate into XHTML markup and to style it with a little CSS and background images. But this limits the designers ability to create subtle layered effects; attempting any kind of visual overlap of elements would greatly increase the complexity of code required to make it so. This was just the case when I began thinking about re-designing the navigation for my own site. I had roughed-out a mock-up that used tabs—not just any tabs, but overlapping, natural-looking folder tabs with cast shadows.
Having recently witnessed my Develisys colleague, Nathan Baker successfully execute a transparent drop-shadow that slips flawlessly over a textured background...I wondered how the technique could be adapted for tabbed navigation to create more natural-looking, overlapping tabs with yummy cast shadows.
Since I have never spent much time working with PNG images, my first test was simple: use clean xhtml markup and minimal css to create the effect of overlapping buttons. Here is the result. It works in browsers that 1) handle PNG images as an element background, and 2) react correctly to the use of the :hover pseudoclass on elements other than <a>. IE is out on both counts. I know there are workarounds for both of these IE shortcomings, but I like to keep these to a minimum.
In my second attempt, I managed to move the :hover onto the <a> without much fuss. While the example isn’t that slick looking, the technique might allow for some very lovely, sublte effects. I shared the idea with Nathan, who quickly set about making it work in IE. His CSS is slightly different, but it is equally compact. One minor drawback with Nathan's solution is that in IE6, the :hover state for an inactive button is triggered only when the mouse is over the anchor text; but, on an active button the entire area is :hover'd. Hmmm...
One of the coolest aspects of this approach is that is uses a single button image for all buttons. It also retains the time-honored tradition of using an unordered list (the ul element) to mark-up navigation. The transparency effect allows the designer to reposition—or change the overlap—for each button. My original attempt uses absolute positioning, while Nathan's solution uses margins to handle the spacing and overlap of the buttons. Nice. We'll keep working on it.
I found this very detailed account of the status of PNG support in general, and among browsers in particular. And here is the fix for MSIE's incomplete PNG support.