In the early stages of design for this site I was considering different grids for the layout. I had targeted the desired width and was playing around with different numbers of columns and gutters and their respective widths. With each new iteration came a new sketch and a new set of calculations; but after the third one I began to wonder if there was a better method.
My problem was the time consuming process of sketching five, six, seven or more columns with gutters. Then when I was finished they weren't necessarily to scale, so the boxes I sketched over the columns to represent page elements were not necessarily the best representation of the different proportions.
For example, if I increased the width of the section that was going to contain the main text of the page by one column, the perceived increase on paper might be significantly different from the actual increase on screen.
I was using graph paper for sketching so I could have developed a scale where one square was equal to X amount of pixels, but there just had to be a better way. How could I digitally represent a grid that was flexible enough to quickly change the pixel widths and the number of columns? How about a spreadsheet!
The Spreadsheet
I use Microsoft Excel, but I'm sure the same techniques can be applied to Calc (Open Office) (UPDATE: It takes some extra work though) or Google Spreadsheets.
I took a screen shot of one my grids as an example of how a spreadsheet can be used to setup a grid-based layout (Figure 1). The proportions are correct and allow for an accurate visual representation of the website layout.
While the main motivation for setting up my grid in a spreadsheet was to achieve proper proportions, I soon found the greatest advantage was the ease of calculating total pixel values during development. If you want to skip the part about setting up the spreadsheet and see the payoff go ahead and skip to the end.
Figure 1: An initial look at how grids can be brainstormed with a spreadsheet.The Setup
I'm not sure about the common level of spreadsheet knowledge, so I thought I would put together a quick step-by-step tutorial just in case people aren't sure how to create something similar to Figure 1. This tutorial uses Windows keyboard buttons, so use the equivalents for other operating systems.
To begin, enter some column and gutter values in cells along a single row (Figure 2). For this example I just used four columns and three gutters, the values being 150 and 30, respectively.
Next select all of the columns; to do this you want to move your cursor over the column headers--it should change to a black arrow pointing down--and click once. If this is done properly the entire column should be highlighted. Now hold down the Ctrl button and select the other columns in the same manner, the result should be similar to Figure 3.
Now we want to change the width of the selected columns; move your cursor just to the right of one of the selected columns until it changes to a vertical black bar with arrows on either side. Click and drag the columns to the correct width (150 in my case, Figure 4). The results should be similar to Figure 5.
Next we do the same thing to the gutters; only this time we are reducing the width instead of widening it (see Figures 6 & 7).
At this point, we have the correct proportions for the grid. Whatever you do after this point is your personal preference, but I have included a few more steps for coloring the columns and zooming out to get a better view.
A Few More Steps
First, we will color the columns to give them a bit more prominence. Select an equal area in each column by holding down the Ctrl button and clicking and dragging the cursor over the desired areas (Figure 8). Then click on the Fill Color button to "paint" these columns the color of your preference (Figure 9). The results should be similar to Figure 10.
Finally it's helpful to zoom out a bit as the spreadsheet at 100% isn't very conducive to viewing a full layout. This is an easy step, you just change the Zoom to whatever value you prefer, I use fifty-percent (Figure 11). The results should be similar to Figure 12.
Now you can add more color and more columns and then start color-coding layout elements similar to Figure 1.
The Best Part
Once you have your final grid in place, the handiest part of the spreadsheet grid is how quickly total pixel values are calculated. To find the width of any element, you just select the columns and gutters that it spans and the sum is automatically calculated in the lower right (see Figure 13). This quick little trick has saved me many button-pushes on a calculator!
Figure 13: The sum of the selected values is shown in the lower right.
