Beyond the pixel — what developers can teach us about responsive design

Written for designers, let’s explore development techniques that help make our designs flexible and context-aware.

Since the dawn of web design, we have measured our websites in pixels. A, somewhat absolute, measurement that describes the smallest visual unit of a screens resolution.

I’ve developed a rather love-hate relationship with these little gremlins, certainly from an engineering point of view. On the one hand, the pixel is a ubiquitous measurement that is easy to visualise. Given its absolute nature, I know that a 2px border will be the same width on my desktop; my iPhone and on my tablet. They provide a common unit of measurement between designers and engineers that make the translation of design intent to production code pretty trivial.

On the other hand, their absoluteness can work against us. Pixels do not consider their wider context and as such, their application can result in brittle experiences; unresponsive to their environment.

Today, our users are accessing the web using portable devices in greater numbers; on mobiles, tablets, desktops, fridges, watches — the list goes on. It’s never been more important to build with flexibility and adaptiveness in Twenty years of design evolution has further encouraged us to create ever more engaging and immersive experiences.

Suffice to say, pixels alone just don’t cut it anymore.

In my experience, the key to designing great experiences is to understand the opportunities and constraints of the technology that they will be built on. For web interfaces, we are talking about CSS.

On the engineering side, advancements in CSS have given us a raft of novel methods for measuring the virtual sizes and distances of web elements. You can read all about the foundations of CSS on W3C — but I won’t dive into that in this article.

Strangely, the world of design tools has been a little slow to catch up. As someone who sits on the fence, dipping and diving into design and engineering, I’ve noticed in recent years that a delta has appeared. No longer do the pixel measures we use in the design process always map to…