Fixed Width vs. Liquid Layout - Your Take

November 11, 2003 | 35 Comments

Which is better - a fixed width layout or a liquid layout?

I’ve heard many arguments for both sides of this issue over the years and it seems to be there are many cases in favor (and against) for each.

Simon recently posted about a method that combines the two, in which he expressed some conflict over which he would prefer.

I’m similarly at odds on this issue. On some sites I prefer a liquid layout and on others I prefer fixed. I think it might come down to audience and the type of content. I do imagine there are people out there who prefer one or the other no matter what as well.

So what do you think, both as a user (reader) or Web sites and as a Web designer or developer? Do you prefer to have flexibility in your layouts or are you happy with letting the designer dictate that to you.

Feel free to respond how you wish and please, include examples if you wish.

Filed under: Web Design

Comments

1. Brian Casey said:

After years of using liquid layouts, I’m a recent convert to fixed width. As screen resolutions continue to grow, most liquid sites produce line lengths that are uncomfortable to read when the user’s browser window is set wide.

Posted on November 11, 2003 11:38 AM | #

2. Michael Heilemann said:

I have always been married to fixed layouts. Comes from me wanting to have full control.

And as Brian mentions, line-lengths get annoying when you’re on 1280+.

Posted on November 11, 2003 11:50 AM | #

3. tomjleeds said:

Same as the other two comments - with large resolutions having a liquid layout can cause problems. It depends on the design - sometimes I’ll use liquid, sometimes fixed, although I probably spend more time doing fixed-width designs.

Posted on November 11, 2003 12:38 PM | #

4. Simon Fodden said:

I’m with all the previous comments: fixed width makes text possible to read. If people all worked with their browsers set to a text-reading width, then liquid might be okay. But they don’t, and nothing is worse than a dense pack of letters reeling across great pixelacres.

So, okay: you have the text column fixed; you could go ahead and spread the rest. But that usually means realms of pattern or gray. Some contrast may be necessary to make your text column hold its design – I’m still debating this for myself. But a whole screenful isn’t.

My 2 cents worth.

Posted on November 11, 2003 12:58 PM | #

5. Scrivs said:

This was my take:

http://www.9rules.com/whitespace/design/liquid_vs_fixed.php

Posted on November 11, 2003 01:21 PM | #

6. Jason Derifaj said:

Fixed man fixed.

Posted on November 11, 2003 01:36 PM | #

7. patrick h. lauke said:

brian’s first comment pretty much sums up what i was going to say.

i’d add to the mix that it might be a good idea, where possible, to offer two styles via CSS and an adequate switcher: a fixed one, and a more fluid - and more accessibility-minded, perhaps ? - layout. best of both worlds, perchance…

Posted on November 11, 2003 03:48 PM | #

8. Egor Kloos said:

Simon brings up an important point. He prefers to view sites in “maximised” windows. And this is where browser developers have failed to act on. The use of screen real estate has been neglected. In fact most OS’s don’t really deal with this issue in any sensible fashion. And maybe they should. And browsers should have caught on by now. If a screen width becomes so wide that the reading a ‘fluid’ site becomes impractical they should have, for the sake of usability come up with an alternative browser layout. Okay we have the side bar but most seem to hide this and don’t like surfing the web with this open. And besides if it contains any information it’s often not useful and or related to the site that is being viewed.

But then again maybe their is no solution and in that case we should lose our fixation with fluid layouts and consider hybrids. As Simon shows us via the “Engage” site. User Controlled Formatting maybe the answer. Now I wish that I’d added this ‘trick’ to my recent Zen Garden submission. ;)

Posted on November 11, 2003 04:17 PM | #

9. TOOLman said:

Definitely liquid. Liquid designs are more demanding for the designer, since you have to address the issue of line width, for instance. Good browsers support max-width, which makes it easier if you don’t have to pamper IE.

Fixed width designs work only in one single screen size and resolution. With the variety in displays available today, I think that’s a bad way to do things. You’ll either waste a lot of space on big displays, or force users with small screens to scroll horizontally. And how about PDAs, cell phones etc? That’s a growing market.

If a badly done liquid design makes the lines too long to be readable, I can make the browser window smaller. If a badly done fixed-width design forces me to scroll horizontally, I’ll hit the Back button and never look back.

Fixed-width design and fixed font size isn’t about designer control … it’s just laziness. ;) <running for cover/>

Posted on November 12, 2003 12:15 AM | #

10. ic said:

Why use all the real estate of the screen? Why fear the whitespace?

How about PDA? Another CSS file or no CSS at all.

I prefer fixed.

There is possible hybrid layout - fixed text column and others parts fluid.

Posted on November 12, 2003 01:14 AM | #

11. Adam said:

My vote is for a blended solution: FLUID with max-width property enabled in ie5+ via javascript.

Many designs have fixed sidebar widths that contain images, and the main content column is fluid. In my eyes, this column is the most important as it contains the content and is where the user spends most of the time reading! Sidebars only need to be sized according to the balance required in the layout.

A great way to do this is to specify:

#maincol {

min-width: 25 em;

max-width: 33 em;

}

(widths suggested by a MaxDesign presentation. Go Aussie!)

Posted on November 12, 2003 01:34 AM | #

12. chris hester said:

One of the best ideas I’ve seen is Stopdesign’s use of percentage-based columns. I think the main column is 65% while the right column is 35%. What happens is that it always seems to look good!

However, I created a layout on this principle which seems to trigger too many bugs in various browsers, for some reason. So now I’m looking at a liquid/fixed layout where the main column resizes, but not the side column. This works in tons of browsers so it’s a big benefit.

You can make your own layouts using the technique involved via this nifty program from CSS Creator:

http://www.csscreator.com/version2/pagelayout.php

Lastly, it’s about time Windows used a resizing tool like the excellent Sizer, that enables you to select the size of any window, such as the browser, from a common list of sizes. (Eg: 1024 x 768). So if you have a large desktop, you can surf at a comfortable size. (You can also set up custom window sizes - great for arranging windows. See this site for Sizer: Mi3.org)

Posted on November 12, 2003 06:15 AM | #

13. Matt said:

I guess I’m not understanding how the page you linked is a “third option.” Sure, it resizes with text size, but it definitely doesn’t resize with larger and smaller browser window sizes. The question is still fixed vs. liquid.

I’m a fixed fan, myself. I think that users with larger resolutions are used to a lot of extra white space. And let’s face it, a lot of sites just look really, really ugly with a liquid layout on a maximized browser window, when paragraphs are one or two lines long. Useability takes a huge hit as well. The point of my site is the content and readability – don’t I want to make sure that my site is readable for all users?

Posted on November 12, 2003 08:19 AM | #

14. Dris said:

It’s not a question of fixed vs. liquid; it’s a question of resolution indendence. It doesn’t matter if it’s “fixed” or “liquid”, so long as small displays render the site just as accessibly as huge displays.

Try this. Do a liquid design with liberal use of max-width. Internet Explorer doesn’t support it, but you can use the eval() trick if so inclined. Use em units for the max-width property. Thus, users with huge displays can bring up the text size in their browsers, and the width of the column will change accordingly. Vice versa for tiny displays. If done right, you can get a column 30-60 characters long at any resolution.

Include your method in your accessibilty statement so that users know they can adapt the layout by scaling their browser’s text.

In the end, it seems to come down to whether the main column of content is readable. Ems and max-width make this possible.

You could also adapt this to a fixed layout without max-width, probably a preferred method.

I don’t currently have any sample layouts on-hand, but I’ll try and work on some.

I would have to be against switching stylesheets, unless under extreme circumstances. I think it’s possible to have a single, accessible-to-all stylesheet. We’ll have to see where this goes when PDAs support CSS-P. I have no clue how they plan to make that work and still have readable sites.

Posted on November 12, 2003 09:29 AM | #

15. August said:

I think the content dictates the design. There are certain pages where fixed is a must, others where liquid suits the application much better. The key is to be flexible and not to steadfastly choose one or the other – choose the one that is most appropriate for the project.

Posted on November 12, 2003 01:39 PM | #

16. pete said:

“If a badly done liquid design makes the lines too long to be readable, I can make the browser window smaller. If a badly done fixed-width design forces me to scroll horizontally, I’ll hit the Back button and never look back.” - TOOLman

I also dislike horizontal scrolling but it seems you’d rather force users to re-size their browser window than force them to scroll? I don’t see a difference here. The viewer still has to alter his/her browsing habits to accomodate a badly designed site no matter what method was used.

Once I’d moved on from layout via tables I quickly saw the benefits of liquid designs but Dris makes a very good point in his first paragraph and having experimented with fixed width sites recently I can see a case for them although a mixture of fixed and liquid would probably work better.

A fixed width sidebar(or two) with a liquid content area would probably work well. Using Ems or percentages for all margins and padding and text would help the text scale inside the content box. actually that may work if the content box is fixed as well

Oh yeah, don’t fear the whitespace.

Posted on November 12, 2003 02:11 PM | #

17. TOOLman said:

“I also dislike horizontal scrolling but it seems you’d rather force users to re-size their browser window than force them to scroll? I don’t see a difference here. The viewer still has to alter his/her browsing habits to accomodate a badly designed site no matter what method was used.” - pete

Not really. With the liquid design, the user has two choices: accept the long lines or make the window narrower. With the fixed-width design, the user has only one choice: scroll. (Of course, in both cases, there’s also the Back button.)

My point is that a well-done liquid design will work on any device and under any resolution, while a fixed-width design will only work in a single window size and resolution.

I use a 1280x1024 LCD screen, both at work and at home. I often browse in multiple windows that are not maximized (IE at work; at home I use Mozilla and its tabs). Unless those windows are at least 800 pixels wide, most sites force me to scroll. The sad thing is that most of them wouldn’t suffer a bit from a liquid design. They’re fixed because the designer/developer wasn’t good enough to make a working liquid design.

A liquid design doesn’t imply long, hard-to-read lines (except in buggy browsers that don’t support max-width). If my upcoming redesign was finished, I could have shown you. :)

Posted on November 12, 2003 11:03 PM | #

18. Gabriel Radic said:

Screens are getting too large these days. The liquid width often gets too wide to remain readable.

Posted on November 13, 2003 06:24 AM | #

19. Matt said:

“A liquid design doesn’t imply long, hard-to-read lines (except in buggy browsers that don’t support max-width).” - TOOLman

That buggy browser is used by 95% of internet users. So you either have to use javascript, or deal with the fact that your site probably won’t work real well for a large percentage of users (IE users with high resolutions).

Posted on November 13, 2003 03:38 PM | #

20. moonshake said:

my screen is 1400*1050 px and i prefer liquid pages. i am looking at this very page and i don’t like to see 2/3 of the page filled with nothing except patterns. it is bearable if the whole content is centered horizontally, rhater than stuck to the left or right. i increase the text size using my browser and the text seems much more legible and the lines don’t seem miles long.

Posted on November 13, 2003 08:01 PM | #

21. Stephane said:

I do use both but tend to go back to Fixed more often, I just the way that I design… I go more for the correctly space type that wondering about white space.

However, as other already pointed out, using max-width is a compromise that is interesting and I’ve been looking into using that more often.

Posted on November 13, 2003 10:03 PM | #

22. TOOLman said:

“That buggy browser is used by 95% of internet users. So you either have to use javascript, or deal with the fact that your site probably won’t work real well for a large percentage of users (IE users with high resolutions).” - Matt

Are you suggesting that we just bend over and take it from Micro$oft? They can’t be bothered to fix their buggy software, so we should adapt to their bugs and code for an obsolete product, rather than focusing on web standards for the future? Besides, that 95% is highly arguable. It is probably based on server logs which show page views, not visitors. If your pages are coded for IE bugs, Mozilla and Opera users probably won’t hang around, so it’s a self-fulfilling prophecy.

And again … a liquid site will work well even for IE users with hi-res monitors. You don’t have to browse in a maximized window. If your buggy browser causes the lines to be too long, you can always make the window narrower.

However, a fixed-width pixel-based design will require horizontal scrolling on small displays, and will look ridiculous on a large monitor.

Well … in my not so humble opinion, of course. :)

Posted on November 13, 2003 10:54 PM | #

23. Dris said:

I still opt for a fixed design using em for widths, thus allowing anyone to adjust the page by adjusting the font size. It’s like having a fixed width, but with that width being chosen by the end user. Sounds like a pretty good compromise to me.

Kind of like www.k10k.com … Kind of….

Posted on November 13, 2003 11:13 PM | #

24. Matt said:

“Are you suggesting that we just bend over and take it from Micro$oft? They can’t be bothered to fix their buggy software, so we should adapt to their bugs and code for an obsolete product, rather than focusing on web standards for the future?” - TOOLman

First off, we all wish that Microsoft would fix their browser, but calling them Micro$oft is silly. Nothing annoys me more than that stupid $ substitute. Gah. Anyway…

In professional web design, as much as we’d all love to stick it to the man, you HAVE to take PC IE users into account FIRST AND FOREMOST. If that means bending over and taking it from Microsoft, so be it. I’ll save my crusade for better standards for my own personal projects. But when I’m getting paid, I will do what makes my client, and my client’s customers, happy.

On to the other stuff…a hi-res user doesn’t HAVE to browse with a maximized screen, but on the same token, a low-res user doesn’t HAVE to browse with a windowed browser. In fact, a low-res user will be much more likely to browse with a maximized browser, and a good fixed-width design is tailored to make sure that there is no horizontal scrolling for low-res users that have a maximized screen.

You are right, 95% is debatable. It is probably even higher for most commercial sites. It all depends on your audience. I did a site not so long ago for a fire department union, and their logs showed over 98% PC IE users.

I don’t design specifically catering to IE. I am an avid Mozilla user, and I do all design testing in that browser. But when I load a paid project site up in IE, and it looks bad because of an IE bug (i.e., no max-width), I’ll make the tradeoff and support IE. That’s just the way it is.

Posted on November 14, 2003 10:00 AM | #

25. Keith said:

Matt makes a very good point. If you are paying the bills with your Web site designs you need to take IE into account. As well, I think you are probably safer going with something targeting lower resoulutions if you have to make a choice.

There aren’t all that many folks out there running with a 1600 pixel width.

Posted on November 14, 2003 12:09 PM | #

26. Dris said:

This topic is about halfway down the front page. Well, I said I’d get an example up… Did this design for a friend of mine. Haven’t tested yet in anything but Mozilla.

http://tkfast.webhop.org/

Enlarge the text, decrease the text. The page scales.

Posted on November 16, 2003 10:29 PM | #

27. Matt said:

Everything seems peachy in Mozilla.

Posted on November 17, 2003 07:47 AM | #

28. Adam said:

Hey this is Adam from http://tkfast.webhop.org just thought that I would shout out to you Keith. I saw your comment on my site and decided to hit you back…

Posted on November 17, 2003 02:49 PM | #

29. Aaron Schaefer said:

After finding this topic here and checking out some of the examples from Simon, I was inspired to re-implement the css for my site that I just finished the layout on (a fluid one, in case you were wondering). I tried the “full-page zoom” technique using almost nothing but ems as dimensions, and I think it turned out well. There were a lot of problems to overcome, but it should be pretty close to “unbreakable” at this point; it has been tested in Mozilla and IE.

http://www.elasticdog.com/

Posted on November 17, 2003 10:08 PM | #

30. MJH said:

i’ve actually hit this exact issue this week on my own site while playing around. I’m moving from fixed to liquid, but i’m having trouble figuring out how to handle a fixed-width banner image… what does one do about that?

Posted on November 18, 2003 07:38 AM | #

31. Willy said:

I’ve been on the “liquid” side of the fence since 2001. Properly done, you get the same effect at any width. Is it more work? Absolutely! Is it worth it You bet it is. It’s the shape of things to come.

Posted on June 8, 2004 11:28 AM | #

32. Edgard Durand said:

I think fluid designs have an advantage when we talk about devices with small screen resolutions.

I also offer some fluid free templates on my site.

Posted on May 23, 2005 03:06 PM | #

33. adam maxwell said:

I usually work to a fixed with to suit 800x600 resolution. I am of the opinion that if you stretch out body copy, it is too hard to read.

If you are worried about your site not being usable on mobile devices, simply have the page detect the device it is to be loaded onto and have another style sheet display it with a liquid layout.

Posted on June 14, 2005 08:52 PM | #

34. C Montoya said:

Device dependency is moot point; modern CSS designs serve different stylesheets depending on the media.

Line width sounds like a complaint from rich users with the money to afford 20 inch displays.

Plus, many people who complain about line-width have websites with 10 pixel or less text. You know what hurts more than long lines? Tiny text. Let’s not ignore that problem.

Even for the whining, modern design offers progressive layouts, which have a max limit to the width. This is definitely A Good Thing.

For those who are interested, there’s a gallery of liquid designs that work.

Posted on September 25, 2005 03:00 AM | #

35. C Montoya said: