Feb 09 2008
Websites As Graphs
I recall visiting this site at some earlier time. Was it a year ago? Perhaps two or three years? For some reason I forgot about it or failed to bookmark it until today. How I ended up at this site again, I don’t know, but I’m glad I did.
Using an HTML DOM Visualizer Applet created by Sala, this site will go and fetch your site’s pages and create a blooming, almost organic-look graph of your page and site structure. Red stands for the dreaded table - so here’s hoping you don’t see too much of that color in your own site chart. Black is an html starting point - the root of your site - where everything starts and pages branch out from there.
One word of caution - it’s addicting. I had three or four tabs open, each one graphing a different website, taking screenshots of each one, so I could print them out and look at them later. Like works of art. Or new life forms. I have promised myself that I will visit this site only once a week, for 15 minutes at a time. Anything more than that and I’m going to feel really guilty. Well, okay, maybe 30 minutes on my birthday.
When you enter your url and click the “Show me the graph” button, you may see only an empty white rectangle at first. Some sites “bloom” into life really quickly, while other’s complexity requires more time. So don’t hit the “back” button or refresh your page - just give the script time to gather all the site details and get to work. As you might guess, this is why I had multiple tabs open, each working on it’s own life-form. If you are seated where you have a view of your dsl modem or wireless router - etcetera - you can see little blips of activity while it’s gathering information.
What do the colors mean?
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags
Here’s a view of 81 North’s bloom. Click on the thumbnail to see the full sized screenshot. And when your’re done, you can also go check out all the other bloom on Flickr - http://flickr.com/photos/tags/websitesasgraphs/
A List Apart has a much nicer bloom and you can see how visual comparision can easily identify problems areas, such as tables that haven’t yet been converted. ALA’s site is sweet, with no tables to embarrass them.