What does pixel perfect mean? In frontend development slang, a web page perfectly identical (to the pixel) to the design provided is called pixel perfect.

⚠️REPOST NOTE: This post is just the translation of another one I wrote for www.ilgattohanuovecode.it in 2016. Many things have changed since then, design tools have made great strides. But maybe it still makes sense.

Do I say it or don’t I say it?

Well, I’m gonna to say it. This sentence has never convinced me so much. “I’ll make for you a pixel perfect job” or “I want a pixel perfect result” or even in percentages, “80% pixel perfect”. I usually respond “Of course sir, you will have your 80% pixel perfect web page. What should I do if there is 82%?”.

Between you and me, pixel perfect is crazy bullshit *.

The cathode ray tube era is over

Nowadays both the designer and the developer deal with a number of devices that was unimaginable a few years ago: different sizes, different resolutions, different supported technologies. A web page cannot be identical on all devices and no human designer is capable of producing as many files as there are existing screens. Even if he could, he couldn’t replicate all possible interactions on each of these screens.

A huge waste of time

Even a broken clock tells the exact time twice a day. Let’s say that our page is identical to the two/three resolutions for which it was designed.

How long did it take? First someone designed the entire site at least for desktop, tablet and mobile. If it’s a complex platform, he will have designed many pages. How can you calculate 80% pixel perfect if there is no design for the password recovery page? But it’s not enough. Each file contains different layers for different page states: empty cart, full cart, what happens when the cart has many items? and when it has few?

An expert designer can foresee these cases but designing them all in such a way as to allow the desired pixel perfect is extremely expensive.

In our story let’s say we have a very experienced graphic designer with a lot of free time who actually produced 5G of design.

Well, the design was passed to the developer. He patiently began to measure all elements, all line spacing and finally, page by page, he created our pixel perfect site on three devices.

I’ll leave to you the answer to the question of how long it took, reminding you that time has a cost, a high cost.

Come on! at least the customer will be happy

Uhm.. no, I’m afraid not. A design is not a web page and almost never satisfies all client’s expectations. It’s not the fault of either the graphic designer or the client, but be sure that when the design becomes reality, infinite new needs will arise: contents, images, SEO, interactions, devices not considered…

What if the user squeezes the window? what will happen to all those elements stuck together at the pixel?

Long story short, at this point more time is needed from both the graphic designer and the developer, more time means more money. Hey! we won’t have run out of budget right?

Other Options?

Let’s say that putting the page online is not the end of the work but the beginning, the best would be to publish the page on staging when both the graphic designer and the developer have still invested little time on the project.

A good way would be to start the development part when only a style guide, consisting of a few pages and all the GUI elements, has been designed. At this point, a quick but complete prototype could be put on staging and data entry can already be done.

This is the starting point for a new design phase that involves not only the graphic designer but also the client, the SEO expert and the marketing team.

If we don’t think about a PSD but about a real application with real contents on real devices, all the more concrete needs of the project will be raised: SEO, usability, navigation…

Something entirely different from measuring at the pixel elements that maybe in the final version will no longer exist or will be completely changed.

Such an approach raises issues in the estimations. How can you quantify a job if you don’t have all the information from the beginning?

Well I don’t have any clear answers on this. Estimations will probably also have to be divided into small parts.

* Literal translation of an Italian vulgar expression taken from a 1970s cult movie (“Il secondo tragico Fantozzi”). Also, the following image is from that movie. I apologize to my English-speaking readers for the incomprehensible quote