Making your site Pixel Perfect

By Nathan Donaldson

Tags: Design , Development

Here at Boost we lovingly handcraft our HTML and CSS when implementing our designs. We use text editors rather than programs like Dreamweaver or Frontpage. We find it’s faster, and it enables us to produce clean, correct code that’s easy to integrate.

Our process starts with the production of the designs in either Photoshop or Fireworks. Once these are approved by our client, we convert them to HTML/CSS templates before integrating them with the web application or content management system.

At the HTML/CSS stage we use two tools to ensure the design is being accurately implemented: Pixel Perfect and Litmus. Today I’ll focus on Pixel Perfect – I’ll talk about Litmus another time.

What is Pixel Perfect?

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition on top of the developed HTML. Pixel Perfect is built on top of Firebug (another Firefox extension), so you will need to have Firebug installed and active to use Pixel Perfect.

Why Pixel Perfect?

We strive to ensure that the integrity of the design is kept as it is implemented.

Because of the way different that browser and operating systems render HTML text, it is practically impossible to get sites rendering identically across all browsers and operating systems that we support. Using tools like Pixel Perfect helps us to make the differences all but imperceptible.

With considerable effort going into our design at Boost, it is important that this is reflected in the final product. While a small gap here and a slightly different text size there seem like small issues in the rough and tumble of building a site, they all add up. What was once a tight, balanced and considered solution to a design problem can turn out as ramshackle, unpolished and unprofessional.

Before we found Pixel Perfect we tried a number of different tools including Afloat, which makes the OS X Preview application partially transparent, but this approach was less flexible and didn’t work as well.

What are the benefits of using Pixel Perfect?

Using Pixel Perfect in our HTML/CSS production workflow provides a number of tangible benefits, including:

• reduced time and cost during the quality assurance process
• increased speed of development of the HTML/CSS
• creating closer working relationships between designers and developers
• a better looking website of which we can all be proud.

Run, don’t walk, to get Pixel Perfect today

Grab your copy, for free, from: http://www.pixelperfectplugin.com/

And don’t forget to give a donation if you want to see this great plugin grow and flourish.