jump to navigation


Tag Graphs - An Alternative To Tag Clouds May 26, 2006

Listen to this article (Listen to article)

45 Royale, a web design firm,  has a feature in their “notebook” that makes me ask why didn’t I think of that? Instead of a tag cloud, they use something called a tag graph. A little bit of thought, and I realized they’re not hard to create in PHP and a bit of CSS. [This post is a general discussion. I’ll come up with exact code for WordPress in another post.]

The tag graph is near the bottom right of their notebook page. If you do a “view source” on the pag, you can see that two things are going on:

  1. A changing div width by percentage based on, I assume, quantity of posts for a particular category.
  2. A lightening of background colour of the div based on, I assume, decreasing quantity of posts for a particular category.

In 45 Royale’s specific case, because of their theme colours, the result is rather pleasant. It’s not strictly necessary to implement both variables. You could just implement the changing div width. Or the changing shades of colour.

Unfortunately, tag graphs seem to take up a lot of fixed space, compared to a properly executed tag graph (unlike mine at bottom left, which needs fixing - at the time of this writing). One solution is to list categories in two or three columns using a fixed div width per category, then changing background colour. That is, the category with the most posts will have the darkest background.

The potential drawback of this is twofold:

  1. The shade changes might be too subtle, possibly due to browser issues. (For example, if you view 45 Royale’s notebook page in both Firefox 1.5.x and IE 6.x, the former seems to display a smoother transition in shading.)
  2. If you have a category name that is really long compared to the rest of the category names, the visual effect is probably ruined.

Personally, I think that 45 Royale has a nice implementation, but you can always play with variations. Information design is an art in itself. There are many ways to convey the same information, but some of them are more about sexy design than conveying info in a non-obscure way.

Technorati Tags: , , , ,



Comments»

1. CodeProfessor » Another Tag Graph Example - June 15, 2006

[…] This is a really short post. I came across another variation on a tag graph at Ohmpage., but it’s called a Content Taxonomy there. Just scroll down to the bottom right of any page on the site. Tag graphs, as you’ll recall, are a variation on tag clouds. […]

2. Link Sizzler - July 28, 2006

The idea of tag graphs is very innovative - much better than tag clouds. It just tells us which pages are important and often viewed by visitors.

3. rdash - July 28, 2006

I agree with you, although I’m thinking it’s purely a personal choice - as is most information design displays.