Field Notes Inside an Integrated Communications Agency

One thing I continue to struggle with is how relevant sitemaps are--and to whom?¹

Below is an example sitemap, which indicates the basic hierarchy of pages or categories within a site.

What's wrong with this picture?

Sitemaps don't represent pages...

Implicitly, they communicate pages of content. This is not necessarily the case. They are a quasi-system model that blurs the lines between content and page. This leads to misinterpretation.

Extending this, they are rooted in a page-centric approach that assumes pages have one state. Ajax-y interactions that reload different content into the same page aren't communicated. 

...and they don't really represent content.

They suggest content, but a through the lens of a page. This, I believe, is an artifact left over from the days where sitemaps were closely tied to the physical implementation. As we've evolved the idea of a sitemap away from actual pages, we didn't rethink how it is actually interpreted or used by either developers or clients. 

...and they don't reflect true navigation or interaction paths.

In fact, they indicate a hierarchical flow between pages. Sitemaps suggest that users typically access the site through the home page. Users who arrive via a search or a link from a friend are likely to be entering at a deeper level than the home page. Luke Wroblewski has a great podcast and set of slides on this.

And sitemaps don't account for related items--hyperlinks that bring together similar content that exist in different categories of the site. Similar information may be "nearer" than sitemaps suggest. The perceived distance is content too and associate navigation can be as important as the categorical navigation. 

So, what do they do well?

For me, they are good as a sketch -- not a final product -- for how content may be organized and how navigation may occur. They work well for initial scoping. But having to caveat what sitemaps are feels like a cop out. There's gotta be a better way.

 Any thoughts? Do sitemaps help you or confuse you?

¹I'm talking about the information architecture kind, but many of the points also extend to those junk drawer sitemap pages that many sites have. That's entirely another issue to address.

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!