Photoshop Driven Development, Anyone?

This afternoon I came across a presentation by Michael Tamm on his libary Fighting Layout Bugs. This is an idea that I too, have had bubbling around in my head for some time. Michael, to his credit, has decided to actually do something about it.

Michael’s library takes screenshots of sample pages during a test run and analyses the bitmap, checking for text that’s overflowing a bounding line, for example, and highlighting it. You can even use this to fail the build!

I can see these kind of checks being really useful to HTML / CSS hackers to help catch basic mistakes, but I still would love to see a test driven approach become available to front-end coders. When we drive out code from a failing tests, we test the tests as well as the code, because we see the test fail before we see it pass. What if we could do that for our markup and CSS?

I therefore propose: Photoshop-Driven Development.

We can take a PSD design for a page, and compare the design with the rendered page. If the rendered page doesn’t match the PSD, we fail the build until it does.

Of course it could never be as simple as this. Not every pixel in the PSD needs to be in the rendered page: some of it will just be dummy text that you’d never need or want to validate. Also, while a PSD is a fixed size, the way a page behaves when it resizes is an important (and potentially buggy) piece of the puzzle.

Could there be a way to highlight the parts of a PSD that are important? Could the designer use naming conventions for their layers to indicate whether they are just dummy content to be ignored, that they’re bounding boxes that need to flex, or key content that must be there—and precisely there—at all costs?

Crazy? Possible? I know I haven’t got time to play with it right now, but maybe you have?