When do you choose liquid CSS layouts over fixed? Why?

Question

I was wondering what are you opinions about when coding css, when/why coding fixed or liquid style sheets?

I agree that fixed size style sheets are easier/faster to code because liquid requires more time in order to have all elements well adapting to their parents.

So, when do you chose liquid over fixed (or vice versa)? Why?

Answer 1

Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:

• http://surrey.ac.uk/
• http://bostonglobe.com/
• http://thoughtfulweb.co.uk/

Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.

Previous answer

Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)

• Advantages: the content reformats on the fly to fully utilise the Window width. Which means that the dilemma of choosing the most popular fixed width e.g. 940px, 960px or 978px is not required. This is particularly useful for small screen handheld devices which vary slightly. You have to do less work in considering all possible screen sizes.

• Disadvantages: For the reason that the site will shrink or stretch to fit horizontally, you cannot control the layout as much as fixed width. Aesthetics and how nice the site looks will be less under your control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen

Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).

• Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant

• Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use

Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com

That said, look at this fluid site: http://derekallard.com/

Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.

update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.

Answer 2

It's not a matter of technique, it's a matter of decision making. You choose liquid if you (or the client) WANT liquid.

I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.

OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.

You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/