Bring Back the Sitemap?

I’m doing a small segment on navigation at Responsive Day Out (1st March). It’s an area of responsive design I enjoy experimenting with.

You’re probably familiar with responsive patterns that transform a traditional menu into something mobile-friendly. Combinations thereof cover most scenarios. If nothing suffices it might be more apt to focus on information architecture before attacking code again.

Table of contents

For small viewports I’m a big fan of reveal patterns that initially hide the global menu. Doing so makes you remember that this menu isn’t the single point of navigation. It also begs the question: just how vital is a global menu?

While researching the topic I stumbled upon Yaron Schoen and was pleased by his simple yet effective technique. Yaron’s site has no global menu. Instead he links to a single Table of Contents page. Yaron inspired me to create my own:

I’m not abandoning my global menu just yet but I do like this alternate overview. It’s a curated sitemap. It doesn’t list every page, just the ones I’m keen to show off.

A choice of direction

Right now this page is only accessible via a tiny link in the footer. The question I pose your way is this: do I add a link to my masthead?

And if so, what icon do I use? Answers in a tweet please.

I may bring back comments at some point this year!

Update (22nd Feb 2013)

This post has received mixed reactions!

I realise the terminology I’ve used isn’t helping to explain my thoughts. My personal demo isn’t much of an example either.

“Sitemap” and “Table of Contents” have strong legacy connotations and my article title would suggest I’m referring back to such meanings. In a sense, I am, but exploring new ideas doesn’t always mean blinding ourselves to old ones.

The web introduces a fluidity to design. It’s interactive. Potentially stateless. So suggestions that we should be inspired from the limitations of print-based media are rightly met with skepticism. Fair enough, but getting philosophical doesn’t do us much good when it comes to delivering a website.

Presenting a large amount of content is an exercise in constraint. Give users enough options to narrow down their choice and no more. Design for discoverability. Sign-post for persuasion. Provide alternate search functionality. For the most part, we use multiple tiers of menus scoped to specific areas.

A Sitemap in the traditional sense is just a dump of links. Not for human consumption. But a well presented table of contents offers a high-level overview of a website. This mental model is difficult to attain when browsing with a small viewport.

I’m not suggesting it should ever replace normal navigation — that would defeat the point — only compliment it. It should still be restricted to top-level areas but more verbose than a menu can be. It’s not in your face. It’s optional.

It doesn’t have to be an independent page either. I’m very much liking the “jump to big footer” technique many responsive sites are starting to employ.

The Guardian’s mobile site integrates a similar concept. Select “All sections” from the global menu are you’re taken to a very functional table of contents. This doesn’t mean that specific categories can’t have their own sub-menu. It’s just an alternate route.