Should my gutter/margins expand in a fluid design?

Question

I'm redesigning a page, and am going for a fairly basic fluid, 2-column layout. With a fluid layout though, should I have my gutter and margins expand along with the columns, or would it be better to keep them a static size regardless of how the user resizes their browser?

I'm applying the Golden Ratio to the column width so I would like to apply it also to the gutter/margins but I don't really see how that could be done without them being HUGE (or at least huge for gutters. If they're static size it's a moot point of course.

When you say "Fluid 2," are you referring to this layout? http://pixelunion.net/themes/fluid2/ — Evan, Dec 13 '11 at 19:57
Also, what margin are you referring to? Between the columns and the outer edge of the page? — peteorpeter, Dec 13 '11 at 22:47
@peteorpeter: Gutter=space between the two columns. Margins=space between columns and edges of pages. — aslum, Dec 14 '11 at 05:04
see also my answer to similar query on graphic design: http://graphicdesign.stackexchange.com/questions/2575/golden-ratio-with-or-without-padding-margin/2576#2576 — Roger Attrill, Jan 04 '12 at 19:26

score 3 · Accepted Answer · answered Dec 13 '11 at 23:00

I don't think there is a hard-and-fast rule (or "best practice"), but, shooting from the hip, I don't think you should expand the gutter.

The general pattern in the wild is that you have discrete elastic sections that expand, and everything else maintains it's relative position. I can't seem to find a live example on the web in my quick searching (though Ethan Marcotte's seminal ALA breakdown of fluid grids does a little of it at extremely small window size). Amazon.com, Gmail, and Google News all maintain consistent margin/gutter spacing as they stretch.

"Everybody else does it" is not necessarily a reason to follow suit, but, instinctively, this feels a little more stable and consistent to users - there are less moving parts than if every element changes dimension. It's a little more self-explanatory of the mechanism, perhaps? Also, it looks less like actual browser zooming.

You could make a case for expanding them ever-so-slightly as the page width increases - certainly not in direct proportion with the width - but I doubt that subtle effect is worth the additional complexity.

Should my gutter/margins expand in a fluid design?

1 Answers1