The beauty of a well designed webpage

I do enjoy trawling through someone else del.icio.us tags. First, bookmark a web page. Instantly find out who else has linked to it, and in turn what they have linked to. The act of bookmarking a site is a different thing from posting on a blog. A blog is a public diary, whereas a linklog is more a private scrap-book. Rumaging around in it feels slightly illicit. The act becomes a guilty pleasure, even if the whole point of del.icio.us is openness and sharing.
It was via del.icio.us that I sumbled accross Aharef (Subtitle: The Link Salt in the Web Soup). A page innocently named “Websites as graphs” caught my imagination with a very simple tool, which allowed me to generate the image below.
[photopress:sitemap.jpg,thumb,alignright]This intruiging pattern is not an organic chemical or a subway map, but a graphical representation of this site’s homepage (you can click it to enlarge). Each node represents an HTML tag such as DIV or SPAN. Begining with the black HTML tag/node which begins pretty much every page on every website, each line represents one tag ‘nested’ within another. The grey clump is the header information; the orange mess is the block of recent posts (uneven in length and content); and the regular protrusions that look like dandelions comprise my blogroll.
The page at Aharef gives some sample maps from popular websites, like Google and Boing-Boing. What I enjoy is how the more aesthetically pleasing patterns belong to those sites with a better site structure. A sparse pattern with plenty of red dots implies a complex site designed with tables. A cleaner, simpler site will have fewer but more concentrated nodes. They illustrate how a site with a clear structure will allow more people to read the information more efficiently.
Thinking about the philosophical ideas of mapping and representation, I wonder which is the ‘true’ representation of the document: the web-page or the diagramme? Both are valid ways of interpreting the same information. I wondered if a page could be created in which a greater meaning to the content could be found within its source code. My first, rudimentary attempt is called “I Had A Little Nut Tree”. You can also watch the visual representation spawn via Aharef. The poem is a friviolity in itself, but given a twist by its unique code structure.
I am reminded of other ways in which the same information can give rise to different things, depending on the medium you read it in; I am reminded of how the written word can take on a different meaning when read out loud; or how two people can interpret the same book as having different meanings; I am reminded of the post-Borgesian play Hear No, See No, Speak No; of the ‘graphic’ function in Apple iTunes that creates screen-savers from my MP3 collection; and how DNA code can be rendered not only into living things, but also into chromatographs so accurate that we can point at a bizarre pattern of dots, and give it a person’s name.

3 Replies to “The beauty of a well designed webpage”

  1. The Little Nut Tree is very nice indeed, but where is the King of Spain’s daughter, and her visit, and its motivation?
    Not all predicates lend themselves easily to a visual representation; certainly abstract concepts tend not to. To represent “justice” for instance, you might have a scales, but the scales themselves are not the justice, just a representation of it, as their image is in turn just a representation of them. So I don’t think it is possible, or desirable to cross media like this, although it’s a very nice idea.

  2. Its not a case of providing and illustration for things, or distilling a complex thing into something simple. The pattern IS the page… or rather, it is an interpretation of the source code, just like the page you view in your browser is an interpretation of the source code, or the green you see on leaves is your eye’s interpretation of light-waves.
    Obviously not every rendering in one medium bears a visual representation of its rendering in another (I rarely opine on dandelions or flowers). I think my pear tree page is interesting because it does. It says as much about the way we choose to render ideas and concepts. The fact that the < form > element is represented yellow is entirely arbritrary.
    Back in the day though, writing did bear a visual similarity to the concepts it illustrated. Think of heiroglypics.

  3. Sorry this is rather long, but I think there are lots of ideas that relate to this…
    You say the pattern IS the page, in the sense that it is defined by the source code. But I guess what I was getting at was that the source code by itself, when displayed in the graphical format, contains very little of the wonderful content we get to read on your web-page; most of which I would be amazed if the source code looked anything like the content, such that you could get very much of the content from the pattern of the source code alone. I guess what I’m saying is that the page is very much more than the source code alone, which I guess is kind of trivial in one sense.
    So I think I agree with you, but I think I would go further. There is no reason why ANY rendering in one medium should bear a visual representation of its rendering in another, and in fact, I can’t think of any that would. As your nut tree example nicely demonstrates. If you stopped the text after “golden pear”, then it would work, because I wouldn’t be expecting to see the King of Spain’s daughter etc.
    That the element is yellow may be arbitrary, but I would hazard a guess that your use of it was not…? I presume there is no law that says it may only be used on words denoting yellow (or golden) objects. If there were, then web pages, and the ideas they express, and how they express them, would be rather more limited than they are, and that would be a shame.
    The aesthetically-satisfying feeling of the notion that one medium WOULD ever bear a visual representation of it in another, reminds me rather of a thought-feature of schizophrenia, I believe it’s called delusions of reference, whereby coincidental similarities between things (eg words) are interpreted as meaningful. Rather like that silly Da Vinci Code book, which I haven’t read, but seems to be predicated on the cross-lingual similarity between Sangria and San Greal… There seem to be no limits to man’s search for meaning and order.
    Heiroglyphics is a nice example, as is Japanse Kanji and Chinese writing too. But as you try to express and combine more and more complex ideas, these ancient systems of writing become more and more cumbersome. I forget how many characters there are in Kanji, but it is so many that a lot of Japanese people only know a relatively small proportion, and one shift key on the keyboard is nothing like enough. Most English people by comparison know all the characters in our alphabet, and as such are empowered to express any idea they can think of.
    And finally, we mustn’t forget cunieform, which was invented in order to do book-keeping, basically, which I think is rather nice, though I haven’t a clue what to conclude from that.
    Your comment about how we choose to render things made me want to say something about private languages, but now I can’t remember what it was…

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.