When you've spent days and weeks creating the perfect site for your client, and you've been desperately trying to impress, getting an e-mail from the client, after you have proudly delivering it, saying that they have discovered a broken link is totally demoralising. This looks terribly unprofessional, and can only get worse if the client missed it as well, and the site goes live with this error. A broken link is a very simple mistake to make, and can easily get lost in-between all the complex front- and back-end code that has to be created for a project.
Actually using Integrity is as trivial as giving the program a URL which will be be used as the base location to start the integrity check. If you wish to jump straight in and give it a whirl, please feel free to do so. Integrity is available from this site:
Integrity starts by creating an internal map of the target web-site, by pulling the page content when looking for new links on a page. As each page is scanned, this is reported on screen. Following this scan of the site, a map of this site is generated using SVG. To get information about a specific page simply click on either the page title label or on the dot in the map which represents the page. The map will update to highlight the inter-page links which effect this pages, and detailed information while be shown below the map. This detailed information is broken down into incoming links (pages which link to this page) and outgoing links (links from this page). Outgoing links also have a server response code as Integrity checks all outbound links. Any errors are indicated in the map and in the detailed information by a red highlight.
There are a few things to note about this online version of Integrity. Firstly, because SVG is used to draw the map, only Opera and Firefox (or other Gecko based browsers) will work as expected. For further details about browser issues, please refer to the Methodology section of this article.
In addition to requiring an SVG browser, the online version of Integrity is limited to checking only up to 25 pages per site. This is due to the fact that Integrity can really eat bandwidth when used a lot, as each page is pulled to the SpryMedia server for parsing. Furthermore, external web-pages (pages not in your web-site's domain) are not checked by Integrity to ensure the links are valid. This is due to the fact that these pages can considerably increase the latency of a check.
If you wish to use a version of integrity which does not have these limitations, please get in touch with me.
Once the map co-ordinates have all be calculated, createElement and appendChild are used to add SVG paths and circles to the SVG container in the document. I have used HTML DIV's to display the title of each page rather than SVG text, as creating a coloured background with a border in SVG is a bit of a nightmare. Using simple 'onclick' event handlers the display functions can be used to show further information about each page.
One thing I have done in Integrity while is for my own personal satisfaction rather than a technical one, is rather than showing the title tag from a web page, I show the URL in the page label. I think this is important from an IA point of view, as the URL should (must?) mean something to your user. It is on the page the whole time, so they see it and register it (since it is in the most prominent position in the browser) but so many site's misuse it. For example, have a look at this URL from Amazon:
What the hell is that? How about using:
A few notes of browser compatibility: Since Integrity uses SVG, an SVG capable browser is required to view the generated maps. This means hard luck for those using IE. Indeed the original Canvas version wouldn't have helped IE any either since it can't see that either. However, as I have said, Integrity is not a commercial product, it is a technical demo and used for internal testing, so this was not a consideration. Furthermore, I found that Webkit unfortunately does not have the level of SVG DOM scripting support required for Integrity, although it does appear to be getting there. Firefox and Opera however do work well with Integrity. The Gecko (Firefox) rendering engine is unbelievably slow, both for SVG and HTML in general. This is really disappointing, but hopefully it will improve with future revisions. Opera on the other hand is blazingly fast, showing exactly what I would expect from Integrity, and drawing the map (and modifying it) very quickly. Therefore I strongly suggest that, for the moment, if you fancy using Integrity, use Opera.
Finally, in this section I present a few examples of Integrity in action. The first of these is this site, which is relatively complex as there are a lot of pages (most of them dynamically generated from SpryPanel content...). Shown below is the generated site map.
The next example is of SpryPanel.com which is structurally a very simple site, with no sub-pages and a single top level navigation on all pages. The map for SpryPanel.com is shown below:
This map shows that there is an error on the purchase page. Below is the detailed information Integrity gives for this page:
As we can see there is an error in the link to the contact page. The false contact page actually shows up in Integrity because it is a soft 404 page. This means that the server generates a valid page, rather than simply returning a 404 error.
So that is how Integrity works. please give it a go and let me know what you think