9

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.

Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43
Adyt
  • 1,442
  • 7
  • 26
  • 38
  • What excatly are you after? A diff tool or a visual comparison of how your website will work in different browsers – Josh Hunt Jun 30 '09 at 02:43
  • Sounds like he's looking for a visual comparison tool. "the thing is i dont want to compare the code html, but the output design." – Sasha Chedygov Jun 30 '09 at 04:47
  • 2
    Sounds like this question: http://stackoverflow.com/questions/31722/anyone-have-a-diff-algorithm-for-rendered-html – rjmunro Nov 17 '11 at 11:38

8 Answers8

6

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.

Community
  • 1
  • 1
Csaba_H
  • 8,215
  • 1
  • 41
  • 42
  • HTML Match website is [dead](https://archive.is/2016.10.09/http://isup.me/http://www.htmlmatch.com/) ([*2003, †2016](https://web.archive.org/web/*/http://www.htmlmatch.com/)) but I’ve just found surviving download sites: [Tucows](http://www.tucows.com/preview/325919/HTML-Match), [Archive](https://archive.org/details/tucows_325919_HTML_Match) and the surviving company website: [Salty Brine Software](http://www.saltybrine.com/) (“since 1993”). – 7vujy0f0hy Mar 12 '17 at 13:29
3

Solution: “compare web pages” tool. (“We've been doing it since 1999. It's free.”)

Example output (comparing pages for TP-Link USB hub model UH700 and UH720):

enter image description here

7vujy0f0hy
  • 8,741
  • 1
  • 28
  • 33
1

Under windows:

http://www.htmlmatch.com/

the.jxc
  • 3,373
  • 21
  • 21
  • The website is now [dead](https://archive.is/2016.10.09/http://isup.me/http://www.htmlmatch.com/) ([*2003, †2016](https://web.archive.org/web/*/http://www.htmlmatch.com/)). Working download sites: [Tucows](http://www.tucows.com/preview/325919/HTML-Match), [Archive](https://archive.org/details/tucows_325919_HTML_Match). Surviving company website: [Salty Brine Software](http://www.saltybrine.com/) (“since 1993”). – 7vujy0f0hy Mar 12 '17 at 13:19
1

If you are using KDE, you can use Kompare or KDiff3.

However, if you want to view how your web page looks in different browsers in different operating systems, BrowserShots can used.

Alan Haggai Alavi
  • 72,802
  • 19
  • 102
  • 127
1

There are these online tools - that aren't brilliant:

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

I like the look of daisydiff but have not used it in anger: http://code.google.com/p/daisydiff/

Adam Butler
  • 3,023
  • 5
  • 35
  • 40
  • @Quentin http://www.aaronsw.com/2002/diff/ does exactly what OP's HTML Match does but is an online while HTML Match is an offline tool. – tobsen Oct 02 '12 at 12:25
0

The keyword you're looking for is "diff".

A good program that can show you the differences between two files (html markup or other) would be ExamDiff for windows.

Wadih M.
  • 12,810
  • 7
  • 47
  • 57
  • 3
    "the thing is i dont want to compare the code html, but the output design." -- So diff isn't want he/she is looking for. – Sasha Chedygov Jun 30 '09 at 04:53
  • @SashaChedygov you could call it "rendered diff", it should be pretty much a good keyword (although I still could find no windows free standalone for mhtml). – cregox May 05 '17 at 12:56
0

I'm working on one and i tell you it's hard and there is nothing on the market. Maybe Google and Bing have something inhouse. You can use some image comparison tools which identify rectangle regions of changed images. This is for example a part of all modern video compression but you have to do it for different regions of the webpage (the nav bar section, the main article, the region filtered by an ad-blocker etc.) as some of them may change and it's still considered the same content on the page.

As i said very complex problem with no exact solution.

The other is going the non visual way and just compare the resulting computed computer styles of each html element. You have to hack the browser to get access to the layout tree. There is also no official API or existing library/program/hack/patch for it.

Lothar
  • 12,537
  • 6
  • 72
  • 121
  • If the html segment is the same why would you need to diff the image representation of it? – Pacerier Jun 21 '17 at 12:51
  • You can do this to filter the regular response by response changing customized ad images or the recommended other items teaser images. If you do an image compare of a complete screenshot they get into your way, you have to compare fragments. There are also other customized stuff like view/like counters, login credentials etc. And HTML + CSS isn't a way to go unless you sure the page doesn't use javascript to change the DOM. If you compare CSS + DOM you can go with it. But this can generate false positives. – Lothar Jun 22 '17 at 07:29
0

You can make a visual comparison with Araxis Merge Pro by taking screen output with systems like BrowserStack, Cross Browser, PhantomJS

Rustem Hesenov
  • 429
  • 5
  • 6