CROWDCTRL

One of my favorite aspects of journalism back on the old high school newspaper staff was laying out a page. I was Entertainment Editor, with a staff of writers supplying me with write-ups of the latest Smashing Pumpkins or Nine Inch Nails CD, and every month I’d hole up with my Power Mac and Pagemaker and lay out 4 pages of text, images and headlines.

It’s what led me to the web, and here, 10 years later, I’m still having a ball applying those same principles to design on the web. How? Where? Why? Let’s dive in.

What you got?

The first step in laying out a page is figuring out what content you have on hand. On a high level, what are the goals of the page? What are you offering? Take stock of these goals and customize your content to fit them.

Figure out as specifically as possible what content you need on the page and prioritize it. Think about all the little parts of each piece of content that will need to be designed: headlines, bylines, photos, paragraphs, links, page jumps. I usually number them out in a list so I can reference them in sketches later. Don’t be afraid to change this list at any time.

You pickin’ up what I’m puttin’ down?

The next step is to lay out the grid. Start with identifying your target page size. Typical web browser? PDA? For crowdctrl I targeted web browsers with a resolution of 1024×768 pixels. Taking some recent advice from Cameron Moll, that set my horizontal length at 960 pixels—a great even number for dividing into columns.

This brings up a great point and a key difference between Pagemaker and CSS. It is very difficult to lay out a grid in HTML with columns and rows. Absolute positioning seems to be the best way to lay out the page in such a precise manner, but typically this results in the grid being totally exposed, such as UX Magazine. More on that in a bit.

So start with the columns. This is totally up to you. Khoi Vinh uses an eight column grid on Subtraction. For crowdctrl, I split my 960 pixels into 16 columns, but only after experimenting with eight and finding the columns too large. That put my columns at 60 pixels apiece, a good number with which to multiply to create some interesting layouts.

I broke out my Moleskine notebook and next to my ordered list of prioritized content, I started sketching eight columns, along with all the possible combinations for my content boxes.

Then, based upon my content needs and priorities, I chose layouts, row by row, for my page. For the front page, I started with the featured article, and put it front and center, and very big. I wanted it so big, in fact, that I ditched the eight columns because the 4 / 8 / 4 layout wasn’t big enough for my article. I divided my columns in half and redrew.

My big fat feature box was set at 10 columns, 600 pixels, front and center. That left me three columns or 180 pixels on either side. Perfect place to put my navigation and one other top element. I decided on a list of recent record reviews, to both promote my recent opinion pieces and also reiterate to myself (and visitors) that music was a top priority around here.

Now for the next row. Do I stick with 3 / 10 / 3? No! This brings me to my number one rule for grid usage:

Never use the same grid on consecutive rows.

This is the first misstep that will expose your grid to the world and ruin your life forever. No seriously, check out your local newspaper. Well-designed papers will never have the same column running the length of the page. Great papers have very little semblance of a grid. Apply these rules to your site.

A true grid may not even have visible rows. Great grid usage includes all sorts of variations of grids, weaving in and out of columns and rows, breaking the grid at strategic moments, and overall making it very hard to even notice the grid.

With HTML and table-less design, it gets a bit harder. I combatted this by indeed drawing some hard row lines, but staggering content and mixing up the design to prevent those visible hard vertical lines.

For content, my second row was my second tier of priorities. That included, in order, my list of recent articles, my latest thinking blurbs and links, and my future line of shirts and swag.

I wanted the recent articles to have priority on the row, but not be as prominent as the feature. After the above sketches, I went with a 4 / 8 / 4 column layout, with the articles in the middle and the thinking blurbs and swagger on either side.

For my third row, I planned the lower priority content pieces (so low I cut ‘em for the launch): a blogroll, last.fm recent listening, some light weight ads, and a vacant spot to be decided. The content was just not that important, so I cut it. I did, however, plan a layout to evenly distribute the blogroll and music listing in the middle, pushing out any ads or other content to the edges in a 3 / 5 / 5 / 3 four column layout.

Getting it on the page

There are a few good ways to get your new columns on the page. For crowdctrl, I had so many images that I designed the page to be laid out using absolute positioning. This means content is restricted to a vertical height, which can be problematic. I carefully measured how much space my content has, and restricted how Rails brings in my content appropriately. This makes the site more like a newspaper, with precise word counts and having to test the page layout with each new piece of content to ensure a well-designed presentation.

Another way that is less problematic but more restrictive to breaking the grid (breaking the grid is a good thing… more on that in a later post) is floating your columns. The best implementation of this method I’ve seen to date is the Yahoo UI Grids, which is open source and ready for you to use. They’ve got excellent documentation, and theirs is one we are using quite extensively at work with great success.

Grids make eyes happy

Designing with grids is a proven design pattern that will make anything you design happier. Grid placement of content gives your eyes roads to travel, and eyes love going down those paths. With a little planning and a bit of effort, grids can help prioritize content, give readers visual queues as to what is important and what is related, and provide some instruction as to how to digest your work.

- John Dilworth and I had a good conversation about this prior to my writing it.
- digg it fatboy