Web sites as graphs

Submitted by Frederic Marand on Fri, 2006-07-21 09:25

Well, someone had to notice HTML pages were trees and do something visual about it, instead of the same usual "computer science" views of DOM trees. Here is the blog entry that implemented the idea and was overloaded by its success two months ago:

Web sites as graphs, on Aharef

And now for some samples of what hints it can give us about Drupal themes.

The meaning of colors:

  • blue: links (A elements)
  • red: tables (TABLE, TR and TD elements)
  • green: DIV element
  • violet: images (IMG element)
  • yellow: forms (FORM, INPUT, TEXTAREA, SELECT and OPTION elements)
  • orange: linebreaks and blockquotes (BR, P, and BLOCKQUOTE elements)
  • black: HTML element
  • gray: all other elements

Old-school site with Frontpage-generated decorations

Graph for www.osinet.fr, Frontpage design, ca 1999

Drupal-based designs

Graph for www.riff.org, drupal-based, custom theme

Graph for blog.riff.org, drupal-based, marvin theme

And last, but not least, drupal.org itself: tableless, only one image link.
Graph for drupal.org, drupal-based, bluebeach theme, tableless


The sampling is here mostly to lure you to try the applet on your own site, but from these samples and others, it seems to be characteristic that table elements tend to be less numerous in drupal designs than in older, late 90s designs, back when CSS was much less reliable than today. Not much of a surprise, is it ?