Where did good old Pixel Perfection go?

In this article, we are exploring reasons why pixel perfection doesn’t exist and what should you (both as a client and as a developer) look for when design gets turned into reality.

What is Pixel Perfection?

It’s really something that each individual knows for itself. Some of them might look at the right thing. Yet, someone might expect to have all the pixels on the screen as same as on the design proposal. Nevertheless, be sure to ask them what do they mean by the pixel-perfect website.

On a more formal note, the website is considered pixel-perfect when it looks exactly the same as the design. This was a sign of quality for years until some new factors came into the web development process. Let’s see where did pixel perfection go in past years.

Responsiveness killed the Pixel Perfection

The moment when pixel perfection died was the moment when phones got IP addresses. In other words, the appearance of smartphones and tablets on the World Wide Web has ruined the meaning of pixel perfection. Before that moment, most of the websites were only designed for 16:9 and 4:3 screens (many of them just for 4:3 ratio).

With all-new screen dimensions came a much bigger issue – how to get websites to look perfect both on our phones, tablets, and PC screens? The solution was simple – get the gun and kill the pixel perfection.

It is a common practice today for a designer to create mockups for desktop and mobile screens. The tablet-sized ones are often expected to combine both desktop and mobile mockups or just a mobile mockup since this one has touch screens in mind. Making all three (or even more) screens pixel perfect is nearly impossible. Why so? Because not all phones/tablets/displays are the same.

Your screen is not perfect

Many clients can drive developers crazy with one question: ‘Why is it looking much bigger/smaller on my screen?’ I’ll try to explain how this question infuriates developers.

As I wrote before – there are different screen proportions, and thereby different screen resolutions. If the design is made with 1440px width, and your screen is 1920px wide, don’t expect the design to be equal. Instead, look for proportions. For example, check if the font size of the main title is proportional to the font size of the subtitle. Be aware that many devices have scaling options set to a different percentage. The default value of scaling is 100%.

Anything higher than 100% increases your user interface elements’ size. This affects your OS layout, but also the layout of the websites you visit with your device. Be sure to check these ones out, as many devices come with different scaling percentages set by default. If you see an issue regarding the layout on your scaled screen, then that’s a legit issue to report. If the sizes of elements between your 10-inch tablet and 21-inch screen are different and not the same as on the design, then there’s no issue. Why so? Because there’s a big chance these two devices operate on different screen resolutions, thereby they should have the web content adapted to their resolution. In other words, the website should be responsive regarding the screen size.

What should you look for when you want a perfect (and responsive) website?

The best advice I can give when reviewing and comparing the website with the design is to follow your intuition. If you have a hunch that the layout doesn’t look good, say it! If your experience while using the website on different screens looks good, but not equal to the design – then be sure that is a feature, not a bug! On the other hand, if the website differs a lot from the design mockup (e.g. the blog posts look completely different from the design), then that’s an issue. A developer is obligated to follow the design guidelines.

To wrap it up, we shouldn’t be looking for pixel-perfect websites anymore. They are getting extinct day by day for the sake of responsiveness. Perfection is out, proportions are in.