Question

I need a tool to compare the design of a website, I do not want to compare the HTML code only, but the output design.

Is this even possible? also is there any opensource program of this kind?

I have searched google, but I only get one candidate so far which is an HTML Match.

Answer 1

In modern webpages the appearance is controlled by various ‘things’: html code, css styles and images at least (also javascript in some pages). Simple text-based diff programs are not enough because their output can be irrelevant to the webpage appearance (i.e. cleaning up css can show many differences but the rendered webpage remains the same).

For simpler pages HTML Match mentioned above could do the job. If I have to compare the design of two “complex” pages (including layout, space, image and text changes) I would do a two-step approach:

1. Run a diff tool on the html sources to highlight the textual content differences. Then I would modify one of the pages to show the same content as the other (in order to make the next step more accurate and ‘focused’ to show ‘real’ layout changes). Of course it works only with very similar html.
2. Load the pages in the same web browser, get some screenshots from the rendered output at fixed positions and compare the images (i.e. with ImageMagick). It should show all visual differences in the rendered output.

It is not perfect but should work.

[UPDATE] HTML Match seems dead, see this answer for an alternative solution.