Thursday, August 14, 2008

Pixel perfect with Firebug

Image:Firebug-pixelperfect.png


Firebug gives you control to change the position of elements and see the changes immediately in the browser. No Save-Cmd-Tab-Reload going on here. One thing missing from Firebug is the ability to see a mockup image of a site overlayed on the actual site. This feature exists in a Firebug extension called PixelPerfect.

Some HTML purists will tell you that attempting to obtain true pixel perfection will inevitably result in messy code. But I say if it's possible to easily make your web page look exactly like you designed it, go forth and be a perfectionist.

With PixelPerfect, you set an overlay graphic and give it a transparency level. Then you can make CSS adjustments, check them against your mockup, and then make a few more tweaks.