Just in the last few days I’ve been struggling with a design which just wouldn’t quite work the way I wanted. A somewhat unusual layout – four columns, fluid. The problem has been in finding proportions which are successful across the whole spectrum of widths – from 800 pixels to my own 1600 pixel monster. Imagine my good cheer when Cameron Moll writes up two successive posts which directly relate to my problem! Thanks, Cameron!
In fact, believe it or not, this wasn’t a personal favor – just a coincidence. Funny, but I guess the fact that I don’t know Cameron actually reduces the likelihood he was reading my mind.
The first post was on a fairly straightforward question about optimizing design width for 1024px resolution. Now, this doesn’t directly bear on my struggle, since I’m not creating a fixed width design. However, it does raise one important question: do we need to use the entire width of the screen?
That was one of the biggest problems I had: at extremes, the layout just looked crummy. It worked; you couldn’t say that it fell apart, but it didn’t look right. But why use those extremes? Oh, yes…because IE6 doesn’t support min-width and max-width. (IE7 may not be perfect, but it sure is an improvement.)
So I picked a max-width: it may not be relevant in every browser right now, but it should age well.
The second article was also quite interesting: Should all sites be fluid?. Ah…tough one. "Should" is a difficult question. How to address it? The original article and comments attached to it are largely considering the question from a designer or publisher’s perspective: but I want to think about the user’s experience. Are there actually sites which can benefit the user by using a fixed layout?
So…that’s a question I can’t answer.
I’m trying to think of a concrete reason that a fixed width would be advantageous for a site. I can see how a poorly-designed fluid site would be a problem; but I’m going to operate on the assumption that we’re only talking about fluid designs which don’t have obnoxious problems such as text being covered at very small widths, etc.
Neither Cameron’s original post nor any of the comments name a specific reason that a fixed layout is better. There are plenty of reasons why one might choose to develop a fixed layout inside of fluid – and I’m certainly not disputing that there are perfectly good reasons to develop fixed layouts. Faster development and testing is pretty clearly advantageous where budgets are concerned. But these are advantages to the development team and to the company paying for the work: not for the user.
John Dilworth makes an interesting comment:
Do I want and need the user to control that part of the experience? Or, does the designer need to control that part of the experience?
Are there situations where designer control trumps the user’s choice? John’s point is that there are content-oriented sites which may benefit from designer control of the text. But I don’t see how this plays to the advantage of the user. The designer can’t determine that he will automatically provide short line lengths to users who prefer it and long lines to others. Only the user can actually make this decision.
Mark Boulton talks about how proportion is a key element of a design, and one of the big problems designers have in creating flexible designs is the loss of control on proportion. Your design ceases to be a unit and becomes a spectrum. What he would like to see (and I don’t argue) is the ability to expand the proportions along with the canvas. This is a problem with em based designs – although the view expands effectively when the text size is increased, the size of the viewport is ignored. Finding an effective way to combine text-based sizing with viewport would be highly valuable, and perhaps would encourage designers to pursue fluid designs.
Regardless, there’s nothing conclusive which indicates that a fixed design has user benefits. It appears to have significant advantages from the perspective of designers, but less certain from the user perspective.
If anybody can suggest a good reason – for users – that a website design should be fixed, I’m very curious to hear it.
And no neutering jokes, please. 😉
Joe Dolson
Thanks, Tedd – I’m aware of the problem. I’m using an image replacement technique where the dimensions of the banner area are expresed in
ems– so at small zooms, it disappears.Haven’t worked out a good solution, yet.
Your comment about handling real estate are right on – using the space available means being flexible, since we have no way of controlling what space that will be. It’s not just about allowing a site to expand to fill larger screens, but making certain it’s still usable in smaller ones!
tedd
For years now I’ve done fixed width sites — like so many billboards, just boring testaments of days gone by before Ladybird’s beautification mandate, which predate most of you.
But now, I think the concept of “the medium is the message” is starting to influence web design and user expectations.
I think we collectively are viewing the browser window differently now — it’s not the printed page, as ecommerce is not “brick and mortar”. The differences are becoming more apparent, acceptable, and even expected.
What we are faced with now, is how to be best handle real estate. The browser window is not fixed, and our charge is to best use what we are given and to do so to the widest audience possible.
As such, I no longer do “fixed width” but rather different fluid and em based sites with emphases on accessibility. Granted I still have to live with clients who have not seen the light, but that comes with the territory. My charge is to best see to their needs and not to their misconceptions.
tedd
http://sperling.com
PS: On small zooms, your logo banner disappears (Mac OS-X 10.4.7 Safari 2.0.4)
Joe Dolson
I can see your argument, and I’m willing to buy it about half the time…
Fixed width weblogs fall down in fixed-width when he font-size is increased – resulting in too-short lines. However, it could be argued that too-short lines are less of a problem then too-long lines.
I go back and forth – what I prefer, in that case, is more of a zoom layout – expanding with the text, giving control of proportions to the designer.
Thud
Fixed-width sites are handy if you have a text-heavy site with simple navigation. Fluid-width sites fail when you don’t have the content to support the use of screen real-estate. You end up with long scan lines and a lot of unbalanced white space. So weblogs are a great candidate for fixed-width (he says, even though his own is currently fluid).
Joe Dolson
I’ve also used fixed-width, fixed-heights, etc.
embased widths aren’t something I’ve explored extensively (although I’m building one right now, as it happens), but I do like the way they maintain proportions.Still, assuming a considerate designer, the only reasons for fixed width seem to be designer-focused…
Mike Cherim
I will use fixed width at times (and height on upper elements), especially if image control is important, and sometimes it is: The Thompson Center Association site I built really requires it (760px width with a fixed height masthead).
My favorite method is the way Accessites.org is built in that it uses
EMs for width which keeps proportion even better that of fixed-width sites in that the first couple of text enlargements don’t have a big effect on the vertical size of elements due to text wrapping, etc. The thing to do is applymax-widthas you noted.Max-widthisn’t supported by IE (Internet Explorer), so to make the whole thing work well in that browser you have to begin with a narrow enoughEM-based width to allow the thing to grow (its two increase sizes) without expanding beyond the viewport width — at least on 1024×768. Given this, to see it with a horizontal scrollbar the number of variables is increased: It must be IE, and 800×600 screen resolution or smaller, and the text must be enlarged. It’s not a perfect method, but pretty close simply by limiting the possibilities that someone gets a horizontal scrollbar. If it wasn’t for IE,EMs coupled withmax-widthwould be just about perfect! Using Accessites as an example, it works and looks good from 640×480 right on up to whatever size in amax-width-supporting browser. Its keep the design really stable.Liquid really is best, but only if the developer develops the site knowing that design control will be left entirely to the user. This some might say is best, and I won’t argue, but sometimes I do want some control. I can’t help it.