Fixed vs. flowing (“liquid”) layouts…

For years, there has been a debate on fixed width versus a flowing, liquid layout. Also, during these years, I have been on the liquid layout side of the fence. After considering things, I have decided that fixed is the way to go for gobs of text.

Just like how it is easier to read text split into paragraphs, it is also easier to read (and scan) text which is set to an optimal width. Constraining text to a narrow width allows one to read things quickly, and with ease.

There are other added benefits as well. When the designer of a Web site knows the dimensions of a page, then graphics can be designed to specifically fit in an optimal way. In a liquid layout, images are haphazardly tossed in and the layout control is up to multiple variables. Often, the graphics for these flowing websites are mistakenly placed; not where the author intended.

Therefore, for the above points, I am going to, from now own, recommend a fixed layout for any sort of publication, unless a free-flowing liquid layout makes sense. Above are the reasons why I finally converted my site (by default) to be fixed width. As I do have other components to my site (such as the image gallery), I have designed it in such a way as to utilize the screen real estate for specific pages by calling an alternate CSS id, which, in turn, makes the page take up the maximum area allowed.

As I have had some people in a previous news item state that they like liquid layouts better, I have made an alternate version of my default theme available so that the screen-filling edition of the pages can be seen on every page by default. (Isn’t CSS nifty? *smile*)

While bringing back the theme selector, I have also added my previous default theme to the dropdown form at the side of the page.

Whether to use fixed or flowing layouts depends on the content and audience of the site. I now strongly believe that if the site is a periodical in form (magazine, newspaper, or weblog), then going fixed and thinking about multi-column should be considerations. If it is a utility "web application", then filling up the space as much as possible probably makes the most sense.

The debate itself reminds me of the letterbox versus pan-and-scan argument among movie buffs. In that debate, however, everyone knows that the widescreen letterbox version is better for movies, right? (:

Note: If the layout is messed up (for whatever reason), you can reset it to the default style or change it by using the theme dropdown on the left.

By-the-way: I have a desktop of 1600×1200, but I do not use my browser full screen. I keep it at around 800 pixels wide. It is even at that width on my laptops, which aren’t nearly as hi-resolution, either. Using a browser full-screen at resolutions higher than 1024×768 is a bit silly, really. Either the resolution should be lower or a person using a desktop that large should be multitasking a bit more. (:

Tags: , , ,

18 Responses to “Fixed vs. flowing (“liquid”) layouts…”

  1. SchAmane says:

    Umber

    Umber CSS Theme realy rocks !!!

  2. Trae McCombs says:

    Welcome to 1997…

    Heh, What are you smoking Garrett? Please, put the pipe down. I think it was even you that told me that what I was doing with fixed widths were wrong. I agreed with you. Now you are trying to tell me all these years I was right? Bah, Fixed width is for lamers. The biggest reason I can say why you are on crack is this: If you have your browser set to 1024×768(or higher), You shouldn’t be penalized and have to suffer through poorly, LCD(lowest common denominator)-styled, websites. I typically look to you for advancements in various things, but on this one my friend, you’ve completely flipped your lid. πŸ™‚ I think your women has a hold on your brain. Tell her I said to give it back to you! πŸ™‚

  3. Trae McCombs says:

    What’s next?

    So, are we also going back to pico, and are we also going to start running our desktops at 1024×768 res (on large monitors), and are we also going to go back to jagged-non-anti-aliased fonts? What about switching back to sites before CSS too, that was a good old practice. Let’s see…. oooh, and while we are at it… Let’s go back to 2400 baud on dial-up!!! πŸ™‚

  4. Did you read the articles I linked?

    Did you take the time to read the articles I linked? I am especially referring to the research study which demonstrated that a constrained width is better for people reading, especially for those skimming and even more so for kids.

    Plus, I am not advocating fixed width for websites as a blanket statement. I am only suggesting that fixed width makes sense for article-driven websites, such as periodicals or anything which is full of content comprised of text.

    Also, by using CSS for layout, it is easy to provide alternate layouts without changing the content for those crackmonkies who use their browsers full-screen on insane resolutions who want everything in one line across. (:

  5. Switching back to dial-up

    Switching back to a dial-up after years of high-speed ‘Net access is either a great way to build patience or go insane. (:

  6. Kyle says:

    I’m all for easier reading

    but for some reason the extra white space around the text is distracting to me. I have my browser window around 1024×768 and so there is a fair amount of grey area on both sides. This area draw my eyes, partially because it is similar to the text color of the body of the message. That’s just me though,and thanks to the nifty css we have a choice ;)Kyle

  7. Trae McCombs says:

    Amen Kyle…

    Heh, But you have to remember, Garrett, for some silly reason I’ve never figured out, keeps his browser set to roughly 640 width. This breaks close to 90% of all websites when you view them becuase most people set fixed widths for 800 or higher(which is as lame). The extra grey is quite annoying for me too, and when you put that in with the toolbars and whatnot on the sides, it makes for tons of nasty scrolling. It’s nice to be able to read something without having to constantly interact with your web browser every 2 seconds because what you’ve read scrolled off the page.

    and since when did linuxart.com become for kiddies!!! πŸ™‚

    Seriously Garrett, This is good advice for you: Don’t necessarily beLIEve everything you read. Just because some dumb schmuck said that he thought figured he’d go back to fixed widths because of his opinions of "Greater enhanced UI" doesn’t mean I want to listen to it. Heck, I don’t even want to READ someone TRY and make that argument to me. The ramifications of making that leap are just smacktacular.

    I hope you do wake up G, and put down the glue bottle. Give us our Garrett back you aliens!!!!!

  8. Trae McCombs says:

    In other news…

    The world is flat.

  9. Why the negativity?

    What’s up with the negativity?

    I provided several non-fixed-width styles as well.

    Also, it is a well established fact that narrower text is easier to read than too-wide text. Why do you think magazines, newspapers, and the Bible have been multi-column for ages? Even paperback and hardcover books are narrow for a reason, you know…

  10. Websites for you

    You’ll want to check out the Flat Earth Society FAQ. If that interests you, see also the Time Cube.

  11. Trae McCombs says:

    why did I know you’d do that.

    see subject. πŸ™‚

  12. Trae McCombs says:

    not being negative… just shocked.

    Dude, I’m just completely shocked that you would do something like this. This is right up there with news that you are now also using nothing but WindowsXP 100% and are ditching Linux and MacOSX. It’s like if you went back to using pico, it’s like if you…. (get the point?)

    I’m not being negative, I’m just floored. You could have told me you, yes YOU, were pregnant, and I would be much less concerned. heh.

    Again, Aliens!!!! Where is my Garrett!!!! bring him baaaaack! πŸ™‚

  13. Actually…

    I’m just using Linux on my laptop. My Mac is fried (again, yes, again again… sigh). I’ll post about it soon enough, I suppose.

    Windows XP has no place in my house. Oh, and I’m still using VIM.

    I’m not pregnant. Some men in China may be, however. (It sounds like a bad comedy movie plot.)

  14. Thanks + PNG Fix

    Garrett, as one of those who asked about fixed-width vs. variable width in the previous thread, I appreciate your thoughtful response.I was interested to see that you went the route of offering alternative styles. Even though I generally prefer variable-width layouts, I will be using your default fixed-width layout. There’s just something about seeing the site as the author intended.Another thing I wondered: aren’t you giving up one of the key advantages of the fixed with layout by offering an alternative: size and positioning of graphics? If you put graphics in the site, you’ll have to account for the users that are using the variable-width style sheet anyhow.As for the trouble with your transparent PNG title graphic in Internet Explorer, don’t give up on it. Apparently you can set the default background color in transparent a PNG file. If it is set, all good browsers will show the image transparent as they should, but Netscape 4 and Internet Explorer will replace that ugly baby-blue with the color your specify – since you are putting your graphic on a solid color area, this should do the trick. I haven’t tried it, but I understand that TweakPNG will let you edit this background color in PNG files.

  15. Garrett says:

    PNG fix

    I fixed the logo just now. The GIMP allows one to set the background color too… I just did not get around to it earlier (you know — Thanksgiving, travel, and the like). (:

    Well, I’ll design for the default, but if it looks borked with another theme, then the person picking another theme would just have to accept that things won’t look right — just like when a browser is run at full screen at resolutions larger than 1024×768.

  16. james says:

    Green Leaf

    I like the older theme better, umber with hover!And of all themes i like the Green leaf most. But as always you made a good work! πŸ˜‰

  17. Garrett says:

    Green leaf

    Yeah, I like green leaf too.

    Maybe I should work on bringing it back in some form. I’m not promising anything, of course… but it would be neat. (:

  18. james says:

    re:Green leaf

    That would be great! In fact you are an arist, and should have some nice and new thinking look at your website.There are two things i miss on the Internet: themes.org and garretts website with different themes, and themy news. πŸ™‚