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:
- 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…
- 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!
- 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.
There was more to it: rifling through old books, magazines, and blog posts, looking for validation, but those three points sum it up well. The results of this effort has definitely been rewarding. I’ve published articles in a couple of my favorite web haunts, and I even been given the opportunity to tell people about my thoughts on fluid layout – with my voice – at amazing events like SmashingConf Oxford last month, and Port 80 coming up in May.
Here is a roundup of my recent contributions:
Deriving layout from your typeface
26/02/14 · The Typekit Blog · Three layout exploration based on three outstanding typefaces served by Typekit. In this, I really push this new content-out method to find how far we can take it.
Content-out Layout
25/03/14 · A List Apart · All of the theory and mathematics of a content-out, ratio-based layout approach explained. I define some aspects of this method, here, and identify how to recognize when a fluid layout is breaking down.
Content-out Layout: The Resources
31/03/14 · The A List Apart Blog · A deep dive into the resources I used to guide a content-out method that leveraged ratios while maintaining the benefits of grid systems as we know them.
Build a Content-out Grid System with Gridset
03/04/14 · Gridset Blog · A detailed tutorial of how to build a content-out, ratio-based grid system in Gridset, using all of the shiny new features we’ve added in the last year.