Fixed vs. Fluid

Monday 15 December, 2003 ( 1:30PM GMT)

Following on from a brief look at elastic layouts, here's my contribution to the debate surrounding the rivalry between it's elder cousins, the fixed layout and the fluid layout that has reared its head again recently.

The contenders weigh up something like this:
Fluid layouts, where content flows to fit the width of the window (such as in HTML Dog) takes advantage of 'screen real estate' and the capabilities of a users computer, cuts down on scrolling and presents more information above the fold.
Fixed layouts, where the content area has a fixed width can be used to narrow the column in which content is presented, which is easier to read, just like columns in newspapers.

When I started out in web design, my preference was for fixed width pages. I figured they looked better that way. Over the years, as my understanding of usability increased, I was gradually convinced that fluid layouts were the way to go. The way I saw it was that cutting down on the amount of work the user has to do (ie. scrolling) makes a web page more usable.

This debate is all about usability. The thing is, there are usability benefits and flaws in both methods. Fluid layouts fill the screen and so present more content above the fold, minimizing the amount of vertical scrolling, but text spanning across a wide distance is possibly more difficult to read. The possibility of horizontal scrolling (that could occur on small screens, such as those on mobile devices) is also minimized. Fixed layouts however, offer a format that is initially easier to read but presents the problems of the increased likelihood of scrolling.

Most of the recent argument (from Mike Golding and Paul Scrivens for example) has been in favour of fixed-width layouts. The main reason I see for this is that designers prefer it. There is no evidence that such a method is more usable - it may at first seem that a narrow column is easier to read, just like a newspaper, but as I commented on Mike Golding's article:

...it simply isn't possible to directly relate the issues of print media to electronic media. Thinner columns may indeed be easier to read, but a newspaper reader has the whole page in front of them - they do not need to scroll anything and they may well be a tad miffed if one side of every page of the newspaper was completely blank!

I don't think the argument that that many top-name designers prefer fixed layouts proves anything. As much as I like an attractive design, I am more interested in function over form. I want to exploit design to achieve the best response from the user - to optimise usability and ultimately optimise functionality, not to make it something that is more pleasing on my eye. The day usability experts employ fixed widths is the day I will really take any notice of such an argument.

Scrolling (particularly vertical scrolling) and the importance of placing information 'above the fold' (that is, in the upper-area of a web page that is displayed in the window before scrolling) are certainly not as important as they once were. Nowadays most users are perfectly comfortable with scrolling and realise that content will also be present below the fold. However, I still think that these issues, although less important, remain important nonetheless.

I have spoken mainly of the benefits of fluid layouts over fixed layouts because the high-profile arguments elsewhere that I have highlighted have extolled the virtues of fixed layouts, presenting some very good points but missing much of the argument in favour of fluid layouts.

I'm playing devil's advocate. I really don't see any completely preferable way - there are advantages and disadvantages to both methods.
Before this debate ignited again recently and some very intelligent comments were made in favour of fixed-width layouts, I was very much in favour of the fluid layout. Now I would have to say that I am sitting on the fence - I have begun to lean further towards fixed-widths but I am not yet convinced.

I think this is one of the most important and interesting debates surrounding web design and I would love to see the results of some real hardcore usability testing on the issue.

Comments

Comment 1

I was just complaining about Photo Matt's slanted editorial on this topic:
http://photomatt.net/archives/2003/12/11/death-of-flexible-width-designs/#comment-1696

Thanks for stepping up and presenting the other side of the argument! I completely agree with you that there are advantages and disadvantages to both methods. As I said in the aforelinked comment, it would very useful for someone to sketch out the advantages and disadvantages on one page so that designers can make informed decisions and use the most appropriate method for the task.

So said Joshua Kaufman on Monday 15 December, 2003 at 6:34PM GMT.

Comment 2

The relative ease of reading narrow columns of text versus longer ones is the argument always brought up when designers get their rant on with this topic. But is there any truth in it?

Studies of print media reaching this conclusion go back decades, but none I know of has reached the same conclusion for screen reading. In fact the few items of research I have seen suggest that the 'optimum' line length - if there is such a beast - may be considerably wider for the screen than print. (http://www.humanfactors.com/downloads/nov02.asp mentions some interesting points on this.)

In any case,

newspaper col-

umns are

clearly not an

optimal line

length even

for print.

(compare that

used in books.)

There are, I

suppose, other

layout concerns

that lead to the

use of this

kind of width.

There is of course a middle ground: it is perfectly possible to set a size in percentages, with min-width and max-width styles to hold the characters-per-line to reasonable limits. The problem of it not being supported on IE/Win can be avoided using the JavaScript hack on my site that I'm plugging right now (yay!).

But, for all-purpose body text (as opposed to special presentational items), if I'm forced to choose between a complely fixed width in ems (or, even worse, px) and a completely fluid width in %/auto, I'll take the fluid every time. I'm not arrogant enough to believe I know better than the user how they want to view their page. And no-one likes horizontal scrolling.

So said Andrew Clover on Monday 15 December, 2003 at 7:29PM GMT.

Comment 3

Print traditions of line length are suspect but you appeal to the fold? I think mice with wheels are really the dagger in the heart of this argument, as you alluded to. The Logitech mouse I'm using now has three buttons for scrolling, plus a wheel. The main reason I switched to fixed was not ease of implementation, but rather I really believe in shorter line lengths, even though mine are a tad long themselves. I have been told a thousand times by "traditional" designers that shorter line lengths were better, but I disregarded them as not hip to this new medium we were all exploring. Then I began to notice that, at least with my personal style of reading/scanning, I process and retain information much better on sites I read with shorter line lengths. When I started writing this comment in fact I was saying something entirely different than I am now, because I had skimmed over part of your entry that changed the meaning and how I respond. I can read a dozen studies and hear other people talk about this all day, but I can really only speak with certainty to my own experiences, and these bias me greatly toward limiting line length which is often in the context of a fixed-width design. If you start to pay attention to your own habits and information retention you may notice something similar, or you may simply decide I'm a kook. Fair enough either way. :)

So said Matt on Tuesday 16 December, 2003 at 9:48AM GMT.

Comment 4

Personally I think there's a simple solution. Instead of using fixed px-width columns, use all-liquid columns. If you make every column (including navigation) a percentage width, then you can keep the middle column under control. I found it to be the best compramise and you can mix in some max-widths if you set out your divs in that respect.

But lets face it - the real problem with fluid designs is not the readability. It's that it's harder to far easier to design fixed designs in photoshop! You can position everything in the width perfectly - you even know how long your header graphic can be, instead of having to design one that loops or goes on for 1600px or something.

That's ultimatly the problem, and that's why this problem will never go away.

So said Andrew Bowden on Tuesday 16 December, 2003 at 9:52AM GMT.

Comment 5

Oh and I'll add this one thing - if someone wants to have their browser maximised at 1600px wide or whatever - why shouldn't they? If they want to read it that way, fine. If they don't, they can put their browser at a sensible width :-) It's user choice all the way with me!

So said Andrew Bowden on Tuesday 16 December, 2003 at 9:56AM GMT.

Comment 6

Yes, I agree with Andrew. I think that is at the heart of the matter really. Giving users the choice is always going to be the best way to go. Liquid layouts allow the user to choose the width of their text. Surely, this is the best solution. I think, generally, usable design is about giving users choice and not trying to enforce too many rules in the viewing of your content. Users know how to resize window as a basic computer skill these days so sure this is not a problem.

This liquid design does however make the designers job really hard. Tradtionally, print designers designed for a fixed page size ("Draw your design into this box" kind of thing). With liquid design, a page can be any width, any height with almost any text size. This basically renders the traditional graphic design approach to web design almost useless. Does this mean it's time to work out a new methodology to web page design?

So said Dan Webb on Tuesday 16 December, 2003 at 2:08PM GMT.

Comment 7

Sorry Andrew, should have read your other post properly. I've just repeated what you said more or less.

But anyway, I agree.

So said Dan Webb on Tuesday 16 December, 2003 at 2:10PM GMT.

Comment 8

I've allways prefered fixed-width designs because I think in 95% of the cases they just looks better and because of the shorter sentence length.
A lot of websites allready offer the options to increase font-size, change the font-family or even change the website-colours by switching the stylesheet ... maybe an option to go from fluid to fixed wouldn't be bad either.

So said Bart Noppen on Tuesday 16 December, 2003 at 9:29PM GMT.

Comment 9

My last company experimented with that but it scared the users massively. Isn't it simpler and better just to let the user resize the browser to the size they want?

So said Dan Webb on Wednesday 17 December, 2003 at 12:00PM GMT.

Comment 10

It would be simpler but I for one refuse to do so. I do everything fullscreen, including surfing the web, so if sentences are to long for me to read in a comfortable way, that's the fault of the webdesigner and not mine because I don't want to resize my browser. I use Firebird with tabbed browsing ... I don't want to resize my "whole" browser window because a website on tab 1 is to width while other (fixed) websites on other tabs look good at fullscreen.
I will stick to fixed width untill all major browsers support min-width / max-width.

So said Bart Noppen on Thursday 18 December, 2003 at 1:17AM GMT.

Comment 11

But what's the point in fullscreening, when you're getting no benefit out of it? To me, that makes no sense!

So said Andrew Bowden on Thursday 18 December, 2003 at 12:09PM GMT.

Comment 12

I like everything fullscreen ... it's a habbit.

So said Bart Noppen on Thursday 18 December, 2003 at 10:36PM GMT.

Comment 13

I've found that designers generally like fixed aspect because it allows the proportions of a design to be maintained. Traditional designers like this, and who can blame them. As Andrew pointed out its a lot easier too. From my experience a lot of designers ( not all ) find it hard to think of their design stretching. I prefer and now build all my sites fluid, where possible. That said fixed has its place. Using a combination of fixed width columns and a fluid area that grows to take up the extra screen space works quite well.

So said Chris on Saturday 20 December, 2003 at 3:20AM GMT.

Comment 14

There are numerous study on reading habits in print and I would bet that most of these study work for the web. It is a fact that longer line are harder to read, I regularly increase the font size to be able to read clearly (it decrease the number of words per line), I did it here. It's also true that designer tend to design for fixed width as a habit, I even made my website look like pages. To me saying the fluid layout are better in usability would means that everything that I know about typography is wrong witch I'm not about to say.

One problem with usability expert is that they know next to nothing about typography, sometime a simple typographic solution make more sense. I had one argument many times with usability expert, they always insist on moving things at the top of the page when good use of color and typography can have the same effect sometimes.

I'm a little bit off of the subject but Web usability expert really don't consider typographic rules, that's why I think a fixed layout is better, an even better one would work with min/max-width...

So said Stephane on Sunday 21 December, 2003 at 6:42AM GMT.

Comment 15

Stephane, I'm not sure how the 'usability expert' you know works, but a true expert certainly wouldn't ignore typography. The bottom line of usability testing is to see how easy something is for a user to use. So if improved typography improves usability, that's great. A usability expert who ignores good typography that results in making something easier to use is no expert at all.

Unfortunately, the steadfast tried and tested rules of print typography do not directly translate to the web. Readers of printed type do not have to deal with scrolling, which is one example I make in this log entry. I agree that shorter lines are easier to read, increasing usability, but they throw up problems that also decrease usability and that's the problem - there is no right or wrong answer - there are advantages and disadvantages to both fixed and liquid layouts.

So said Patrick on Sunday 21 December, 2003 at 1:24PM GMT.

Comment 16

Consider this: if you use percentages, as the user shrinks the viewport the columns get smaller as well, and you end up with the stilted skinny column problem. Also percentage use can make it impossible to maintain the integrity of, say, a navigation element when the column is suddenly narrower than the longest word in the list. Regardless of the percentage you use, the column won't resize, and eventually you have problems.

A fixed design can be done with the primary content taking up only a 500 pixel width. This enables users to resize and scroll in such a way that they can read the content while having other windows open. A minimum of horizontal scrolling - and frankly, if you're going to resize your browser to 500 px wide, how can you NOT expect to have to horizontally scroll?

(This gets to one of my pet peeves - it's one thing to be inaccessible to standard browsers, it's another thing to have failed to account for the .03% of users who prefer to surf the net while projecting the content on the back of their golden retriever's head. Where do we draw the line? At what point do we stop and say, "No, I'm not going to accomodate that, you don't need to have that flexibility?" In a day and age where barely anyone has a screen that is less than 800 px wide, is it really important to make the page sizable to 200px across, or is that overkill?)

So said Neal on Monday 29 December, 2003 at 9:31AM GMT.

Comment 17

Speaking from a purely personal point of view; I tend to use fixed layouts for anything "arty" and more fluid layouts for sites designed for conveying information clearly. For instance, my own home page uses fixed widths and does not accommodate increasing text size at all well, but is eye catching and graphically intensive. Seeing as the role of the site is more about grabbing attention than conveying serious information, I don't feel guilty about the criticisms that can be leveled at it over its usability.

However, for a recent corporate web site I've designed, the polar opposite is the case and it's geared purely toward the conveyance of a lot of information. The design has therefore, been constructed so that it allows a reasonable amount of liquidity and elasticity. Boosting the font-size to 90pt or shrinking the window to 100px across will still make it look odd, but it'll look perfectly good with 36pt text in a 500px wide window. I believe that should suit the majority of users' needs and preferences, without having to compromise too much on aesthetics.

I personally believe it's about getting usability right for a given situation, rather than arguing the layout right and wrongs for all web based information.

So said Ian on Wednesday 14 July, 2004 at 4:00PM GMT.

Comment 18

I agree with Ian here completely. Trying to decide which design is good overall is like trying to decide which car is the best. The best for who, for what road, at what speed, etc.? These are the questions one needs to ask first. Furthermore, multiple templates on a single site is becoming more and more widespread which should support the delivery of different kinds of media (graphics versus text, etc.) without inconveniencing users in one way or another.

An excellent example and one which has been around for quite some time now is that of http://www.iht.com. Click on any article heading and you go into a READER view - one which is specifically designed for text delivery. Multiple options there: change font size, pick the number of columns (including an option for a one-column vertical scrollable text), very user-friendly navigation through the text by just clicking on either side of the screen. If we are arguing about usability and freedom of choice, this should be high up on the list. That design is a lot more based on concept and understanding the needs of the user than on tweaking a widely-used design to look new and fresh. Notice that the text delivery mode (the article reader view) is different than, say the front page of the site which further supports the argument that there are different means to achieve different goals.

One last word on experts... In today's seemingly overcomplicated world experts are increasingly people who know everything there is to know in one very tiny, specialized pocket of human knowledge and are pretty much morons in every other aspect. So much so that even their highly specialized knowledge in that one tiny pocket is getting to be pretty useless since they have difficulty connecting it to the broad picture of human experience. My apology here to the experts who are the exception to this but, unfortunately, you are but a mere drop in a sea of fools. So, pay less attention to experts and use your common sense. It will likely lead you to better conclusions most of the time.

P.S. I use a 1600 x 1200 monitor and I found this website definitely hard to read. I also hate to resize my windows since I loose sight of my tabs (using Firefox) and because I don't like to see fractions of the windows behind the one I work with currently. The font also appeared terribly small and I had to size it up about 4-5 steps until it became comfortable (thus the line length dropped, too). Problem is, when I leave this page, I have to size down again. Is that so much better than that I saved a few rolls with my mouse wheel?

So said [Anon] on Friday 11 February, 2005 at 6:13PM GMT.

Comment 19

Typically nowdays you see a screen size averages of 65% 1024px 20% 800px 10% 1280px and only 0.5% 640px width. (my latest visitors stats on 500.000 hits in February 05). The remaining part have screens ever wider than that. So where is your optimal fixed width size???

What about printing content from the web... No-one seems to keep in mind that a lot of people still find it easier to read long texts from the printer. In Europe, where A4 paper is narrower than Letter size we have to deal a lot with cut of right parts (don't you hate it). You have to support a width of about 590px to be able to print. Sure, with CSS you can unleash your widths, but a good flex design still beats all.

Flexible designs allows you to easily cater for all those widths. It shows good on any width and people can decide for themselves their optimal reading length. On bigger screens, 1600px+ (where no-one to my knowledge uses their windows full screen anyway) people can decide for themselves.

My experience is that fixed layout has more to do with paper-based DTP of designers than online design. That's why they hate flex because it does not fit into their creative processes. I find a flex layout design like a house with movable walls. Adapting to space requirement and optimally using space. You see it creeping into other designs, like cars with movable back seats or PDA that slides op to show 50% more screen.... unleash your boundaries....that's how I feel...

So said David Vandermeersch on Thursday 3 March, 2005 at 5:42PM GMT.

Fixed vs. Fluid

Monday 15 December, 2003 ( 1:30PM GMT)

Comments

See Also