Comments (48)

1. 

   patrick h. lauke says Saturday 16 April 2005 at 15:11

   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.
2. 

   Arve Bersvendsen says Saturday 16 April 2005 at 15:33

   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.
3. 

   Keith says Saturday 16 April 2005 at 16:51

   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.
4. 

   Jo-Pete Nelson says Saturday 16 April 2005 at 17:55

   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.
5. 

   are says Saturday 16 April 2005 at 19:21

   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.
6. 

   Jehiah says Saturday 16 April 2005 at 21:48

   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.
7. 

   Dave Ferrick says Saturday 16 April 2005 at 22:19

   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.
8. 

   James Archer says Saturday 16 April 2005 at 23:26

   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.
9. 

   Jewel says Sunday 17 April 2005 at 05:17

   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 🙂
10. 

    Jewel says Sunday 17 April 2005 at 05:18

    Ummmm….make that 1280 x 1024 res oops. 🙁
11. 

    Rimantas says Sunday 17 April 2005 at 07:59

    I don’t care, as long as lines are not too long. Yours are (on my monitor).
12. 

    Gina Groom says Sunday 17 April 2005 at 09:07

    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!
13. 

    Yvonne Adams says Sunday 17 April 2005 at 10:40

    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.
14. 

    Tommy Olsson says Sunday 17 April 2005 at 22:59

    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.
15. 

    John Serris says Sunday 17 April 2005 at 23:13

    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?
16. 

    Sander van Dragt says Monday 18 April 2005 at 03:41

    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.
17. 

    Peter Buchy says Monday 18 April 2005 at 07:04

    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.
18. 

    James Archer says Monday 18 April 2005 at 14:36

    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.
19. 

    don says Tuesday 19 April 2005 at 00:18

    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.
20. 

    Tommy Olsson says Tuesday 19 April 2005 at 00:33

    @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.
21. 

    Sander van Dragt says Tuesday 19 April 2005 at 04:27

    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.
22. 

    Bruno Girin says Tuesday 19 April 2005 at 10:04

    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.
23. 

    Mad says Thursday 21 April 2005 at 05:39

    I thought us fixed guys won this argument years ago… :>

24. Pingback: eachman.com » Archive » If I had a linkblog, ya ha deedle deedle, bubba bubba deedle deedle dum

25. Pingback: Elly Thompson's Weblog

26. 

    Aaron says Saturday 30 April 2005 at 06:27

    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?
27. 

    Aaron says Saturday 30 April 2005 at 06:27

    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?
28. 

    Felix Miata says Monday 2 May 2005 at 17:07

    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

29. Pingback: elyste | Entrée | Fixed, fluid, liquid, elastic…

30. 

    Peter Buchy says Thursday 12 May 2005 at 09:36

    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.
31. 

    Wing says Friday 20 May 2005 at 12:36

    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
32. 

    Alex says Monday 29 August 2005 at 15:53

    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.
33. 

    C Montoya says Sunday 25 September 2005 at 02:27

    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
34. 

    Samantha says Monday 10 October 2005 at 15:06

    I think you should get HELP FAST! 🙁
35. 

    ruckusboys says Sunday 2 April 2006 at 13:45

    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.

36. Pingback: Stupid Wordpress Tricks » Fluid, Fixed, and Elastic Width CSS Layouts

37. Pingback: » Blog Archive » Basics of the ‘Liquid VS Fixed’ Website Layout Debate in Modern Website Design Solomon Rothman | Web Designer, Filmmaker, Writer

38. Pingback: Web Design Articles & Advice » Basics of the Liquid VS Fixed Website Layout Debate in Modern Website Design

39. 

    Karl says Wednesday 1 August 2007 at 08:40

    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?
40. 

    Sam Soffes says Saturday 24 November 2007 at 16:45

    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.
41. 

    Daniel says Friday 11 April 2008 at 01:22

    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… 🙂
42. 

    Santhosh says Thursday 15 May 2008 at 06:29

    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.
43. 

    jigolo says Thursday 24 July 2008 at 11:43

    good sitee
44. 

    kuaför says Thursday 24 July 2008 at 12:22

    good blogger
45. 

    ataşehir says Thursday 24 July 2008 at 15:30

    very nice