How To Choose The Right Grid

It’s easy enough to understand how grids are helpful in organizing your content. Not as easy is deciding what type of grid best suits your content and how to build it. Here’s how I made decisions about what grid to use for the redesign of this site.

You may remember in redesign this site I created documents filled with design decisions that later became an online style guide. Last week I walked through the decisions in my typographic document. Today I’ll talk about the next document, the one I used to help me determine the grid upon which this site is built.

This post will focus more on my design choices for selecting a typographic grid, what I was looking for and how I made the decision to use the grid that’s in place. Next week I’ll talk more about the development side and how I went about building it.

Setting a Constraint for the Grid Layout

Prior to making any grid choices, I had a few thoughts about what I wanted from the layout. First and foremost it had to serve the the content. Because of this my starting point was in the type decisions from last week, specifically how wide the measure of the main text should be. If you remember that decision was formed in part by the decisions I’ll be talking about in this post.

In his book, Ordering Disorder: Grid Principles for Web Design (a book I highly recommend by the way), Khoi Vihn talks about the constraints one might use to begin developing a grid.

In print, the fixed dimensions of the page offer the constraint. We don’t have that luxury on the web, especially when designing responsively. In the book Khoi used an ad unit as the constraint and then used trial and error to determine the best grid for the design.

From Khoi’s example I considered basing the grid on an advertising unit as well, but I still wasn’t 100% sure I’d be including ads at this point and while I was leaning toward their inclusion, I didn’t want them to be the basis for the gird. I wanted the grid structure to be based on the content.

So I thought about the grid, thought about the decisions I was making with type, and tried and errorred, until I decided which grid to use.

Trial and Error

When talking about style guides and prototypes, I mentioned that I like art directed content and wanted to be able to design some of the pages and posts here around their content. Because of that desire my early sketches were little more than a header area, a footer area, and an open canvas in between.

That led me toward thinking a more flexible grid with more columns might be the solution I was after. I toyed with 16 and 12 column girds at first. The 12 column being quite appealing because of how many different ways you can divide the space. However, I knew the majority of content here wasn’t going to be art directed due to the time it takes. Most posts will look just like this one, essentially 2 columns of information, with main content to the right and secondary information to the left.

More columns meant more complexity and I wanted things to be simpler. I thought about using a golden section or simplified rule of thirds grid. The golden section called forth images of Leonardo’s Vitruvian Man, feeding back into that Renaissance concept I was after, but I didn’t think the information in the sidebar called for a third of the space.

Remembering another point from Khoi’s book that when in doubt base a grid on a multiple of 4, I settled on 8 columns, which seemed to work well.

• 2 columns for the secondary information on the left
• 1 for the channel of empty space
• 5 for the main content.

While the grid math uses % in the css, it was helpful to think in px briefly, mostly for the ads, which would be some standard px measurement. Using 60em as the container and 16px or 1em for the font-size leads to a 960px container. On wider screens the design will look like a typical 960px fixed and centered layout.

More columns meant more complexity and I wanted things to be simpler.

It’s more than enough to house the content and secondary information and still provides the opportunity to add an additional column should the need arise.

Doing the math, each column (including gutters) would be 120px, which doesn’t quite work for the 125×125 ad units. I had decided by this point the ads wouldn’t be in the sidebar and I could devote more columns to them in the footer.

As I write this the ads are 2 wide, but the design allows for them to be 3 wide. With a little space between them, they occupy about 400px, which can fit comfortably for most devices. On the smallest screens the ads will have to sit 2 wide. The other items in the footer are given 2 columns each.

The main thing to take away from this trial and error is that I thought about the content that would appear on the page and thought about different grids to hold that content. At certain points I’d do a little math to see how much space different areas of content would have at a variety of screen widths.

The more I thought about the content and the more grid math I explored, the more I zeroed in on the grid I ultimately chose. I’d like to tell you that a simple decision or two led me directly to the perfect grid, but it didn’t happen that way. I tried. I errorred. I tried again. Eventually I found my grid.

Baseline Grid

In addition to a column grid, I wanted to use a baseline gird. I like how they look and think they create a nice vertical flow. I particularly like how they look when there are multiple columns of text present and the text in each align vertically.

I’ve talked previously about how to develop a baseline grid and won’t rehash it all again here. The basics were set once I chose a line-height (1.625 or 26px assuming 16px default font-size) and the rest was mostly time and effort to make sure all elements end up aligning to some multiple of the baseline.

I created a simple image to show the grid lines and set it as the background. With the image on, I’d eyeball where elements were falling off the baseline and adjust their values in the css. None of this was hard, though it did take considerable time, especially when I was checking in between each breakpoint.

I’m pretty sure some elements aren’t quite on the grid, and despite my best intentions I haven’t been sizing images to keep them on the gird. I’m ok with it though, since the fall off is temporary and the rhythm is picked up again right after each image. Since images will typically fall beneath the secondary information it won’t disrupt the alignment between the 2 columns of text.

My to do list contains an entry to run through the site and test the baseline, but at the moment it’s not a high priority.

Breaking Out of the Grid

Again, I’ll talk about the details and math more next week, but I wanted to allow elements from the main content to break out of their columns at times in order to create some visual interest.

If you sometimes read here instead of through an rss reader, you’ll have seen pull quotes on recent posts breaking into the channel of space and the occasional image reaching across the channel and into the columns on the left side of the layout.

You’ll also notice there’s empty space to the left of the main heading. I’ve yet to incorporate it into the design, but the heading can expand to the full width of the container, and can even be set to only appear in the columns to the left.

Again details about how this was set up will come next week.

Summary

Grids are good. They help organize information and lend a sense of order to a design. They aren’t the right choice for every design, but they were the right choice for this one. The main question was what kind of grid to use.

To answer the question I looked for constraints. What from the content could fix the starting point for the gird. I considered both the main text blocks and the potential ad units, and settled on using the text blocks.

Some trial and error and advice from Khoi Vihn later, I decided on an 8 column grid. 8 columns are simple enough to place content on the majority of pages, while still leaving enough breathing room to move elements around for some added interest.

Next week I’ll share the development details behind the girds and talk about some of my experiments in trying to develop a simple grid framework before finally finding one I could use in slightly modified form.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.