Pursuing Better Fluid Layouts

a post on Process

04/04/14 · Penarth, Wales · Sometime last Spring I started realizing that grid-based design was getting in the way of good fluid layout. The evidence kept hitting me in the face every time some big commercial site relaunched with a responsive design. At first blush, all would seem orderly, but after tugging at the corners a bit, and scrolling deeper into the content, I’d see cracks surfacing in the underlying structure. The grids were not holding up.

This was troubling, mostly because I run an app called Gridset. I’m kinda invested in grids. Yet everyday more evidence was launching that, to me, indicted grid-based design as incompatible with a fluid canvas. But grids, as a tool, have all sorts of well established benefits. Can they be salvaged? Can we adapt grid methods for a fluid canvas?

I have long thought Mark Boulton’s “New Canon” was the perfect foundation for a new approach to layout. I’ve also wanted to explore Gridset’s ratio features in more depth. I built them in as a bit of a lark, but the possibilities I saw were intriguing. To explore these ideas, I developed a rather unique workflow:

  1. I first tried designing a layout from the content out. Instead of using columns, I used ratios to define the sizes. Gridset helped immensely with this, but I would often encounter limitations to how I wanted to work, so…
  2. I would adapt Gridset’s UI and output to match this method, making sure not to destroy any current methods. I took it as a good sign that the changes I made were also opening Gridset to more of what is possible with CSS and Media Queries. More flexibility! More units! Ems!
  3. As I went, I’d write about what I learned, continually looping through these steps until I had a process, tool, and output that felt right; that felt aligned.