molly.com
Saturday 16 April 2005
Fixed Versus Liquid: The Beat(ing) Goes On
FIXED VERSES LIQUID DESIGN. You’d think the argument would be over by now, but no, it’s re-emerged and with a bit of a vengeance.
So there we were at SXSW, geeks drinking ’til all hours of the morning. Around 3:00 a.m. an argument – well, okay – a “discussion” ensues involving Jeremy Keith and several others about which is better: Fixed or liquid design?
Porter and I just looked at each other and said “Didn’t we have this discussion years ago? Of course, back then we were talking table-based design. That small fact aside, I found this column I did in 1999 for Web Techniques Magazine, Dynamic vs. Fixed: A Proposal for Peace at the Table in which I wrote:
“What happened to table manners? They seem to have dropped down and rolled away like so many undesirable peas, left for the dogs to sniff at and the cats to bat about.
The borders have been drawn – on one side sit the dynamics, arms crossed, demanding that dynamic table layouts are the only appropriate way to go, ever. Across from them are the fixed folk, insisting that fixed table layouts are the absolute way to maintain the integrity of a given visual design.
Is there a right or wrong approach? As any good mom will tell kids battling away at the dinner table, there’s no right or wrong answer here. The truth lies somewhere diplomatically in the middle.”
– Molly E. Holzschlag, October 1999
Despite the fact that we’ve moved to CSS as a primary means of laying out pages, I still haven’t given up this point of view. Jeremy continues the conversation in his recent post Fixed Fashion:
”Y’see, I always assumed that the prevalence of fixed-width sites was the result of an informed decision. I imagined that designers weighed up the pros and cons of fixed and liquid design and then, after careful consideration, chose to build a site with a fixed width layout.
Now I’m beginning to think that this scenario is wishful thinking. Could it be that most designers are simply making the decision based on what everybody else is doing?
If so, that’s a disturbing thought. Decisions as important as that shouldn’t simply be the result of a sheep-like attitude .“
- Jeremy Keith, April 2005
Since my recent article for Design In Flight, I’ve been busy with emails asking to explain the difference, why a designer might want one over the other, and so on.
Clearly the issue is long from dead, despite my desire to go back to the party, tuning out the screams of “FIXED! NO! LIQUID!” in the background.
My position remains fixed. The context of the design is what will decide. As you can see, I’ve opted to remain among the liquid for now. How about you?
Filed under: standards, web design and development
Posted by: Molly | 14:59 | Comments (48)
the problem with purely fluid layouts that take over the entire screen size comes when a user has small text size, or a large screen…you end up with really long “one liner” paragraphs. this reduces readability, usability, accessibility. conversely, fixed layouts pose problems on varying screen sizes and when users want a large text size.
the most ideal layout, of course, is one that is fluid not relative to the screensize, but relative to text size – plus some limits (max-/min-width) to avoid unnecessary horizontal scrolling. of course, the fact that the dominant browser doesn’t like to play ball with max/min-width is a limiting factor…
the one difference of this argument compared with the original table discussion is that you *can* offer both versions easily via simple stylesheet switching.
Patrick: Meet
body {max-width: 60em;
}
substitute body for any other element appropriate for styling, and substitute 60em to something that fits your design.
Those of your readers who are most likely to have a setting that will trigger this, are also the ones most likely to already having switched to a browser that supports max-width.
And for heaven’s sake: Use it now, even if IE doesn’t support it yet. If it’s not coming into use, I doubt the IE team has any incentive to fix this.
You may remember me arguing on the fixed side that night — but really I was just feeling ornery. My mini-bar had been emptied to fuel that debate after all!
But I agree with you, it’s the context that should dictate.
I personally prefer fixed width. I like fixed visually. But even that is a generalization. There are some sexy liquid sites out there and some fixed sites that are ugly as homemade sin.
As with many things “Web” and in the spirit from which this debate springs — it depends.
Even though I don’t totally count, because I’m still using a table layout (I’m sorry, it *will* be fixed in the next iteration), I figured I’d throw in my two bits.
I use a fixed layout, because I find it hard to read if the text is too far across the screen. I currently have a 21″ monitor, and I’m still not planning on changing the width of my website simply because I like how it reads. Perhaps instead, I’ll add a feature to allow people to apply their own skin to it.
I prefer “fluid” instead “liquid” or “fixed”. “Fluid” is same as “fixed” but with relative units.
This allow users increase font size and the entire layout. More accesible I think.
My web is an exemple of this. It uses experimental technical called Column-swapping.
I agree with the need for a happy medium, and to let the design have the last say. I use some fancy CSS to let a page be liquid within a certain width.
While always a fun question to pose, this is one of those scenarios where you should cross your fingers behind your head, kick your legs and just relax for a minute.
Why? Because we’ve reached the point where layout discussions are based on a solid, accepted theory. In 1999, would you have though you’d receive the same flavor of comments as today?
*big sigh*
I’m glad we’re finally all here.
I’ve never really understood the Liquid side of the argument. I remember the core of the argument being that readers should be allowed to get “more” on their screen if they want it, but in these high-res times that basically just means that a site that might otherwise be attractive and readable (such as this one) gets stretched into some unpleasant thing that’s a chore to read through (which I’m looking at right now).
I think liquid layouts actually hinder accessibility/readability rather than helping them. I haven’t done one for years, and though I’m perfectly willing to change, I haven’t yet seen an explanation of liquid layouts that has persuaded me to do it.
I personally, prefer fixed layouts from an aesthetic point of view. I also use a TFT with 1280 x 1068 resolution, and like the fact that fixed layouts just sit in the centre of the screen, whereas you can know with a reasonable degree of certainty that they will just fill the screen for those with smaller monitors using 800 x 600, (sadly some folk still are…our machines in college are all 800 x 600 for example, even the 17″ ones).
However, it does come down to personal preference anyway, I think. I have seen some beautiful liquid layouts, but the box in the middle just suits me better for now
Ummmm….make that 1280 x 1024 res oops.
I don’t care, as long as lines are not too long. Yours are (on my monitor).
I think the beauty of liquid is that it puts the control of the layout in the hands of the user. If the lines are too long/short they can adjust the browser to fit their reading style.
Power to the user. Woot!
I’m still don’t the why monitor size or resolution should have anything do do with it for so many people (not meaning the commenters here, just a general observation over time).
I visited an experimental video artist a few years ago who needed 1600×1200 resolution for his work. It never occured to him not to open browser windows full size. For an artist that spends 95% of his time in video editors, perhaps this is normal.
For average users, and graphic artists and web professionals in particular, what on earth would possess you to think the browser should be full screen size?
All of my monitors (2 on the desktop pc and a 15″ powerbook) have a resolution greater than 1024 in width. I rarely have a browser window open larger than 1024×768. This seems to work best for the majority of sites and feels most comfortable.
I tend to prefer liquid in general, though my current site version uses a fixed width, primarily because I haven’t had much time to work on it, so it’s a simple hacked version of a default template.
Ideally, full support of min/max width will make things easier, but it’s really not all that hard, provided you are able to let go of the idea of having your site look like print.
Fixed width in pixels is hopeless, because it will break horribly if the text size is enlarged. Since most designers who prefer to do fixed-width layouts seem to be eagle-eyed 20-year-olds, who think a 9px font is the bee’s knees, there is a bit of a problem.
Fully liquid has its usability issues, as has been mentioned. They can be fixed (pardon the pun) by merely changing the window width, though. My guess is that there are more users who know how to do that than how to change the text size.
The best compromise, IMHO, is a liquid/elastic hybrid, with “fixed” sizes specified in ems, and a min-width and a max-width for the main content. That’s what I do on my blog, with a hack to keep it usable in IE.
I got tired of this argument so I created a liquid layout (using max-width) and added a fixed width alternate style sheet.
Why choose one or the other when you can have the best of both worlds?
Perhaps it’s the problem that users have defaulted not to restore the maximised browser window to a non-maximised width/height that accommodates the content.
Isn’t maximised-window browsing the origin of the “prefer not to use liquid layouts” argument? (And the window metaphor the origin of the whole problem, as there is no default state)
However then the question becomes if the webpage should accommodate the browser window’s size indiscriminately or should be fixed to a readable size above a certain resolution (as the browser itself should always be in the domain of the user and therefore not be adjusted)
IMHO in an ideal world it should be up to the browser to provide this window resizing functionality on a document/tab basis rather than for the whole browser so the user can accommodate a readable format for the document. However as the user will not know how optimal readability is achieved the author can help in providing intelligent widths.
Web designers are not the end-responsible in ensuring that usable website-viewing technologies (for the lack of a better name) are implemented. Things like sitewide styleswitchers, window-size adjustment, page-zooming and a lot of other clever page behaviour currently done through javascript should be in the browser space, not sitespace.
It does, again, depend on the audience. I’m currently working on a site that has a very wide audience. We serve special needs and senior housing communities. This means, not only do we possibly have blind users, but also low-vision users. The site MUST still work when the fonts are increased.
If I were building a site for twitch-n-click gamer crowd, fixed would be fine, because they need the vision and reflexes for their games. But when it comes to serving the larger community, fluid is the only way to go.
Many of these comments seem to indicate that fixed layouts break when text size is increased, which is a flawed basis for this argument.
A well-designed fixed layout (even a hi-fi one) can be “bulletproof”, and its text contents can scale up and down to any reasonable size without breaking it. It just takes a little skill and planning.
Do you not have cell phones, wi-fi PDA’a or 12inch notebooks with a max res. of 1024. It’s the future
I heard someone mentioning the possibility of using javascript to feed fixed design to computers and fluid as default. At the end of the day it depends on your audience. Are they coming from small appliances or using computers. The BBC news site has a seperate site for small appliances.
@James Archer: Could you provide a link to such a well-designed fixed layout? I fail to see how it would work, but I don’t mind being proven wrong.
It might be a bit easier in a language like English, which uses mostly short words, but I think you’d find it a lot more challenging in Swedish, Finnish or German, for instance.
re:Peter Buchy
People with low vision or no vision don’t play games then? It is a bold statement to say that a website about games won’t attract users that appreciate font-sizing.
As was said before, it really depends on the context: what is you site about and who is your audience. Examples:
If your site is a weblog, a fixed layout or a fluid one (one where the width depends on the font size) is probably best because it means you always have lines that are neither too short nor too long to read.
A fixed layout is also better if you have a site that relies heavily on artwork that needs exact positionning.
However, if you are developing an online corporate banking application where your users will see large tables full of numbers that can stretch quite a bit horizontally, a liquid layout is better because it lets you take advantage of the screen real estate: the more information those people have on the screen the better.
But whatever you do, make sure it behaves nicely when changing font sizes, screen size, etc. Even a fixed layout should be flexible to a certain extent.
I thought us fixed guys won this argument years ago… :>
[...] ssential sound. Geek love: Sunbeam 10-in-1 front panel, has every hole imaginable. The boxers or briefs of webdesign. Posted on April 21st, [...]
Fixed Width Layout – The Desire for Pixel Precision
Following on from a couple of Fixed vs Liquid discussions last week (notably from Jeremy, Molly and Jeremy (again)) I did a quick (ish) litmus test of my own using the fantastic CSS Zen Garden.
Of the 160-something Official Designs, only 13 are liqu…
In My Humble Opinion
Design should be based on the best possible end user experience, design that uses as much of the available screen is good because the user doesn’t have to “work” as much to get at the information. However; There is a point where more “effort” will be required by the user if there are long lines that don’t wrap etc. We all know this right?
Fixed width layout fixes issues with uber long lines of un-wrapped text.
Dynamic width layout provides that as much of the screen real-estate is used as possible so more information can be displayed at any one time if the screen is large, and also provides smaller res screens with a layout where horizontal scrolling isn’t required.
Fixed width layouts on smaller screens may require the user to scroll two dimensions, which is more effort. Thinner layouts would fix the previous issue.
Thinner layouts on larger screens waste useful space.
With this reasoning I would perhaps suggest that a dynamic width layout provides that less effort is required to get at the information regardless of the available screen area.
However; there is still the issue of long lines being unreadable on large res screens.
I think that setting a maximum width for dynamic layouts is a good fix for this.
Now I know that some designers like fixed width purely from a aesthetics point of view, and I guess that in this case – should you choose to design a fixed width layout, you have the freedom to do so.
I also think that perhaps the issue of fixed width versus dynamic width is a molehill. Can someone explain why choosing one or the other is such a big issue?
In My Humble Opinion
Design should be based on the best possible end user experience, design that uses as much of the available screen is good because the user doesn’t have to “work” as much to get at the information. However; There is a point where more “effort” will be required by the user if there are long lines that don’t wrap etc. We all know this right?
Fixed width layout fixes issues with uber long lines of un-wrapped text.
Dynamic width layout provides that as much of the screen real-estate is used as possible so more information can be displayed at any one time if the screen is large, and also provides smaller res screens with a layout where horizontal scrolling isn’t required.
Fixed width layouts on smaller screens may require the user to scroll two dimensions, which is more effort. Thinner layouts would fix the previous issue.
Thinner layouts on larger screens waste useful space.
With this reasoning I would perhaps suggest that a dynamic width layout provides that less effort is required to get at the information regardless of the available screen area.
However; there is still the issue of long lines being unreadable on large res screens.
I think that setting a maximum width for dynamic layouts is a good fix for this.
Now I know that some designers like fixed width purely from a aesthetics point of view, and I guess that in this case – should you choose to design a fixed width layout, you have the freedom to do so.
I also think that perhaps the issue of fixed width versus dynamic width is a molehill. Can someone explain why choosing one or the other is such a big issue?
Even though they need not, most sites using fixed design still do set fonts small, while fixing container widths in px so that zooming to make text big enough to read makes the containers too narrow to hold reasonable line lengths. There’s no reason to equate bad line lengths with liquid design, while there is good reason to equate bad line lengths with fixed widths. It really depends on how you define fixed and liquid. http://members.ij.net/mrmazda/auth/fflinelength.html
[...] com/archive/200504/about_fluid_and_fixed_width_layouts/ http://www.clagnut.com/blog/269/ http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/ [...]
re: Sander van Dragt
Regarding your reply to my comment…
I specifically pointed to twitch-n-click gaming. I don’t know many low-vision or no vision people who would find Doom 3 fascinating. I know plenty of low-vision people who play lots of online games. But the kinds of games that required a lot of visual acuity, they aren’t playing, and I would dare say that almost all, if not all, twitch-n-click games (in which noticing events immediately on-screen and responding immediately is a matter of course), are generally not going to matter to them, at least not for playing. And if you’re targetting said player, no, it probably doesn’t matter.
Please don’t misconstrue my meaning before attacking it.
Wow… here is a topic which I’ve been wrestling with for a while now with other folk I know who designs stuff: fixed vs fluid.
Me, I’m from the fluid camp, but have encountered the dreaded “one line paragraph” when someone with a width screen encounters my site. As a result, I’ve ended up using a mixture of tables and CSS to “control” the environment.
I had not heard about max-width before, but after testing a quickie page, I’m thinking I’ll be adding that to my pages to make them more managable on big/small pages.
Thanks for the interesting post/article!
Wing
Readability research points out that a line should consist of about 12 words to support maximum readability. 12 Words, in a 12px font, is roughly 350 pixels. Anything much wider than that tires the eye muscles. Can you imagine the impact a liquid design has on any text rich website’s readability, when text columns span over 1,000 pixels?
So, both from the design, as well as the usability point of view, liquid design is horror.
If liquid design is horror, then the viewers could resize their browser window, to prevent their eyes from falling out. I’m sure all the victims in danger of liquid blindness are using this technique right now.
Regardless, there are some liquid designs that work: http://liquid.rdpdesign.com
I think you should get HELP FAST!
I visited an experimental video artist a few years ago who needed 1600×1200 resolution for his work. It never occured to him not to open browser windows full size. For an artist that spends 95% of his time in video editors, perhaps this is normal.
[...] Fixed vs. Liquid: The Beat(ing) Goes On – by Molly Holzschlag. Good geek debate about the pros and cons, over a number of beers. [...]
[...] molly.com Fixed Versus Liquid: The Beat(ing) Goes O (http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/) [...]
[...] molly.com Fixed Versus Liquid: The Beat(ing) Goes O (http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/) [...]
O.K so I’m new to all this, But wouldn’t an “old school” widely accepted means of text editing work for extra long text lines?
Why not manually insert a line break where you want your text to go to the next line?
All browsers recognize it, no matter how wide your screen is, the text will preserve it’s readability.
If this does not work, then why? is it just to low tech?
I think liquid width is a great thing. There are tons of users who only have 1024×768 displays and tons of users with 1440×900 and bigger. Liquid width allows you to accommodate all of these users. The max-width thing is also great if you design will look dumb stretched out that far. As far as IE goes, just do one of those crazy hacks to make it accept the max-height thing.
Hi there,
I’m happy to see this discussion is pending to the mixed-mode. As stated before: why pick one or the other if you can have the best of both.
For all of you using a web-browser: look at the top of it, where you have the address bar, menus and etc. Now, take a look at the bottom of your browser. Can you see the footer? Well, now try and redimension the browser. As you can see, only the content (or the area where your page is opened) is redimensioned.
As most of you are aware of, most companies out there are choosing web-applications instead of regular executables applications. On my side, what I can tell you is that the user is actually asking for features in web-applications only once possible in desktop environment.
Just a good exemple of what I mean, maybe you’d like to take a look at this site: “http://live.intersoftpt.com/default.aspx?path=WebDesktop/First Experience”, and this one too: “http://support.intersoftpt.com/default.aspx?type=Online Demo&pid=136″. Both carries the kind of stuff the market is putting as requirements when asking for software.
Maybe I am not the best person whom you could discuss layout to since I am developer and not a designer (most managers seem not to see the difference), but I felt like no attention were given to WebApps at all (I think someone mentioned a bank application with reports or something). Either way, I only wish one day we can do with our web-pages the same thing we do with Win32 apps, regardless of the browser one choose to use.
Thanks for your time
P.S.: It’s 4:00am, english ain’t my native language and I am too tired to re-read the text. So, excuse me if anything seems out of place.
P.S.: Have to agree Molly, nice work you’ve done around here…
Very good discussions going on.
Here are my observations…
Liquid Layouts:
1. Great for users as this works better in all resolutions and all devices.
2. One liner paragraphs are not too common and hence is not such a big issue to not to use liquid layouts.
Fixed Layouts:
1. Greater control for designer.. but bad for very large screens and mobile devices.
2. Looks great in the resolutions it is designed for.
3. But since the trend is for larger screens and mobile devices, this needs to be considered strongly.
MY Conclusion: Liquids are better bet.
good sitee
good blogger
very nice