Scattered Like Birds

Search

Styles

   
   
   

Blogmarks

Movies

Recent Articles

Blogroll

Movie Quote

No more movie quotes!

My Other Blogs

About

CSS Site Signature: #www-samrowe-com

This blog is "powered by" Parasite, which is a PHP/PEAR::DB blog written by yours truly.

On good days, Parasite supports Ian Hickson & Stuar Langridge's Pingback1.0. It hasn't been a good day in a VERY long time and likely never will be again!

The stuff that Parasite doesn't do for me is done in vim.

Being standards compliant is the only attempt this site makes at being IE friendly.

You can email me using the initials of this blog at this domain.

Conversation A.D. 33

One: Have you heard the news?
Two: No, what's happened?
One: The good Lord has come down in human form and had himself killed!
Two: To what end?
One: With this act, the Devil is hoodwinked and all humanity saved!
Two: Gosh, that's simply lovely.

Fluid-Width Hell
Tuesday Dec 16 6:06pm 2003
by Sam

As anyone who reads this site for any amount of time knows, I love to bitch and moan about the New Web way of doing things. You can't just write simple HTML anymore, you have to write semantic XHTML and whatever other bullshit that's a complete waste of time. Don't get me wrong, I'm all for standards, but I think that if the computer can't tell that what you've done is wrong, then you've done well. The browser doesn't care if you didn't use any <h1> tags but you did use <h3> tags, so why should anyone else? (Imagine my frustration at using an <em> tag in this paragraph when there's nothing at all wrong with the good old <b> tag. Why did I do it? Because I read somewhere that <b> is WRONG. Peer pressure in its purest state.)

I browse the web on one of several machines. A couple of them are laptops limited to 1024x768. Another laptop will do 1600x1200 on its 15" LCD. My box at work lives at 1920x1200 and my home workstation at 5760x1200 (3X(1920x1200.)) I usually browse at or near a "maximized" size. With smaller resolutions, I'm maximized with the larger ones, it's very close to a full monitor's-worth.

As you might guess, I hate fluid layouts. When my browser window is almost 1920x1200, most sites have unreadably long lines of text and several have severe issues with their choice of (what they think are) non-repeating background images. I cannot think of a time when my complaints about such issues haven't been met with deafening cries of "THEN CHANGE YOUR BROWSER WIDTH!"

Well, NO. Fix your website.

The page I spend most of my day viewing makes very good use of that screen real estate. There are three columns, if they'll fit and two if they won't. All of the columns are limited width and they're all easy to read. No matter how wide my browser window is, they look fine and they use all of the space. It can be done.

I was reading Clagnut, (who calls fixed-width layouts "a step backwards [in web-design,]") and followed some links to a blog entry called Don't Fence Me In. The author of this site has presented a few points in favor of fixed-width designs and several in favor of fluid designs. I disagree with every single point he makes in favor of fluid designs.

The site presents more content to people because a flexible-width site stretches to maximize screen real estate. If people stretch their browsers quite large, the content stretches to fit and more content is available on the screen at once.

To me, this is almost like people who buy full-screen versions of movies when given the choice between that and a wide-screen edition. They think they're "wasting space" unless every bit of the screen has content on it. In much the same way that I'd never buy a full-screen movie when a wide-screen version exists, I'd never (purposefully) sacrifice readability because I think a browser window should be of a certain width or contain a limited amount of whitespace. It's my text that should be of a certain width to be readable. If I limit it, the user doesn't have to change his browser size and the text remains readable.

Of course, the glaring contradiction in comparing fluid designs to full-screen movies is that with a full-screen movie, you're losing content whereas with a fluid design at a large resolution there is more content on the screen at once. True, but academic. What good does all of this extra content do me if the text is so wide that my puny brain can't possibly wrap from the end of one line to the beginning of the next? Unless you're doing something like this, the "win" of extra content isn't.

In term of readability, I can control the line-length to some extent using percentage widths. On this site, both the left and right columns are set with percentages, so that as the page gets wider, each one stretches a bit. Even at a large window size (my laptop stretches up to 1400 pixels wide) the line-length isn't unreadable. Maximized, I still only get about 16-20 words per line: longer than the ideal length, but not too significantly.

Resolutions are going to continue to increase as monitors grow in size and number. Multiple monitors are more common all the time. I shouldn't have to jack my font size so large that it decreases the number of words per line to a readable level. In fact, I shouldn't have to do anything to my browser when I read a site.

A flexible width makes the site more readable for everyone. The layout of this site currently scales for people with their monitors set to a resolution of 640x480 without horizontal scrolling. I know most people are have monitors that are at least 800x600, but why not make the site more accessible people for those unfortunate souls? Also, many people, myself included, never maximize their browsers and browse just under 800x600 in a floating window.

I completely disagree with the first statement. As I've said above, most (all?) fluid-width sites are unreadable at high resolutions. Why not make the site readable to everyone rather than just people with setups similar to your own? It's also worth mentioning that fixed-width layouts in no way have to exclude small resolutions.

Flexible sites look better. I know this one is largely subjective, but a site like this fills the window nicely, has consistent margins around the content, and allows for nice large images if done correctly. As well, the 'breaking' issue is only really relevant when someone reduces their browser window to an extreme size and then, only in browsers that don't understand the min-width attribute.

If by "look better" you mean "fill the browser window," then yes. Once again, nothing about a fixed-width design precludes nice margins or large images. Fluid-width sites break in two ways, not one, they break small and large.

Although some may argue that it's easier to design for a fixed-width site over the long-term, with proper care, flexible-width sites can be properly up-kept even on a large scale. Sites such as Amazon.com use flexible-width sites to good effect even with incredible quantity and diversity of content.

I won't comment on the ease of design, as I don't think that really matters. I think the only thing that really matters in the end is readability. This site is readable at 800x600 and at 1920x1200 and all points in between.

I don't mean to pick on the author or disrespect him in any way. His points happened to sum up a lot of the comments I've read in support of fluid-width sites, so I chose them to represent that point of view.

I really need to re-do all of the CSS for my sites. When I do, I'll definitely attempt to use Russ' method (not methodology which is "the study of methods") because I think it handles non-default font sizes much better than my current pixel-width crap.

Home