View your website structure as a graph

This is cool. Basically, this is a tool which studies the tag structure of your site and communicates it as a color-coded series of interconnected tags. Although this has little to do with web accessibility, it is an interesting way to visually communicate generalities about the structure of a website.

If you read the original post by Aharef (get the funny joke in his handle?), you’ll get the opportunity to look at a variety of interesting graphs of major sites: BoingBoing, Yahoo, Google, and so on.

Although part of what I like about this is the elegance of watching the tool gradually display the structure of your page, I also find that it provides an interesting view into the overall style of building a page. A very focused site, such as BoingBoing, has a very straightforward graph. A vast density of links, but little else. The sprawling monster which is Yahoo.com provides an equally sprawling graph.

Here’s Joe Dolson Accessible Web Design:

JoeDolson.com as a graph

Here, you can see this site in all it’s glory: sparing of <div> tags (green), the site predominantly consists of blue and gray tags: links and “other” tags. The “other” category includes <p>, so that’s probably the majority of what you see there. I feel pretty good about this graph: it’s straightforward and simple.

Still, the tool could be made even better: I’d love to be able to produce graphs where I chose the color coding pattern for particular tags. I could set all non-semantic tags to be bright red, to easily spot the condition of a site in that respect. I could focus my attentions on inline versus block elements, or I could differentiate between different levels of headings.

Or, of course, I could look with an eye to the prettiest graph I could come up with for my site. :)

14 Comments to “View your website structure as a graph”

  1. BTW: The “3 + 11 != 12″ is sort of a joke. I should have put a smiley there. ;)

  2. I know that this is an old post, but the tool is still working fine, and is cool.

    I would love to be able to run it on admin pages (behind a login). That’s one reason that I use TotalValidator and iCab to test my sites.

    I think that many sites spend ages tweaking their public face, but fall down on their backend.

    In my case, I recently did a project that took about a year to get to version 1.0. I had the public face working in about three months, and spent the next 11 working on the admin.

  3. I figured it meant something like that, but didn’t get around to changing it.

    By the way, I’ve been working on a modification to the HTML graphing applet like we discussed above, and should be releasing that in the next couple of days. Also, you might be interested in this:

    Validation Graphs

    This is somebody else’s modification of the same tool to spider a website and simultaneously check the validation of the site. I haven’t tried it, though.

  4. “but also , , and other table tags are not coded red” in entry 9 above should have read “but also th, thead, and other table tags are not coded red” but I made the mistake of enclosing the tags in angle brackets.

  5. The Aharef tool addresses individual pages; having found it, I now seek a tool which addresses the whole collection of pages and their interrelationships to comprise a website.

    I feel like I’ve seen something along these lines…but I can’t recall any specifics. Hmmm…it could be useful — something other than the standard text sitemap.

    I’m definitely interested in modifying the Aharef source code — but I have to admit that I am not a Java programmer, so it may take a bit to get up to speed!

  6. You’re right to note that clarity of (understanding of) terminology is key to efficient communication. Thus I think of the many pages of NPR.org or the little more than a dozen pages of zephyrpress.org each as being a website made up of the aforementioned individual pages, whether static as at Zephyr Press or dynamically constructed as at NPR. Your third paragraph follows my definition. At this point I’m not sure how many of the previous sites I looked at had the same understanding.

    The Aharef tool addresses individual pages; having found it, I now seek a tool which addresses the whole collection of pages and their interrelationships to comprise a website.

    But if you or someone else modifies the Aharef tool to convey more or different information about each page, I would be interested. I’ve already noted that lists do not have a distinct color, but also , , and other table tags are not coded red. And you want it to serve a wholly different focus of attention.

  7. …found many references to the tool at aheref.info only to be amazed at the number of people who misunderstand what the tools does, including yourself as indicated in the title to this article, “View your website structure as a graph?.

    Actually, I think that the key issue here is pertaining to how we consider the term “website structure.” In my view, as a developer, “website structure” means the structure of the code within the templates/layout of the website. What you’re referring to as “website structure” I might actually refer to as information architecture — the navigational structure of a website.

    However, I can very easily see the difference of interpretation which leads to that kind of confusion. I assure you that I do understand what the graphing tool is intended to do, but that my term usage is simply a bit different than yours.

    It’s also very fair to suggest that my usage is, in fact, wrong. After all, “website” is a term which is generally understood to mean a collection of pages, each of which may well have a different internal structure (although, from a usability perspective, hopefully not too different of a structure.)

    Will look at your comments further at a later time — thanks!

  8. Your apology for the earlier problem accepted. I could only wish that all people were so prompt and so non-defensive when faced with a negative comment.

  9. Now to the real comment as best as I can reconstruct it.

    I was looking for a tool that graphs websites and found many references to the tool at aheref.info only to be amazed at the number of people who misunderstand what the tools does, including yourself as indicated in the title to this article, “View your website structure as a graph”. The documentation (apparently no one bothers to read documentation these days) on the site makes it clear, but not clear enough, that the tool graphs individual pages only and not entire websites (despite its article name).

    The documentation also makes clear that the code is available for perusal and modification. I have thought of adding a color for lists (most of the grey nodes associated with blue nodes — links — on your site; <a> tags are orange) because of their large role under the modern programming paradigm. You could readily “set all non-semantic tags to be bright red, to easily spot the condition of a site in that respect” if you chose to make the effort.

    I have found the aheref tool useful as it stands to help understand individual pages and to look for obvious places where little effort can still produce a significant improvement in the code and therefore flexibility and maintainability of a page and by extension of a site. See http://home.earthlink.net/~silvermaplesoft/wgbh/graph.pdf for a demonstration. I’m still struggling with issues surrounding accessibility and would be most interested in your modified tool if you make it.

  10. That’s very unfortunate; I’m sorry you’ve encountered that. I’ve made the change to mark the spam comment as required. I’ll look into preserving submission information in the comment field — that’s definitely something which WordPress should preserve.

    All apologies,
    Joe

  11. When I submitted a comment to your article “View your website structure as a graph” I received the message that I had to fill in the anti-spam field, even though not marked as required. When I returned to do so, the entire form was blank. I filled in the anti-spam field, assuming that the message had been archived for combination when all required fields were present. The next message I received was that I was missing the name and mail fields, obviously belying my assumption.

    How can you expect people to be able to reconstruct a lengthy and detailed comment and spend all the extra time to do so? It is essential that submission not wipe out what is there so that a person not be discouraged from submitting anything more than “Great comment” because they don’t want to have to try to reconstruct something longer if they inadvertently miss one of your requirements.

  12. Cool… watching it being built was like spring :-)

Return to Top