Pixel (in)Perfect

TLDR;

Forget about precision on webdesign. Since the iPhone, the web became such a chaotic medium it is unrealistic to expect a pixel perfect design. A website that doesn’t look “broken” is already a good enough.

Introduction

The world of design is changing in ways that are both exciting and scary. It’s exciting because we have an unprecedented ability to create widely-accessible experiences that could never have existed before. It’s scary because we no longer know what good design looks like, so we need to find ways to discover it together.

Old paradigm of design

The old paradigm of design was predictable. Designers bragged about their precision and the “difference” it would make in moving an element half a mm to the left. Even in webdesign, while still in its infancy, we were still trying to achieve these very precise designs. That was back when all computer monitors were 800x600, and then 1024x768, etc. The evolution was still fairly slow. Then the iPhone arrived…

Design after the iPhone

Once the iPhone was launched, everything changed. Suddenly web-based design became much more important because people had access to it everywhere: on their phones, tablets and laptops. A few years later, the proliferation of screens around us in all shapes and sizes is just overwhelming. Making it impossible to achieve precision for any kind of screen based design.

On top of all this craziness, one thing became certain: the web became a very chaotic and unpredictable medium. Complete control over our designs became absolutely unattainable. You can never predict what your visitors will see. Device capabilities, screen sizes, orientation, operating systems, user preferences, browsers, and even plugins could affect your design.

The new paradigm - Embracing chaos

To begin with, this new paradigm forces UX/UI designers to work in a more systematic way. We need to focus our attention on making sure our designs will never look “broken”, making sure our interfaces will degrade gracefully under an infinite number of screens, resolutions, systems, browsers, and user preferences.

Logical alignments and anchoring elements replaced precision positioning; defining proportions and ratios became more important than defining widths and heights; contrast became more important than the actual colours...[and] instead of micro-managing how the browsers will render each element, we are now in charge of loosely suggesting how the browser should organize the elements on the screens.

Users Tolerance

We have become accustomed to small glitches on interfaces, even from huge companies such as Google. This means that your audience will also be tolerant of small issues on your websites. It is much more valuable to have something "good enough" live than to have something "almost perfect" offline, waiting for that very last revision round. It is important to focus on delivering a functional and usable product, rather than striving for perfection, which can be expensive and time-consuming, ultimately leading to delays in getting the product live.

Conclusion

This “new paradigm” is not really new. We’ve been living with it for close to 15 years now. The reason I decided to write this article is to help the people involved in the process of website production to understand some of the technical constraints we face while designing for the web.