Why developers rarely produce pixel-perfect work

I’ve been designing for more than a decade now and I’ve only ever met maybe 1 or 2 developers who can implement a design to specs 100% with pixel-perfection. These people are unicorns and are super hard to find. Recently I had some time to reflect on why that is

Designers not being familiar with popular frameworks

To say that developers are to blame would be very unfair.

For a design to be implemented with perfection, it would need to be designed with perfection. Designers are 1/2 of the problem. They (and when I say “they” I mean me too, I’ve been guilty of it in the past) design without the knowledge of the frameworks being used to implement the design.

Sometimes a fixed width or some other variable part of the developer’s framework just doesn’t align with the design and (rightfully so) developer will fall back on the variables that came with the framework. This breaks pixel-perfection. At times this is fine too, there’s nothing wrong with not reinventing the wheel and using pre-defined classes.

Tailwind is a perfect example of this - why create your own variables when plenty of options have already been created for you? This implies that the designer must know Tailwind CSS and the exact classes available to them - a near-impossible task unless you’ve developed layouts with this framework.

Because most designers are not developers, this automatically creates the mismatch in design and production. Developers will do their best to match the design, but some things are just not going to line up.

Designers fail to consider paddings and margins.

I am guilty of this to this day. On a good day, I’ll remember that columns have margins and some container classes will have paddings. Sometimes the two don’t play well together and you have to do some hacky stuff to make it work. Luckily, Tailwind CSS has made this a lot less of a problem with classes that can be highly tuned to specific situations. Other frameworks - tough luck.

Context switching is very hard

It takes a designer who is also a developer to realize just how difficult it is to switch context between design specs and code. I’m fortunate to learn first-hand having coded HTML since the age of dawn. You’d think if I designed the thing, I should be able to make it pixel-perfect! But, alas, even having complete control over the design process, you just get lost in the code.

Code introduces bugs, bugs introduce frustration, frustration introduces searching for a solution. The process of development places an extreme focus on code and making things work. Sometimes this process takes a lot longer than you’d like it to so when you’re finally done, you just want to be done.

Imaging having solved some difficult layout problem in your code, only to learn that it doesn’t quite work on some resolution. Some time later you’re FINALLY done. Exhausted. Yet, you forgot to check for a good match between the design and the coded version.

It takes a highly skilled developer who also has a passion for pixel perfection to breeze through the process and get things looking just right.

The “good enough” mindset

For most things in life “good enough” is actually good enough. You’re probably thinking of the 80/20 rule - 80% of the outcome comes from 20% of the effort.

“If it works, it works”

”If it ain’t broken, don’t fix it”

We have these saying for a reason. When you get to something that looks good enough, it’s very tempting to just stop spending any more time on it. Does it really matter if it’s 8 pixels off? If the margin is 32px vs the intended 24?

Diminishing returns are a thing. The more effort you put into something having already exhausted yourself, the fewer returns you’ll see.

Development is no different. Once something looks passable, you leave it alone.

It takes a developer who is also a designer to really push to 100%.

Sometimes a perfectionist will do.

I’m not saying good enough is not good enough - in most cases it is and striving for perfection is probably not worth it.

The only times when I do strive for perfection is when the product will be used as a basis for other designs - for example, as a template. This is when it really matters.

Difficult to concentrate

Humans are not robots and are prone to inaccuracies. Pixel-perfect design requires a great amount of concentration that’s not always easy to achieve. Life interrupts. That sun in your eyes early in the morning. The mower in your neighbors’ yard. The smell of freshly made coffee begging to be poured. That Twitter tab. The bowel movement 😱

Being in the moment, completely concentrated, is a blessing. And when it happens, the other issues listed above can derail your ability to create perfectly translated designs.

This is why the QA process exists - to catch inaccuracies after the fact. Developers can finally go into pixel-matching mode and implement the necessary tweaks.

If I had to recap this:

• It’s not always the developer’s fault. Sometimes the designer screws up.
• It’s ok not to be pixel-perfect, most of the time you’ll get away with it.
• Context switching between code and pixel-checking is incredibly hard - I’ve witnessed it first hand many times.
• Most of the time good enough is good enough.
• Life is full of distractions and it’s hard to be perfectly concentrated.
• Even when you are in the zone, you’ll inevitably veer off track and slip up. This is normal and part of being a human.
• QA process is your friend.