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:
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. ๐
Chris M.; October 16, 2010 at 8:21 am
BTW: The “3 + 11 != 12” is sort of a joke. I should have put a smiley there. ๐
Chris M.; October 16, 2010 at 7:52 am
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.
abhi; October 16, 2010 at 6:38 am
Joe Dolson; January 21, 2008 at 12:12 pm
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 (HyperText Markup Language) graphing applet like we discussed above, and should be releasing that in the next couple of days. Also, you might be interested in this:
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.
R. W. Crowl; January 21, 2008 at 12:14 am
“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.
Joe Dolson; January 17, 2008 at 11:15 am
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!
R. W. Crowl; January 17, 2008 at 4:08 am
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.
Joe Dolson; January 16, 2008 at 8:40 pm
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!
R. W. Crowl; January 16, 2008 at 8:29 pm
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.
R. W. Crowl; January 16, 2008 at 8:25 pm
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.
Joe Dolson; January 16, 2008 at 7:26 pm
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.
R. W. Crowl; January 16, 2008 at 7:20 pm
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.
Joe Dolson; October 30, 2006 at 10:51 am
Fun, isn’t it?
Mike Cherim; October 30, 2006 at 10:49 am
Cool… watching it being built was like spring ๐