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

1.8k views Asked by At

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?

4

There are 4 answers

0
therobyouknow On BEST ANSWER

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:

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.

3
yunzen On

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/

0
Alp On

Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.

Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.

1
JimmiTh On

When left with a choice, I rarely use liquid layout in anything except business style web apps.

I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.

When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessi­ble to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...

Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.

(see e.g. http://www.quirksmode.org/mobile/viewports2.html)