One of the very cool things about computers is the ease with which you can create visualizations of data: false-color images showing weather, for instance.
Visualizing how your website is structured can help improve its design — and there’s a cool free online tool to do just that. Here is the visualization for my personal website:
Legend:
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
All those red dots stem from my use of QuarkXpress™ v6 to generate the HTML for static webpages — it loves using tables to format. (My blogs are WordPress.) I’m thinking of switching to DreamWeaver™ but haven’t had a chance yet to test-drive it.
Anyway: if you pair this cool visualization with traffic data, interesting stuff might emerge on how to re-organize the website structure to make it easier on your visitors to find what they’re looking for, or just to poke around. Or the visualization can be an aid to improve efficiency or speed or standards-compliance. (There are fewer surprises across different browsers when standards-compliant webpages are displayed.)
Even as you use the tool for sound business reasons, it’s okay to let your inner geek and suppressed crayon artiste go gooey. Just make sure that, if you show it to your boss, you describe it as a “website structure visualization graphic” and not as “way cool.”
(Hat tip: Matt at Drawn!)
