Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more… well, responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. We can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen.

Article Continues Below

Columns are boring. Build with relationships.#section2

Layout choices can set the tone for our designs. As graphic designer Anne Burdick liked to teach, “the structure of the page can be seen as the embodiment of a particular philosophical perspective.”1 Do we favor order for our content? Or does it require a humanist touch? Should we tempt chaos? Whatever the tone, each can be successfully introduced in your layout through the use of a ratio: even (1:1), golden (1:1.618), or random proportions (no ratio), respectively.

Our chosen ratio will be the DNA from which all of our layout decisions are formed. This one number will connect every element of our design, and by adjusting it, we will be able to dramatically affect the tone of our designs. Ratios with a lower proportion—or smaller difference between numbers—will yield subtler layout differences, and work well for nuanced, quieter content like personal blogs or long reads. Greater proportions energize a composition with dramatic size differences, perfect for more dynamic content.

An even-sized array of images is orderly and sturdy.

A golden ratio-based array feels organic and dynamic.

A chaotic array is interesting and a bit unnerving.

Rational Ratios#section3

A ratio can consist of any two numbers, giving us an infinite palette of possibilities, but to narrow things down it might be best to start with some familiar territory. Rational ratios are friendly enough, as the math isn’t too scary:

Even 1:1 Halves 1:2 Thirds 1:3 Fourths 1:4

The Rule of Thirds is a well-known example of the power of rational ratios in layout. Highly structured content—like arrays of images or videos, or text with a neutral or formal tone—is represented best by a rational ratio. These ratios work well when designing for symmetry, but can be used for asymmetrical layouts as well.

Irrational Ratios#section4

In The Book of Rectangles, Spatial Law and Gestures of The Orthogons Described (1956), Czech designer and architect Wolfgang von Wersin compiled a set of dynamic ratios used by artists, architects, and calligraphers throughout history to guide their compositions. According to Wersin, it was believed that “nothing excels these proportions.” Not a bad place to start, then.

Quadrat (or Square/Even) 1:1 Hemidiagon 1:1.118 Trion 1:1.154 Quadriagon 1:1.207 Biauron 1:1.236 Penton 1:1.272 Diagon 1:1.414 Bipenton 1:1.458 Hemiolion 1:1.5 Auron (the golden ratio) 1:1.618 Hecton (or Sixton) 1:1.732 Doppelquadrat (Halves) 1:2 Wersin’s 12 “orthagons” with ratios (PDF)

The most famous irrational ratio in design is, of course, the golden ratio (the “Auron,” according to Wersin), which is derived from patterns in nature and the human form. Irrational ratios give us smaller increments in proportions, and their idiosyncratic relationships work best in asymmetrical layouts.

On its own, a ratio is not enough to create an engaging composition. Luckily, pure geometry is not our only guide here. I’ve always loved Bringhurst’s concept of choosing typefaces based on who designed them, and where. Perhaps a similar methodology can be applied to layout, where we derive ratios from tangential influences like type choices, or even music.

Working within a scale#section6

Successful compositions use variety to create hierarchy and movement. Using our chosen ratio, we can extrapolate an array of sizes much like notes on a musical scale, then build our layouts using the “notes”—or widths—from that scale. We can then repeat and skip around the scale to create a kind of visual melody.

To build our scale, we first select a base unit. I would suggest using your typography’s base font-size to further connect the proportions of your layout to your content. Let’s use 1em to keep the math simple. We then multiply our base unit by the number on the right side of our ratio to generate the next size up the scale, and repeat until we have enough size variants to build our layout. Eight should do.

Eight “notes” generated by the golden ratio.

By deciding sizes based on a scale, we can choose relationships that better fit the tone of our design. Large leaps across the scale can be dramatic. Small steps can be more nuanced than in traditional columnar layouts. No matter the size of the change, the result is geometrically connected by our ratio.

An array of images on an even six-column grid.

An array of images on a “golden” six-column grid.

Lightening the cognitive load#section7

When working with ratios and scales, your layout decisions will become more strictly defined. For example, if we were laying out the content of a blog with the common image-plus-copy pattern (I call this a “blurb”), three or more columns are needed in an even-column grid to give any size distinction between the elements.

A blurb on an even three-column grid.

In a ratio-based grid, only two columns would be necessary here. Since blogs are intended to be a more personal expression, I think the golden ratio, with its humanist proportions, would be appropriate.

A blurb on a golden two-column grid.

Each text width is 2.618 times larger than its corresponding image, or two steps up on our scale.

Reducing columns helps us out in two ways, giving us:

more layout clarity: hierarchy and alignment are strengthened by the restricted threshold options;

fewer decisions when designing: constraints keep our minds free to focus on bigger issues like content and usability.

Our simpler, ratio-based blurb grid codifies a relationship between two elements based on the shape of the content. Using this relationship as a start, we can now flesh out a fluid, content-based grid system.

Our blurb grid.

Grids within grids#section8

We can now design simpler grids that build upon and within each other, sharing a common ratio to keep harmony between their various contexts. I call grids like the one used for our blurb example a “content grid.” Content grids define relationships within a portable piece of content and work well for articles, sidebar modules, and other reusable elements of a design system.

To divide up the available viewport space, we can use a global “layout grid” that behaves more like the grids we’ve been using on the web for years now.

A system emerges#section9

Continuing our blog example, we’ll use our scale to derive another content grid for our posts. In a typical blog post, we have a large image, the body of text, social media links, inline images, and some supporting content pulled out into the margins. By trying various arrangements from our scale, we can arrive at a grid that accommodates our content needs.

A four-column article grid using 1 and 2 from our scale. The first, thinner column will house a social module, while all four columns give us the opportunity to align our posts’ elements as appropriate.

To convert these widths into fluid CSS percentages, we just need to total the corresponding widths from our scale, and then convert each column using Ethan Marcotte’s famous formula:

target ÷ context = result

…with “target” being a column width and “context” being the sum of all columns used in the grid. (Or if you’re braving flex-box for layout, you can just use the exact ratio numbers from your scale.)

We can build a simple three-section “layout grid” to accommodate our larger content sections: an area for branding and navigation, an area for the main body of content, and a third area for related and featured content links. Our main content area likely needs to be much wider to house our post content, and the navigation area much thinner. We’ll find column widths from our scale that feel right for our layout, giving the appropriate room for each section.

A symmetrical, three-column layout grid using 1 and 3 from our scale.

Finally, we place our content grids (the article grid and our blurb grid from earlier) into our layout grid, creating a layout that is both fluid and completely driven by our content. (View the blog demo.)

Our new, golden ratio-based, content-out blog layout.

For comparison, I also built this same layout on Twitter Bootstrap’s 12-column grid. (View the Bootstrap blog demo.) While fairly similar, the ratio-based layout holds up better at any random size.

Fitting to constraints#section10

Adapting our layout to various viewports now becomes much simpler, as we have fewer variables to consider. For this process, we can build a fluid prototype in the browser, then scrutinize where the layout starts to falter when resizing the window.

Identifying the usual suspects#section11

As the viewport stretches and narrows, our relationships will strain and crack, especially at sizes in between typically targeted device sizes like “tablet” and “desktop.” After exploring how fluid layouts crumble on many well-trafficked sites, I’ve isolated some common issues that signify where a change in grid is needed:

Sevens find an image shortened as its width is scaled down, and adjacent text squished to a tall, unreadable measure. The resulting form resembles a “7,” and creates a conspicuous square of white space beneath the image. This is especially distracting when repeated across a layout.

Examples of the 7 pattern, and the negative space created.

Drifts are so far removed from their related content that they no longer have any relationship to anything. They may wind up paired with other disparate pieces of content flotsam, or just drift all by their lonesome. Across a layout, drifts destroy hierarchy and cause troubling rivers of negative space to creep in.

Images have drifted away from content, forming their own column, while their headlines and meta content lose any visual relevance to each other.

Pinches happen as elements get too close to other pieces of content. Relationships are destroyed as the viewer makes incorrect associations: images pair with the wrong headline, links run into a list of their own creation. In extreme cases, content collides—at the cost of all readability.

Pinches cause visual hotspots that distract the eye and confuse relationships as proximity overpowers placement.

Finding elemental constraints#section15

After adjusting your layouts for fluidity, certain elements will need special attention. Paragraphs should maintain a readable measure, ads should maintain size and relative position, and images should not enlarge beyond what their resolution will allow. Setting a specific width is an easy fix, but does not truly embrace fluidity. Instead, we can set a min-width and/or max-width in our CSS to maintain the integrity of this content.

A fitter method#section16

The use of the grid as an ordering system is the expression of a certain mental attitude inasmuch as it shows that the designer conceives his work in terms that are constructive and oriented to the future. Josef Muller-Brockmann

A ratio-based, modular approach to grids allows us to navigate a medium where we cannot know the container size, nor what type of content will flow into that container. We can build layout systems from our content, and rely on ratios to keep harmonious compositions from these disparate parts. From there, a keen understanding of how fluid designs fail can show us when to adapt these systems, and when to add constraints.

In 2009, and again in 2010, Ethan Marcotte gave us the tools with which to respond. In 2011, Mark Boulton gave us a guiding philosophy. By weaving these highly influential ideas together with a pliable method, we can move towards more sophisticated layouts tailored to the needs of our content, patterned with unique character, and perfectly suited to the nature of our ever-changing web.