These days I have been working on the static page for the company I’m working for. The main job is to make current static page as close as the mockup that UX designer provided. It is normally called ‘Pixel Perfect’.

Honestly speaking, pixel perfect development has been causing me headache. Making design perfect is not always easy thing. On the other hand, I have learned a couple of things. Pixel Perfect development is mandatory skill for front end developer.

Why is pixel perfect important?

As the name says, we have to make website PERFECT. If you are not design person, you might not care about spacing between the title and the component below. Actually it matters a lot. Designer intentionally create best space between A and B in order user to be able to see perfect website and navigate it easily.

So it’s designer’s job to create Pixel Perfect Design using Photoshop, Illustrator or InDesign. Then converting pixel perfect mockup to code is front end developer’s job.

Useful tools to check if your code is pixel perfect

We use several useful tools for pixel perfect development in my company. All of them are indispensable. Let me share these tools with you.

Perfect Pixel (Google Chrome plugin)

This is a powerful tool to see the difference between mockup from the designer and website that front end developer created.

Once you install plugin from google chrome store, you are going to see the ‘Perfect Pixel Icon’ on the right navbar. When you click, the drop zone of image will show up. You just have to drag&drop your mockup.

Then that mockup will be appear above your website. You can compare the mockup and your website. The opacity and the size is adjustable.

If you use firefox, similar pixel perfect tool is available as add-on.

Ruler (Google Chrome plugin)

Second tool I use for perfect pixel development is Ruler. Once you enable the plugin, you will be able to measure any website you want to.By measuring the page, you can compare it with the mockup you are using.

One of drawback of this plugin is that it doesn’t work correctly when you set ‘mobile’ or ‘tablet’ screen from inspection tool.

So when I want to measure mobile or tablet screen, I use another web ruler which calls Edge: The Web Ruler. Unlike Ruler plugin, this one looks like a physical ruler.

You can change the position of ruler so it is measure width and height as you like.

Browser comparison tool

Last but not least, we use browser comparison tool which calls BrowserStack. Using this plugin, you are able to test with browser that you don’t have. For instance, it is hard to setup Internet Explorer if you use Macbook.

If you use BrowserStack, you can check your local environment with IE or Safari. It is very convenient tool to test all browser that cover in the service.

I hope this article help you to understand the importance of pixel perfect development and both developer and designer pay a lot of attention to deliver best and perfect website to you!