ADN is a free press Spanish newspaper, the paper version as well as the online version contents are published under a Creative Commons license. The paper version has a quite elegant and functional layout (you can see a pdf version here), designed by newspapers design guru, Antoni Cases (Cases i Associats).

Cases i Associats

For this post we'll focus our attention on the online version of ADN. The web site for ADN is, together with the French Rue89, one of the few site defining an editorial layout for online news sites.

Tags generated navigation menus

The interesting feature deployed by ADN online is a tags generated navigation menu, a sub-menu fed with tags belonging to the latest AND/OR most viewed AND/OR most occurring AND/OR editorially chosen articles. (see following image for the sub menu on ADN home page.)

In the image above the words highlighted in yellow are the tags composing the sub-menu. If you select the world item in the main menu (the white terms on gradient grey background), you'll be redirected to the world page, here the world item is highlighted, to indicate the fact you are in the world section of the site, and the sub-menu changes. This time the words appearing are relevant to the world section we are in. (see following screenshot.)

Select one of the terms, in the following example the term Camboya (Cambodia), and you'll land on a page where all articles having that tag associated are listed. (following image.)

There's just one thing I do not quite agree with, the fact there's no navigation path, or breadcrumb, or tag heading identifying the tag a user selected. The only information could be found on the browser top bar where the title looks like ADN.es - camboya. Also the URL refers to the path generated by the user navigation request: http://www.adn.es/tag/camboya/, alas this is no excuse, since reading the page title or looking at the URL in the navigation bat of your browser is not as immediate as having a clear reference on the page.

Also I'm quite disappointed not to have those navigation tags in the sub-menu provided with a title attribute since they are links. Neither the rel="tag" has been implemented, weakening the tag approach. The same applies for the fact that a visited tag has no indication it was previously selected, that is there's no a:visited or the visual representation has been set the same one of the others link states.

In the news page, we can find the standard approach of presenting all the tags belonging to the item. (see following image.)