· 5 min read

Why Web Design Shouldn’t Chase Pixel Perfect

# Frontend
This article was auto-translated from Chinese. Some nuances may be lost in translation.

We’re always optimizing for whatever’s most important to us right now

Only pay attention to Pixel Perfect when it really matters; otherwise, it often leads to a lose-lose situation.

I think there are two fundamental reasons for this issue:

  • Some UI designers don’t have a web background, which makes it easy for them to design websites with a graphic design mindset
  • They want the design mockup to match the final result exactly

Why graphic design can’t be directly applied to the web

Graphic design usually has fixed dimensions and layout, so the perspective is completely different. Typography is also often laid out using fixed sizes such as pt.

However, the web is inherently interactive and variable in size:

  • The user’s viewport is not fixed
  • The user’s device is not fixed
  • The user’s font is not fixed
  • The user’s scale settings are not fixed
  • Web pages can scroll horizontally and vertically
  • Web pages have interactive components such as buttons and input fields
  • On top of that, there are hover, focus states, and so on

Font size and even typeface can also be affected by user settings. (Unless you give up and render text as images.)

Once you adopt a Pixel Perfect mindset, what that reflects in the product is optimizing for a specific size, rather than optimizing to adapt to multiple devices.

Some examples

Layout across different screen widths

For example, using CSS Grid auto-fill and auto-fit to create a layout that “fills the screen (or container) width” can be written like this.

In some cases, especially when you want to make full use of wide screens, this kind of UI is particularly useful:

But this kind of UI is very hard to define clearly in a design mockup, especially for designers who come from a non-web UI background. If you then pursue Pixel Perfect, you end up directly giving up options that may provide a better user experience.

Tables

Table design is a deep subject. I wrote about it in a previous article: here. There are some details to pay attention to when designing tables on the web, such as:

  • In general, text should be left-aligned, while numbers should be right-aligned
  • When numbers may change, you can also add font-variant-numeric: tabular-nums (if the font supports it) to prevent the width from shifting constantly as the numbers change

Details like these may not be implemented if the designer doesn’t understand them and the developer doesn’t notice them either.

vh/vw units

In CSS, vh/vw are actually very useful units, but if you’re constrained by a Pixel Perfect mindset, you may end up just using a fixed value for the sake of convenience and moving on.

Browser and OS settings, etc.

In iOS Safari, you can choose where the address bar should be placed. After iOS 12, there is the so-called Safe Area that can be used for layout or visual effects. In situations like this, if you want to list every device one by one, it becomes a huge burden for both development and design.

What do we really want?

We need to know what both sides are aiming for. From the design side, they want the UI in the mockup to be presented perfectly; from the development side, they want to meet UI requirements in an easy-to-maintain, responsive way.

What we really want is a design system. One that only needs a few defined spacing, margin, and typography configurations, and can then be applied across different devices.

RWD remains as relevant as ever. CSS has improved a lot, and compared with ten years ago, it is much easier to do this well.

The solution

Recently I’ve been following a Design Engineer – jhey – on Twitter. He currently works as a Design Engineer at Shopify, and previously at Vercel and Google.

His CSS skills are superb. Many UI animations and interactions require long-term attention to CSS trends and a lot of creativity to achieve. It’s precisely because he is so familiar with CSS that he can create vivid effects on the web.

I think an ideal UI designer (for the web) should at least be familiar with CSS. However, in Taiwan, that may be difficult to achieve:

  • Companies usually don’t prioritize UI, so there isn’t such a role
  • Even if there is, it’s usually focused on UI design, and may not require familiarity with CSS or the web
  • The salary expectations are high, so it’s hard to come by

At my previous company, I was fortunate to work with some designers who were very knowledgeable about web UI. Although writing CSS was often a pain, it was also a very interesting and valuable experience.