• now that I’m writing a blog about it, I find grids sound incredibly boring

    photo
    • ering
    • May 29th, 2008
    • 10:31:25 AM

    Let us discuss grids today. Grids are wonderful. Once you have a grid, you can rely on it to make decisions for you. This is true not only in design, but also applies to activities such as driving or refereeing football or eating a pizza.

    For our grid, we wanted to consider the possibility of including some (really nice looking) advertising. If your site may, at some point in time, have advertising, I strongly encourage you to design your grid with some ad sizes in mind….lest you want this to happen:

    I’ve designed sites and I’ve designed ads, but I’ve never designed a site that may include advertising. If you take a look at the Internet Advertising Bureau’s ad guidelines, you may notice that the “standards” are not very grid-friendly. Just try finding a nice way to include a 728×90 ad, a 300×250, and a 180×150 without breaking the grid. And those are the super-standards.

    With that in mind, I played around with a lot of different grids…four-column, twelve-column, ultimately deciding on a six-column grid, 940px wide(fixed-width) and 20px margins. 940px means users with a 1024×968 resolution (very common nowadays) can view the site in all its glory. The six-column is very flexible; it can easily be a two column, a three-column, et cetera. This grid can also incorporate three ad sizes, even the dreaded banner…which we will probably not use anyway.

    So, here it is:

    Next time, I’ll write about something cute, like icons.

    Comments

    Ian May 29th, 2008 at 4:05 pm

    Nice work Erin, and props for the ATHF reference!

    For what it’s worth, there’s a very similar grid project already out
    there that you might find useful for future projects:

    http://960.gs/

    Same concept, but the width is 960 (go figure), and they’ve got all the css done
    for you.

    dusty May 29th, 2008 at 6:35 pm

    Ian,

    Thanks for the comment! We’ll very likely use the 960 Grid system, or something simliar, since the CSS is already set up. The 960 Grid, is ACTUALLY 940 pixels wide, the same width as we’re going to be using (it has 10px margins). Very cool stuff.

    Later!

    Dusty

    andyVan July 15th, 2008 at 2:53 pm

    Great post Erin! This is great advice. The rebel in me says ‘we don’t need no stinking grids’ – but now I may start using grids for everything I design. w00t!