(2015-02-18) Chimero The Web's Grain

Frank Chimero: The Web’s Grain. It is a companion to What Screens Want, a previous essay on designing natively for screens (2013-11-14-ChimeroWhatScreensWant) Here we have a very vanilla website. No styles, just markup. All defaults.

The first thing to notice about this page is that it is fluid—it adapts to the width of the viewport to fill it up.

The page’s fluidity leads to the second thing to notice: the page is vertical.

Elements get stacked like a layer cake by default, and it make sense—vertical stacks are much easier to adapt across all kinds of screen sizes

We use flat colors and simple gradients, because they’re lightweight, easy to draw with CSS, and can easily scale for areas of unknown proportions.

*But not every site can be a big vertical stack of bricks, can it? What happens if you place things side-by-side?

This leads us to the primary visual challenge of responsive design*

I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material.

all the wonder and magic I felt my first years on the internet. Back then, if you told me that I’d get to spend the next decade or so making things for the web—well, that would be just about the best news I could be told.

But things have changed

The closer I get to it all, the more I become confused and overwhelmed. A thing I knew so well has reached out wider and wider, only to make less and less sense.

we eventually work through the naive belief that profundity comes from complication. It simply isn’t so.

What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build with?

Meet David Hockney—artist, painter, and conflicted photographer

In the early ’80s, he took a small break from painting to pursue these mentioned photographic joiners.

They kind of look like cubist paintings

he started the project with Polaroids. You can see them tiled together here

Do you see what’s changed? Hockney stopped using Polaroids. The grid is gone, replaced by overlaid, borderless photos. Nothing cut or cropped, nothing tricky

Hockney began with an image-making practice that relied on the grid necessitated by the Polaroids’ borders and produced a rectangular final work. When he switched to normal film, he was able to overlay images in any necessary shape that accurately described the time and space of a scene

A lack of edges permeates the web at all levels

*So, designing for screens is managing this change over time, and expressing it in clear, communicative, and powerful ways.

Now, after looking at Hockney’s work for far too long, I can add another item to the list: edgelessness.*

On the left, the Mona Lisa. Cliché, but why the hell not? The painting, to me, is like designing for the printed page.

In November of 2013, I gave a talk called What Screens Want, where I tried to answer what it meant to natively design for screens. I said it was something I called flux—the capacity for things to change

Individually, the photos don’t mean much, but collectively they…

On the right, The Scrabble Game. This assemblage more closely resembles designing for a screen. Do you see it? It is control versus discovery, uniformity versus multiplicity.

Let’s make an analogy.

Suppose you’re about to start a web project with some sketches. How would you begin? You’d probably draw a box.

Whoops

So, it’s better to come up with an arrangement of elements and assign them to a size, rather than the other way around. We need to start drawing, then put the box around it. Let me show you an example.

just like Hockney’s joiners, we’re creating assemblages of elements, then associating them with the appropriate space.

The practice of assembling conflicts with most of the terminology we have in place for responsive design. Our words make it seem that we’re designing how elements break down, but really, we should be focusing on how they build up. And this concept, just like the layouts we create, can reach out a bit further.

We often think making things for the web is a process of simplifying—the hub, the dashboard, the control panel are all dreams of technology that coalesces—but things have a tendency to diverge into a multiplicity of options.

Clearly, convergence and simplicity make for poor goals. Instead, we must aim for clarity

More technology only amplifies the problems created by an abundance of it. This leads to the most pressing question: How far out will technology grow? And when does it cross the line of comfort?

To create convenience—particularly the automated convenience technology trades in—someone else must make our choices for us.

But if taken too far, convenience becomes a Trojan Horse. We cede too much control and become dependent on something we can no longer steer.

We can draw a line, and create a point of reassembly for what we’ve made.

this is not a technological response. It is an explicit act of will—an individual’s choice to change their behaviors about what to use, where to work, what to adopt, what to pay attention to

I won’t ask for peace, quiet, ease, magic or any other token that technology can’t provide—I’ve abandoned those empty promises. My wish is simple: I desire a technology of grace, one that lives well within its role.