Wednesday, 22 October 2008

Pixel Perfect - an amazing tool

I colleague recently told me about a firebug plugin called Pixel Perfect. I thought the idea sounded good so had a look - creating looks of concern from the surrounding developers who already think I pixel push too much already. I was amazed. This simple tool creates another tab in your Firebug extension and allows you to overlay a jpeg visual in the actual browser. This has two benefits:

1/From a designer/bug checking point of view it allows you to overlay the visual and see what is out of place.

2/From a developers point of view it ensures precision by allowing them to overlay the visual when creating a layout, lower the opacity so they can see what they are coding below and ensure the visuals are met exactly. This will result in fewer visual issues needing to be fixed at the end of the project.

This tool seems to be feared by many developers who are happy enough to make it close enough to the design. However, they know deep down that the designer will only come along and say move that 2px up please so they might as well start harnessing the power of this tool and improve their accuracy and standard before it's spotted.


Sebastian Deutsch said...

We released a similar plugin which is entirely written in javascript and though browser agnostic. Maybe it’s interesting for you: