Are CSS fluid layout frameworks viable today?

March 6, 2010 12:22 PM

Are CSS fluid layout frameworks viable today?

I'm revisiting my homepage design in an attempt to upgrade from 'programmer grade' atrocious to merely 'amateur designer grade' atrocious. The website itself is going to be an RSS aggregator, which mostly leaves layout and color design. I'm mostly familiar with CSS as that webdesign tool that makes web scraping trivial, but I know how to find and read the spec. Still, it's not obvious to me how CSS enables tableless layouts.

I'm thinking that a CSS framework will help me improve the layout without becoming an expert on how various browsers wander in their own unique ways. To that end, I've watched a survey presentation on frameworks and their purpose, and read the Wikipedia page and it's references on the subject of CSS frameworks.

One thing that strikes me after this is how popular and plentiful fixed pixel width layout frameworks are. Blueprint, 960, and Baseline all use pixels. As an owner of monitors big and small, this one size fits all approach seems inadequate. I've found a few that claim to do fluid layouts: YUI Grids, for example, but the guy in the survey video (Kevin Yank, sitepoint CTO) doesn't recommend it.

The only one I've found so far that strikes me is fluid960, who's demos appear to work nicely on my phone and desktop. I can't seem to find anyone recommending it though. What I can't tell is whether such a system is buggy, or if people have moved on to better and greater things since then.

Am I crazy to consider using fluid960 on a personal site?

posted by pwnguin to computers & internet (15 answers total)

I think the answer to this is the same as it is with everything CSS-related:

1) It will be a pain in the ass no matter what.
2) It depends on how many browsers you want to support.

The place I worked previously used "fluid blueprint," a 3rd party mod of regular blueprint. It was buggy to say the least, but not sure how much of that was the guy who implemented it.

My gut feeling is that you can find something that will work for FF, Safari, Chrome, and IE 8 and maybe 7. A lot of it comes down to whether you feel it's important to support IE6 and "fringe" browsers. This is kind of a "dark arts" area and the only way to know for sure is to try it and see what happens.
posted by drjimmy11 at 12:57 PM on March 6, 2010 [1 favorite]

Talk about overthinking a plate of beans!

On a personal site, anything goes. It's your playground to try new things.

CSS isn't quite the panacea you're implying; you still need to either (i) use browser-specific hacks in your CSS, or (ii) write your CSS in such a way as to avoid issues where certain browsers (IE6 can you feel your ears burning?) fail to meet the standards.

There are two main reasons (well, maybe more) why people use fixed-width layouts.

Firstly, it's easier in many ways to design for a fixed width; you don't have to worry how your design will cope with being viewed at 1600px wide or 500px wide, in terms of which columns resize and which can remain fixed, how your headers and footers will look and so on. You don't have to worry about whether images, videos etc. will fit nicely within your layout; in a fluid layout opened wide, these elements may end up looking too small and stuck over to one side. When you narrow the browser window down, the layout may even break altogether around images.

Secondly, there are plenty of studies that show that too many words per line makes your text really hard to read. It varies a little depending on things like font, text size and leading, but a good rule of thumb is 10-12 words per line; a fluid layout on a wide monitor could well give you three times the ideal line length. Of course, the user can resize the window to suit their preference, but many designers would rather choose a nice easy-to-read column width in a fixed-width layout.

Smashing Magazine has a reasonably good article which will tell you more than I can in a couple of paragraphs.
posted by le morte de bea arthur at 1:00 PM on March 6, 2010 [1 favorite]

Personally I like the Elastic CSS framework which does fluid layouts quite easily.
posted by singingfish at 1:28 PM on March 6, 2010

Look into Yahoo's YUI Grids. While there's definitely something to be said for learning CSS from the ground up, projects like YUI offer you a known-good way to have a basic CSS layout ready for you that you can count on working in multiple browsers easily.

By selecting one of the Grids layouts above, then following the simple rules to use it on your site, you avoid a lot of headache but still get all the benefits of a CSS layout.
posted by odinsdream at 2:03 PM on March 6, 2010

I've used both 960 and fluid960 and they're incredibly useful for quick prototyping and production. They scale well, contain a pretty decent reset stylesheet and are easy to use.

Find one you like, do a mock-up and then see how it scales to different resolutions and browser types. Like javascript frameworks, CSS frameworks take a lot of the older hack development out of web design (specifically for browser support) which makes the experience much easier and more enjoyable.

Go with what you know and like using.
posted by purephase at 5:32 PM on March 6, 2010

Seconding what le morte de bea arthur said - it's certainly why I tend to opt for fixed width layouts even while flexible width ones sound nice and all. As an RSS aggregator, isn't most of your content (excepting maybe a sidebar of shortcuts to filter different feeds) going to be in a single long column down the page? If that's the case, that main column is going to get mighty wide on wider monitors if it's not set to a fixed width. If a layout stretches to the full width of someone's crazy-wide monitor, leaving them with lines of text that range 30cm across the screen, it's hard on the eye and bad for readability.
posted by springbound at 6:29 PM on March 6, 2010

springbound: "If a layout stretches to the full width of someone's crazy-wide monitor, leaving them with lines of text that range 30cm across the screen, it's hard on the eye and bad for readability."

Well, my crazy wide monitor isn't here yet, so I can't quite test that quite yet. But the science I've read on the subject suggests that people read faster when lines are longer, but prefer shorter things. Like eating brussel sprouts I guess.

Anyways, planet Ubuntu seems to do an okay job on my large screen, but they use a fixed width sidebar for 'blogroll' that really demolishes mobile view. I think they just increase the font; I do the same to MeFi on my current largeish screen. Somewhere in the back of my mind I was thinking that em based layouts could just make the text scale up depending on the display, but I guess that's more advanced than I assumed.
posted by pwnguin at 8:08 PM on March 6, 2010

Well, my crazy wide monitor isn't here yet, so I can't quite test that quite yet. But the science I've read on the subject suggests that people read faster when lines are longer, but prefer shorter things. Like eating brussel sprouts I guess.

And hardly anyone with a screen beyond 15" runs a browser maximized all the time anyway - especially not the sort of people who get annoyed with fluid layouts. Go for it :-)
posted by wackybrit at 8:17 PM on March 6, 2010

And hardly anyone with a screen beyond 15" runs a browser maximized all the time anyway - especially not the sort of people who get annoyed with fluid layouts. Go for it :-)

I have a 42" TV as my monitor. I always maximize the browser window. And I use the zoom features in firefox constantly.

One thing that drives me crazy is when fixed-width layouts force larger and larger font into a center content column that's not changing in size, while the sidebars get bigger and bigger.

So, I like fluid layouts. It means less scrolling for my poor little carpal tunnels.
posted by Netzapper at 11:43 PM on March 6, 2010

Bear in mind though that you're not designing the layout for your own benefit - it's for the people who visit your site. The most common screen size at the moment is 1280 X 1024 running on a 19" LCD. And not everyone uses the browser full-screen. So a 960-wide fixed layout is probably quite a reasonable choice for most users.

If you're determined to give people width wider displays the ability to view your site in ultra-wide mode, a simple stylesheet switch and a bit of browser sniffing might be a useful compromise - you could either offer two different fixed widths, or switch to a simpler, fluid layout for very wide displays - or even offer a choice.
posted by le morte de bea arthur at 5:07 AM on March 7, 2010

Netzapper: "I have a 42" TV as my monitor. I always maximize the browser window. And I use the zoom features in firefox constantly."

Indeed, I always take designer's 'common knowledge' about use patterns with a grain of salt. Unfortunately, the science on the subject is just as sketchy. I suspect web designers are more prone to browse the web without maximization both because they'd like to see HTML source alongside output, and because OSX makes it onery to do so. Meanwhile, in Windows (and Ubuntu), window management seems best suited for fullscreening.(Windows 7 addresses this partially, as do algorithmic layout window managers); I've seen a number of people use multi-monitor as a method of coping with a preference for multiple fullscreen windows.

le morte has a point that there's no point publishing just for yourself. I'd like people to be able to Google my name and be informed by my website. What I don't want is people to get the impression that I don't care, or that I'm a terrible hack. I can't predict what people will be using, but my interests in embedded and phone software might bring in browsers running narrower than even 960. As a Linux professional, I'm fine with giving the IE crowd less consideration. There have been a number of helpful suggestions and opinions, and based on them I'll give fluid960 a whirl. Certainly some challenges will remain with fixed-width images and videos and if it's just not up to the task, I'll consider some useragent sniffing options.
posted by pwnguin at 2:47 PM on March 7, 2010

Alrighty, I've spent some time reading up on fluid960 and it works quite well. One thing that tripped me up was the lack of documentation -- it should be fairly obvious in retrospect but fluid960 retains all the class names of the original 960 grid framework.

Another two other important notes:
* alpha and omega are important for removing margins of the edge.
* It appears that div tags with class clear are required to separate horizontal separation; headers and footers from body content, for example.

I'm at the point where I like the layout well enough, and generally like how FF/Safari/IE8 lay things out. Thanks for the help, I'll mark this resolved.
posted by pwnguin at 4:22 PM on March 9, 2010

Unlike some nerds (and I very much am one), and instead like pretty much everybody else, I maximise browser windows all the time, regardless of my screen resolution.

That's completely irrelevant to the fixed-versus-fluid discussion, however. The legibility of type sizes in conjunction with line spacing in conjunction with line width is not a matter of preference. It's a matter of stone cold fact with an avalanche of user testing to back it up. The overwhelming majority of people cannot read even this page at 1400px without repeatedly experiencing their focus jumping from one line to the next at the wrong point.

Line width isn't, as most of the things you'll find while searching for "line length legibility" will suggest, a hard and fast ratio, but one which can be played with in conjunction with the other two available variables. One way of dealing with this in CSS is to size everything - margins, type size and leading - in ratios and ems instead of point sizes and pixel heights.

But (and this bit is more subjective than some of what I said above) - it's generally easier to pick a width and stick to it, especially if you're just getting started. People pick 960 because it fits on 1024px-wide screens like the ones on netbooks.
posted by genghis at 7:42 PM on March 9, 2010

Just because the last few of you are implying that my post was full of shit, even numbers from 2006 back me up.

At resolutions above 1400 pixels wide, the majority do not maximize their browsers.. which fits in roughly with my 15" assertion (if you look at typical resolutions of 15" displays and up - HDTVs are not "typical").

And that was in 2006. People are even more savvy now.
posted by wackybrit at 8:07 PM on March 9, 2010

And I can cite a different study, where a little less than half of people with 1600x1200 pixel displays browse maximized, also from 2006. Neither report controls for sample biases, but at least this one pretends to by examining multiple websites.

I browse fullscreen on my 20" 1600x1200 screen, but who knows, maybe when my monitor arrives tomorrow I discover the beauty of having two browsers open side by side, or however it is the other half of the internet operates. I'm not going to say everyone does this, or everyone does that, and write off people who disagree.

Instead, I'm going to argue that user behavior partially the fault of web designers. It's trivial to make this argument with a rhetorical question: why would owners of high res displays browse the web fullscreen when so many designers in 2006 decided that you weren't worth designing for?

Or, perhaps more accurately, why would you regularly visit sites that write off half your monitor? A catalog of sites I regularly visit that nicely scale with screensize: gmail, reddit, wikipedia, slashdot, LaunchPad, tokyotosho, and metafilter. I haven't put this through a history analyzer, but I suspect it's a high percentage of my personal total traffic.

There's very few good ways to generate good science on this subject; I think the best most of us can do is collect data on how we've trained our users.
posted by pwnguin at 8:48 PM on March 9, 2010