Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
When you say "Fluid 2," are you referring to this layout? pixelunion.net/themes/fluid2 –  Evan Dec 13 '11 at 19:57
    
I think he just meant "fluid, 2-column layout"? –  peteorpeter Dec 13 '11 at 22:42
1  
What a difference a comma or hyphen can make. –  tajmo Dec 13 '11 at 23:03
1  
@peteorpeter: Gutter=space between the two columns. Margins=space between columns and edges of pages. –  aslum Dec 14 '11 at 5:04
1  
see also my answer to similar query on graphic design: graphicdesign.stackexchange.com/questions/2575/… –  Roger Attrill Jan 4 '12 at 19:26

1 Answer 1

up vote 3 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.