August 30th, 2005
Five simple steps to designing grid systems — Part 4
Layout seems to be a hot topic at the moment, mostly prompted by the ALA redesign and the numerous discussions of the choice by Jason and the ALA team to go 1024 for a fixed width. I’m not going to go into my thoughts on ALA in too much depth here, there’s been a lot of that already, but it seems like the right time to get this article out.
So, fixed width grid design for the web. What is it, how do we do it and how do we implement it?
For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I’m not going to. There are just so many resources and books available telling you how to create the CSS layouts you need—I’ll touch on it, but I won’t be going into too much detail.
The Measurements
A fixed grid for designing for the web is as close a translation from traditional grid design as there is. The designer is using fixed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a fixed size. See, everything is fixed.
The Canvas
Now things start to get a little less concrete. The canvas size for print design is determined by the media size — paper, signage, envelope, whatever. The canvas size for fixed grid design on the web is normally determined by the browser window size, which is in turn determined by the user’s screen resolution. These are not fixed. Therefore a designer should design to the minimum requirement, which is normally the average screen resolution for the majority of users.
I’m not going to quote figures here, because I’ll probably be wrong, but I don’t think I’m wrong in saying that 800x600 pixel screen resolution has, for quite a few years now, been the screen resolution to design to.
As I mentioned, with the relaunch of ALA, and sites like Stylegala, there has been a renewed discussion about fixed width grids for 1024. So, what’s my opinion on this? Well, in terms of the actual grid design it really doesn’t matter what size the canvas is. What should be determining the decision to go 1024 is research into user’s screen resolutions. If the user base of a certain site is shown to be using resolutions of that size and above, then a decision to use that size to design to is a valid one.
However, as some people have noted, even if you do run at a higher resolution than 800x600 does that mean your browser window occupies the entire screen? The answer to this is, generally we don’t know. I personally think that not only is it platform specific, but it’s also down to the individual and their experience level. Maybe more experienced users on a PC don’t use their browser’s at full screen. From my experience running user tests with a wide range of people, is that more novice users, particularly on a PC, run a browser at full screen because that is the default, whereas on a Mac the default isn’t full screen.
What I haven’t touched on yet is the device you are using. This of course could be a PDA, a mobile phone or a computer. Grid designs should be looked at for each of these devices.
That is all I’m going to say on the matter for now though. Once the final part in this series is up, fluid grid design, there can be a more informed discussion I think.
Nice, easy dimensions and thinking modular
Without further a do, let’s get into this grid design.
As discussed in the rest of this series (part 1, 2 and 3), we will begin our grid design by ‘shaping the page.
For the purposes of this simple (I am trying to keep it simple) article, I’ll be using 800 x 600 as my default resolution to design to. For many years I’ve designed to a base minimum (based on 800 x 600) of 760px x 410px (410px being the fold). Don’t ask me where I got these figures from, but it just stuck and seems to be ok for most platforms and browsers. Oh, you can of course go smaller than this and don’t pay too much attention to the fold, in my experience most users don’t have a problem with scrolling.
We begin by applying ratios to this canvas, in the same way we’ve done with designing grid system for print. The example I’m using for this tutorial is my own site, which uses a fixed grid and sits happily below 760px wide.
The design for my site is built around around a very simple grid system. Once I had my grid, I used photoshop to comp together the designs positioning any elements exactly on the grid lines. The grid was designed intially for a content and navigation area based on the Rule of Thirds (which is roughly approximated around the Golden Section), the dimensions of which are 250px and 500px respectively. The content area is then subdivided into two 250px columns.
See, nice easy dimensions. However, this only deals with horizontal measurement. As discussed in the other grid articles, vertical measurement is also important, but this is where we can run into problems with designing even fixed grid systems on the web.
When user’s change the type size, elements move vertically (if we’ve fixed the horizontal widths). The vertical measurements that we’ve crafted suddenly disappear. Now, in the purist’s eye, this is a real problem but it is something we have to design to. We really can’t do anything about it when designing with fixed units such as pixels which can’t be resized by the user.
Just a word about Gutters
Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns. This creates practical problems for us when designing grid systems on the web because of the way we create the columns.
Generally the columns we create, using Web Standards, are ‘divs’ which are given widths and positioned and styled using CSS. So, ideally, if we’re creating these columns, we don’t want to be creating seperate ones for the gutters. We therefore deal with gutters as part of columns and they are implemented using padding, or creating margins, on elements positioned within them, or sometimes the column divs themselves.
Creating the design
The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines. I know that sounds totally obvious but designing to strong grids means you have to take a step back from what you think the design should look like (and then adding things to the grid to suit), and instead concentrate on creating a harmonious design within the framework you’ve created.
The bulk of the design work, if you exclude sketching with a pencil, is done in Photoshop. First of all I take great care in drawing the grid accurately, to the pixel, and then I overlay content elements ensuring the alignment is precise.
From Photoshop to the browser
As I stated at the beginning of this article, I’m not going to concentrate too much on how you actually build a multi-column CSS layout, there are just so many other great resources on that topic.
One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.
As you can see from the diagram, this makes production of the design incredibly easy when you have a visual reference rather than having to remember your grid or interpret a sketch.
Implementation using Web Standards
This really could be a series all on it’s own. Implementation of a multi-column grid using CSS is pretty standard practice nowadays, but there are some very useful resources out there which I have used for the past 18 months or so.
Doug Bowman at Stopdesign has pioneered a technique for producing flexible column layouts using CSS and controlling them by giving a class to the body tag. This is the techique I’ve used throughout this site. This means if I create a new section of the site or simply decide one day that I’d rather have my navigation on the right, all I have to do is change the class on the body element and everything switches over. Using this technique, along with Khoi’s technique for sense checking the design against the grid, has been an excellent way to produce tight, grid layouts for me, give it a go and let me know what you think.
Up next: Fluid grid systems for the web.
Timely? Yes. Complicated? Yes, but they don’t have to be. Fluid, or flexible, grid systems have a rightful place in grid system design for the web but they come with their own particular set of challenges. In the next installment I’ll be having a look at flexible grids using relational measurements and also tying the grid design closer to the typography rather than the browser — flexible from a type perspective, rather than a browser perspective. Stay tuned.
The series
This is the fourth installment of this “Simple Steps…” series.
- Subdividing ratios
- Ratios and complex grid systems
- Grid systems for web design: Part 1
- Grid systems for web design: Part 2 Fixed
- Grid systems for web design: Part 3 Fluid
Great article!
Articles like this show that there is much more to webdesign than frontpage and a cracked version of Photoshop
Brilliant Mark, keep it coming! And hope you’re feeling better.
Another great installment Mark. I echo Rob and hope you feel better soon…
Keep up the great work.
Yes! be modular! I would like to
But:
“controlling them by giving a class to the body tag..” how can i do it!
Could you give me some resources where i can learn it?
Thanks!
Thanks Mark. Nice article. What I miss though is more on the idea behind the grid. You have told we should use a grid and how to practically do this. But I guess there is more to it than just a 1:2 devision. And what about the vertical grid? We just leave that out?
A bit more indepth on the actual subject, grids, would have been nice in my oppinion. And less about everything around it (photoshop, css …) But hey, a least you writeabout it. I don’t (lazy ass …).
So keep up the good work and I’ll be checking back for part 5.
Bertje — Have a look through the first three parts of this series, within those articles I talk more about the theory in designing grid systems with ratios.
With regards to this article, as I stated, vertical grid divisions, if ratio based are impossible to retain in a browser when the user can change the text as this will change the ratio.
There is an assumption that grid design has to be complicated, that you have to have hundreds of intricate boxes etc all aligned to some crazy ratios. This isn’t the case at all. So, yes, my initial grid is just a 1:2 ratio which is then subdivided. The 1:2 ratio is of course based on the Rule of Thirds, which is a similar ratio to the Golden Section. So, what may look extremely simple, has been thought out quite a lot.
I like the fact that you are focusing on theory rather than implementation details, we could use more articles like that.
However, this is the comments section, and I have an implementation question ;)
While, as you mention, there are plenty of multicolumn CSS tutorials out there, I’m not sure they would support your design: if you have three columns (with a div per column), how do you keep items in column one aligned with items in columns two and three (as happens in your example)? It seems like there needs to be some artificial height limitations on the content in order to do that.
Looking at your home page, that seems to be the case. However, if I try adding some longer text to one of the portfolio sections, fort example, it overlaps the content below it in an ugly way. Not very flexible.
And if you approach it with nested divs to avoid that problem (outer divs=rows, inner divs=cols), might you not as well just use tables?
Mark,
This Simple Steps series is BRILLIANT. I’m salivating for the next article.
A question about gutters:
I see the graphics and text in the third and fifth columns (“BBC Vocab” and “Cube Gallery”) do not honour the gutter. Every other element does (save, “skip to content” and accessibility icons). Is there a reason for this?
–tim
Great article. About 2 weeks ago, I pretty much re-designed my site verbatim as you described, gutters and all, but before your article came out (do I get a prize?).
My actual container div is 760px wide, but the columns inside are each 250px, with a gutter of 10px each, and some extra 10px space on the right side of the container (to balance out the 10px from the gutter on the left side).
@MH: I’ve done some fake columns on my site, if you want to check them out. I used the footer to cap them off, and a container background to simulate them. For a full writeup on how to do fake columns, check out this article…
† http://www.alistapart.com/articles/fauxcolumns
I say all that not to draw attention to myself, but as a testament to Mark’s excellent writeup. These design principles are very solid. I suppose I could be like the guy from the Hair Club for Men commercial, saying “It worked for me!”
I love the concept-based approach to this tutorial. I hope you feel better soon and that there are many more articles like this (and more related to typography) on the way.
By the way, I love the JavaScripton the comment form, that offers more informative tips. Very, very nice touch.
I’m loving these articles Mark. They’re very valuble, especially for a hack like myself. Can’t wait for part 5.
MH — You’re right, there does have to be a height set on some elements (such as the tinted ‘portfolio’ boxes in my example. As I said in the article, vertical divisions when the user can change them is a bit of a challenge!
timfm — Well spotted, you of course win a mystery prize for the deliberate mistake. :O
Hooray! Do I get to choose? A copy of this would be lovely.
; )
–t
Mark,
I just wanted to say a very big thank-you for all the effort you have put into what I think has been the best series of design articles this year.
Thanks Malarkey — I appreciate it!
I *heart* this series. =D
Being a web author who dare/has to take care of some small sites’ graphic design, I can really appreciate the value of articles like these.
I mean, when I started to design, I hadn’t a solid graphic background, so mastering concepts like grid system in web design took reaaally a lot of time to me.
If I had articles like these handy at that time, I guess I could have sensibly shortened my learning curve to proper designing :)
oh, and…
really spot on :)
Great series! C’mon, let’s get on to number 5 soon! See, you set a great tone and we don’t care that you need to recuperate from whatever ails you.
Seriously, get to felling better soon.
Lastly, a nit… “The Series” for this article describes it as the thrid installment. Should be fourth.
Gutters by Ratio
Hey Mark,
I’m wondering about using ratios for the gutters on columns. The example you used in part 1 of the series showed a complex grid with what could be construed as gutters on the edges of wider main columns.
Is there a reason to use an arbitrary gutter width instead of basing it upon the same ratios as the rest of the page?
Great series, by the way. Thanks for sharing these insights in such a concise and readable way.
Alexander — Normally , I like to base gutter width on type size that way there is a relationship between the type and gutter (I normally put the gutter at anywhere between 3 and 6em, this generally depends on the typeface I’m using — Sans Serif need more space than Serifs — generally).
Gutter created by ratio is also another solution. Arbitrary widths are also fine, but on closer inspection you can bet these arbitrary measurements are close to ratios or em measurements. :)
I was wondering…
Are you considering doing a book about it? It wouldn’t have to be a really big book (do you ever wonder as I do why computer related books have to be so big? Something to do with the male ego? lol!)…
It could be a pdf book (maybe not as good looking as this one but hopefully with less hype and more content), with raw files — a tutorial kit kind of thing, that would get you from start to finish on how to design a sample web page with grids (a bit like the last chapter of Bullet Proof Web Design — but with design in mind).
I for one am dying for it (as can be shamelessly seen here… I am no designer!
One step ahead of you there Jamal ;) Expect to see a book, in one form or another, in the next few months.
After reading your post on Molly’s site, I do see your point and frustration. There’s a lot of stuff around which shows designers how to build something technically, but nothing aimed at the reverse market.
Maybe that’s designer’s thinking we’re a bit ‘special’ eh?
What will the book be about? Five simple steps to design?
Oh… You mean the elitist designers’ club? Those people? The Sect?
The one you’re accepted into if only you do know by heart lorem ipsum… etc? (see I cannot get in!!)
Too bad… Well maybe I could invite this guy to a mock up craftsmen’s club (since he also says “I am no designer” (well he does say he is after all so I don’t know if he can join) — the club’s motto.
I think design is truly about perception — can you teach that? Hope so… Just point me to the right book!
Thanks. If you haven’t studied design (like me) then this kind of article is a great help — I lived with designers through university and read a few books, although they are detailed etc, none of them deliver what I want to know as directly as this series of artices. — a great idea well executed.
I agree with Glen, absolutely awesome step by step article.
Just wanted to say keep it up and make sure you’re book you plan to produce is just as good (with some more info on grid design for publication!!!)
Just one more hint: a “classic” grid is based on the font and font size as its smallest unit.
Step 1: Choose font and font size (e.g. Verdana, 11 px)
Step 2: Choose line spacing (e.g. 140%)
Step 3: Define column width (e.g. 40 characters)
Step 4: Define gutter (e.g. 14 px)
Step 5: Define module size (based on line spacing and column width)
Klaus,
Could you explain this process in more depth, and show us a working example?
–t
This is a great article thank you for taking the time to writeit!
But this has been a really eye opener, I own a copy of Grid Systems in Graphic Design but have lacked the knowledge to approach the text and get useful information back, but armed with this I think I’ve just added another thing to the list to explore.
Great site, I love it!
Take at look at online bingo
http://www.bingoplaying.com
[…] of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the […]
[…] of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the series.Seven Smooth Steps to Superb GridsThis article offers a […]