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 | 2:59 pm |
April 16th, 2005 at 3:11 pm
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.
April 16th, 2005 at 3:33 pm
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.
April 16th, 2005 at 4:51 pm
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.
April 16th, 2005 at 5:55 pm
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.
April 16th, 2005 at 7:21 pm
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.
April 16th, 2005 at 9:48 pm
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.
April 16th, 2005 at 10:19 pm
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.
April 16th, 2005 at 11:26 pm
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.
April 17th, 2005 at 5:17 am
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
April 17th, 2005 at 5:18 am
Ummmm….make that 1280 x 1024 res oops.
April 17th, 2005 at 7:59 am
I don’t care, as long as lines are not too long. Yours are (on my monitor).
April 17th, 2005 at 9:07 am
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!
April 17th, 2005 at 10:40 am
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.
April 17th, 2005 at 10:59 pm
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.
April 17th, 2005 at 11:13 pm
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?
April 18th, 2005 at 3:41 am
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.
April 18th, 2005 at 7:04 am
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.
April 18th, 2005 at 2:36 pm
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.
April 19th, 2005 at 12:18 am
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.
April 19th, 2005 at 12:33 am
@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.
April 19th, 2005 at 4:27 am
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.
April 19th, 2005 at 10:04 am
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.
April 21st, 2005 at 5:39 am
I thought us fixed guys won this argument years ago… :>
April 21st, 2005 at 8:23 am
[…] ssential sound. Geek love: Sunbeam 10-in-1 front panel, has every hole imaginable. The boxers or briefs of webdesign. Posted on April 21st, […]
April 25th, 2005 at 2:16 pm
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…
April 30th, 2005 at 6:27 am
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?
April 30th, 2005 at 6:27 am
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?
May 2nd, 2005 at 5:07 pm
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
May 7th, 2005 at 3:46 pm
[…] 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/ […]
May 12th, 2005 at 9:36 am
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.
May 20th, 2005 at 12:36 pm
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
August 29th, 2005 at 3:53 pm
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.
September 25th, 2005 at 2:27 am
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
October 10th, 2005 at 3:06 pm
I think you should get HELP FAST!
April 2nd, 2006 at 1:45 pm
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.
May 15th, 2006 at 2:23 pm
[…] Fixed vs. Liquid: The Beat(ing) Goes On - by Molly Holzschlag. Good geek debate about the pros and cons, over a number of beers. […]
June 11th, 2006 at 11:10 pm
[…] molly.com Fixed Versus Liquid: The Beat(ing) Goes O (http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/) […]
September 13th, 2006 at 8:25 pm
[…] molly.com Fixed Versus Liquid: The Beat(ing) Goes O (http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/) […]
May 21st, 2007 at 11:11 pm
http://www.sh-scpv.com/ pump
http://www.sh-scpv.com/ china pump
May 22nd, 2007 at 2:02 am
http://www.sh-scpv.com/Diaphragm-Pumps.html Diaphragm Pumps
http://www.sh-scpv.com/Screw-Pumps.html Screw Pumps
August 1st, 2007 at 8:40 am
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?
November 24th, 2007 at 4:45 pm
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.
March 30th, 2008 at 10:09 am
thanks
April 7th, 2008 at 2:23 am
it is easy to find it, i think u just search on google or yahoo
April 8th, 2008 at 6:25 am
but, i think it is another thing which you have
April 8th, 2008 at 3:55 pm
i like it
April 8th, 2008 at 9:22 pm
interesting, thanks
April 9th, 2008 at 6:37 am
do you know everything about css?
April 9th, 2008 at 2:31 pm
how can i find everything about css?
April 10th, 2008 at 5:15 am
what do you want to learn about css? we can help easily
April 11th, 2008 at 1:22 am
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…
April 11th, 2008 at 8:33 am
i want learn too, i want start at the beginning of css
April 11th, 2008 at 3:16 pm
it is good t see u
April 21st, 2008 at 6:39 pm
thats the matter i want to learn
April 21st, 2008 at 10:47 pm
ok,thanks
April 22nd, 2008 at 7:44 pm
Nice job.
April 22nd, 2008 at 7:44 pm
Thanks,very nice blog.
April 24th, 2008 at 6:07 am
hi, umit. how is going on