Introducing The Pixel Perfect Firebug Extension

Ok designers, this one is for you... Now you can test the skills of your web developers and see how close they can keep the integrity of your designs.

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

[img_assist|nid=4635|title=|desc=|link=none|align=none|width=575|height=168]

How to install and use the extension

Introduction

By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action. Follow the instructions below to get started.

Installing the extension

Pixel Perfect requires Firefox version 3.0.*, and the latest version of Firebug. To install the Pixel Perfect Extension on Firefox:

• Go to the Pixel Perfect homepage here*
• Click on the "Download Plugin" link.
• Firefox will ask if you want to allow the Pixel Perfect Extension -- click on "Allow" to proceed.
• Firefox will ask if you want to install the Pixel Perfect Extension -- click on "Install Now" to proceed.
• Restart Firefox when prompted to complete installation.
• You should see Pixel Perfect Extension's icon in the browser statusbar located next to the Firebug icon at the bottom right of the Firefox browser window (Pictured below).

[img_assist|nid=4636|title=|desc=|link=none|align=none|width=159|height=23]

* You can also download the extension from the Mozilla Add-ons site here.

Using the Pixel Perfect panel

Load up a sample website that you would like to test the plugin on and click on the icon to launch the Pixel Perfect panel.

Add overlay

To load your design compositions into the overlay list click the "Add overlay" button. A standard file browser will appear and you may select any standard graphic format that can be loaded into a regular XHTML page (jpg, png, etc). You can add as many overlay files as you like.

[img_assist|nid=4637|title=|desc=|link=none|align=none|width=425|height=221]

Overlay List

Click on the square box located to the left of your overlay icon to toggle the overlay on. The overlay should now appear in the main browser window. By default, the overlay is positioned to absolute top left. You can delete any overlay by clicking on the trash can located to the right of the overlay icon.

[img_assist|nid=4638|title=|desc=|link=none|align=none|width=425|height=221]

Opacity

You can change the opacity to make your composition either more transparent or less transparent. Making the composition more transparent will allow you to see your changes on the actual developed HTML below the composition. Less transparency is useful for toggling the composition on and off to see pixel shifts. By default the opacity will be set to 0.5.

Position

The move controls are intended to be used for fine tuning. Initially when you toggle the overlay on, you can click and drag the overlay to roughly position it overtop of your developed HTML. Use the move controls to move the overlay those last few pixels.

Options menu

Here you will find various configuration options. Currently there are two:

• Hide statusbar info - Selecting this option will hide the Pixel Perfect icon in the status bar. This can be useful if you have many plugins installed and your status bar is getting cluttered. You can then access Pixel Perfect by clicking the Firebug icon.
• Hide overlay when inspecting - By default, your overlay will become invisible when you switch to a Firebug tab (ie: HTML view). This allows you to inspect your HTML and make changes without having the overlay block inspection. However, you can keep the overlay on at all times by turning this option off. This can be useful but it may cause problems when inspecting HTML with Firebug. Your overlay could prevent you from mousing over your HTML elements.

Demonstration

Watch the video below for a quick demonstration on how we used Pixel Perfect to correct layout issues when developing www.pixelperfectplugin.com.

Additional Resources

• Plugin homepage - http://www.pixelperfectplugin.com
• Bugs/Issues - http://code.google.com/p/pixelperfectplugin/
• Google Groups - http://groups.google.com/group/pixelperfect

Developers bio’s

Lorne Markham

Designer and Web developer. Discovered this idea while working at Critical Mass.

Mike Buckley

Agile software developer. Coded the javascript for Pixel Perfect.