What developers can teach us about responsive design

Did you know TNW Conference has a track fully dedicated to exploring new design trends this year? Check out the full ‘Sprint‘ program here.

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 visualize. Given its absolute nature, I know that a 2px border will be the same width on my desktop, my iPhone, and 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.

Read: [Government developers aren’t just nerds]

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 those we use in the engineering process. The common language now needs translation.

Ultimately, the key to good design is in understanding the opportunities and constraints of the technology that supports it. So I’m going to walk through the measurements I use on a day to day basis in the hope that they may give you a little inspiration for your next design. Here we go.

Percentage (%)

Percentages are the fundamental relative measurement. As you might imagine, a valid percentage value is between 0% and 100% and is in most cases relative to the parent.

A child of width:100% will span the full width of the parent. With a parent whose font size is 16px , a child can obtain a 14px by setting its font size to 87.5% .

Up until a few years ago, percentages were heavily used to support grid frameworks, including those pioneered by the likes of Twitter Bootstrap . The problem with percentages is that they can be tricky to use in practice and it’s not always easy to diagnose their behavior.

Recent advances in the CSS specification that have introduced exciting new approaches to layout (flexbox and grid) have helped us to avoid setting fixed percentage widths on elements. As such, I rarely use this measurement but have included it for completeness.

Ephemeral units (EM, REM)

Ephemeral units (EMs) and Root Ephemeral units (REMs) are relative measures that take their base value from the font-size setting. The value we select is multiplied by that base value.

Like percentages, EMs are locked to their parent. REMs, on the other hand, refers to the base font size we apply to the root of the document. At first glance, this may seem a little odd, yes, but they are incredibly useful.

EMs are great for sizing UI elements (an icon for instance) with respect to adjacent text. Assuming the font size of the parent is set to 16px, then an icon height of 1em will match the height of the text.

REMs are great for establishing harmony and consistency across typography and whitespace. A root font-size of 16px and a standard white spacing value of 0.5rem establishes an 8px grid — wow.

Furthermore, maintaining that consistency as your designs grow is simpler. Should you ever need to amend the typography and spacing stacks at a later date, you can do so by simply tweaking the root font size.

EMs are a little niche but very practical. REMs are a staple that I use day in, day out.

Viewport units (VH, VW)

Sometimes, it is helpful to know the height or width of the viewport (the browser screen size). This is most often the case when we’re creating immersive layouts that expand to fill portions of the screen.

CSS gives us two simple measures, the viewport width (VW) and its height (VH). The value we enter is taken as a percentage of either the width or height, such that 75vh represents 75% of the viewport height.

Character units

This one is fairly new to me. Character units (CH) are fairly niche and typically used to set the width of paragraphs to help improve legibility and create content that is comfortable to consume and easy to scan.

A single character unit width: 1ch should result in a paragraph where every character is placed on a new line– and it does. Although in reality, the ch unit isn’t really counting characters, but instead estimating the number of characters per line, by taking the width of the zero character in any given typeface and multiplying it by the value we provide.

WCAG Accessibility guidelines suggest a maximum of 80 characters/glyphs per line and 40 characters per line for CJK glyphs. I would even suggest this is high — looking at this article we are reading around 70 characters per line. You can read more on legibility, here.

Fractional units (FR)

Earlier I spoke about percentages and, specifically, how in reality they are a bit of a pain in the arse to use.

Say we want to create a layout, based on an 8 column grid. There are two panels; the main content area that fills 5 of the 8 columns and a side panel that fills the remaining 3. To use percentages, we must manually calculate 5/8 and 3/8.

.main-area { width: 62.5% }
.sidebar { width: 37.5% }

Every time we add a new panel, we must go back and recalculate each of these values to redistribute the space available. Oy vey!

// Using Percentages
.main-area { width: 50% }
.sidebar { width: 25% }
.new-panel { width: 25% }

Fractional units, here, are our savior. Quite simply, they are used as part of the wrapping (parent) container to define the segmentation of the interior space. Here is a quick example using the CSS grid framework:

• One element of width 1fr will span the full width of a container
• Two elements of width 1fr will share the space equally
• Two elements, one of width 1fr and the other of 2fr will receive 1/3 and 2/3 of the space, respectively

Put simply, we use fr to define the top number of the fraction. The bottom number of the fraction is found by adding together each of those values.

// Using Fractional units, with two panels
.wrapper {
   display: grid;
   grid-template-columns: 5fr 3fr;
}// Using Fractional units, changing to three panels
.wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
}

As you can see in the example above, the fractional units have made it incredibly simple to expand and adapt our layout to fit our new requirements.

As someone who has closely followed the evolution of the internet, I’m so encouraged by the tools and technologies we have available to us today.

I’ve always believed that the best designs are those that really take into account the tools and technologies that enable them. If you are new to the world of engineering, I really hope that this article will inspire you to design ever-more immersive experiences with the confidence that CSS has your back!

>This article was originally published on uxdesign.cc