Pixel perfection is about making a mocked up design and making the coded implementation match, which essentially boils down to every element of every design comp is exactly as you intend them to be in the final programmed product.. This can be difficult at times with different browsers, but mostly obtainable with enough time and understanding of default browser behaviors, which are getting more and more consistent as time goes on. In this post I will be discussing methods for obtaining and testing for pixel perfection in a coded implementation.

Post it notes are an amazing way to take physical world object as a way to interact with a virtual rendering. Placing post it notes makes it where alignment and pixels shifting can be determined. This is particularly useful if the use case requires the page to be refreshed. The ease of slapping a post it note to the screen makes this method super quick with no overhead.

Using the opacity of a mock overlaid directly in the page is the most sure fire way to determine if the design matches the implementation. This method takes a little more time to setup, but its value in diagnosing what is actually happening is super useful.

While not officially used to take mocks and diff them against an implementation, the npm module Regression is a great way to ensure pixel perfection is maintained throughout the implementation. How this works is it takes a baseline screen shot of a web page, then tests the present implementation and then determines the diff. This can be particularly useful in high volume applications with lots of “cooks in the kitchen” that need to maintain consistency without breaking too much stuff in the process.

In the end it really depends on what you are working on and what the testing use case is. Some people will argue that pixel perfection is something that is not required or even possible at times, and to an extent I would agree. But in the case where it is not possible, then the designer probably did not understand web design or chose something that is possible is only possible a graphic design application. With most of the modern web design paradigms being well defined (flat and material design), most designs that follows these patterns can be implemented with little deviation. For a larger enterprise-level client, pixel perfection is something that really matters as the designer involved will know their shit and have super well defined mocks. If the client is smaller and hard to please it is more about finding that middle ground that makes them happy, providing a narrative around why certain decisions were made and how they affect the overall user experience.