Graphical Repz

What Does Your Website Look Like?

I like the fact that most of the people on the internet are smarter than I am. One of those people (my friend Adrian) posted this neat article about a utility to graphically represent one’s website.

You can also go to the author’s website to see how you can make your own graphical representation of a website.


This is what the colours represent…

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

Barking Space

This is the graphical representation of the blog you are currently reading…

Click to enlarge…

I suspect it is so complicated due to the nature of the templates I am using. Even within that framework, it’s pretty simplistic.

Figtography – The Blog

This is the graphical representation of my photography blog

Click to enlarge…

I set up my photography blog for those who like more detail about the photographs on my photography site (as well as a number that are not displayed there).

The template I used for that is a little different than the one for Barking Space. For the photography blog, each article is essentially structured the same (photo, technical details, description), whereas on Barking Space, the articles vary in structure.

Figtography – The Site

This is the graphical representation of my photography site

Click to enlarge…

I’m pretty proud of this one.

Unlike the WordPress blogs, I designed this one from scratch. It’s very simple, which was the goal.