responsive

The Collapse of the “Pixel-Perfect” World

2014 年 3 月 10 日

Recently I introduced responsiveness to the new version of my web app CoverBox, the creating of which revealed me to some ideas that I wish to record.

Thinking in Pixels

As a designer in the digital world, no matter what technique we use, or what design tool we work with, everything we create eventually turns into a pile of pixels.

As a result, I managed to form a habit of understanding everything in terms of pixels long ago. Since then I have been drawing in pixels, measuring in pixels, I set the font size of the body text to 16px, and the width of my webpage to 960px according to some “minimum screen resolution” theory. If everything is going to display as pixels to my users finally, isn’t it ideal to define them as what they are?

Coming of the Nightmare

Then there came a day since when you could barely make any assumption about the size of screen on a user’s device. Smart phones and tablets became too popular to oversee, and the various sizes of screens and even different pixel density made it nearly impossible for a designer or a developer to offer a “pixel-perfect” solution for each device. A website looked like a charm on your laptop may appear unreadable on your phone. Some pixel-based practices that had worked so well now started to stand in our way.

Thinking in Relativity

We can’t be defeated that easily. How we fight back is to switch to another way of thinking.

The end form of any visual element is still pixels obviously, but now instead of directly manipulating pixels, we let the end devices to render for us. What we do is to define every element in relative to each other, which I think, is the core idea of responsive design.

We start to define the size of elements in percentage and ‘em’, a unit that I haven’t used for years. And rather apparently, a single layout applying to every screen size may not be good enough, so this is where media query comes in handy. What’s important is that now the conversion from relative measurements to real pixels is a task that belongs to the end devices instead of us.

Some Thoughts on Flat Style

Once I thought the “dying” of skeumorphism and the prospering of the flat style was merely a switching of trend. It was just that people were tired of one style and wanted something fresh. But now, some new ideas start to appear in my mind.

Skeumorphism, while looking good, is relying heavily on pixels. Typical skeumorphism embraces rich textures, custom-shaped shadows, glares, etc., which are all implemented based on bitmap images. Therefore, such style has a limitation in responsiveness naturally. But flat style, in contrast, is advantageous in terms of responsiveness as it is highly pixel-independent.

I’ve seen many designers frown since iOS7 released. I’m one of them actually, and till this day I still have problem staring straight at some of the iOS7 icons. But I have to admit that despite some specific execution of iOS7 that I think needs improvement, the decision to change to a flatter UI style is very insightful. At least it will make it a lot easier when Apple releases that rumoured bigger iPhone and more devices that might come in different screen sizes in the future. The transition will be a lot smoother as a pixel-independent UI will even look gorgeous on a “double-retina” screen as its nature.

Yes, maybe a “pixel-perfect” experience on a user’s side is not something we can perfectly ensure any more. But on the bright side, the world is going to be closer to perfection in general.

Leave a Comment