Why You Should Design Fixed-Width Websites(zmogo.com)
zmogo.com
Why You Should Design Fixed-Width Websites
http://www.zmogo.com/design/why-i-design-fixed-width-websites/
19 comments
I think when choosing b/t fixed width and fluid depends on your content. But don't get caught up with this, you'll always have arguments for either sides. It doesn't matter which layout you choose (as long as it's readible). What really matters is that you have good content.
I think he's 100% wrong, but in the spirit of HN, I'll upmod the story.
CNN, Yahoo, BBC, ebay, there are tons of major sites the use a fluid layout.
He is wrong that you have to deal with ANY size. You can assume the browser will be at least 800 pixels wide, you can assume it won't be more than about 1280, because people with larger screen typically shrink the browser.
It is harder yes, but not that hard to make a fluid site - especially if your designer actually makes websites and not flyers (as so many seem to).
And as a bonus you are a good deal of the way to a mobile version of the site if you make it fluid.
And a fluid site does not mean you need to have extremely long columns of text - max-width to the rescue (it can be made to work on all browsers, including IE6).
CNN, Yahoo, BBC, ebay, there are tons of major sites the use a fluid layout.
He is wrong that you have to deal with ANY size. You can assume the browser will be at least 800 pixels wide, you can assume it won't be more than about 1280, because people with larger screen typically shrink the browser.
It is harder yes, but not that hard to make a fluid site - especially if your designer actually makes websites and not flyers (as so many seem to).
And as a bonus you are a good deal of the way to a mobile version of the site if you make it fluid.
And a fluid site does not mean you need to have extremely long columns of text - max-width to the rescue (it can be made to work on all browsers, including IE6).
I prefer fixed width text because it is a lot easier to read than stretched text.
The article links to another that describes using fluid width to achieve similar results and probably works better on mobile devices. http://css-tricks.com/the-perfect-fluid-width-layout/
The article links to another that describes using fluid width to achieve similar results and probably works better on mobile devices. http://css-tricks.com/the-perfect-fluid-width-layout/
Definitely agree with this. There is something to be said for using liquid layouts on a site like Amazon, where you have product listings next to each other — it's useful to have more space. But it's just plain wrong to have a liquid layout on a site like Wikipedia, makes it a chore to read the thing, or just any other text-based site (brand site, blog, etc.)
I'm on a 24" iMac and my browser window is around 1200px, so I prefer not to have to cover two A4s side-to-side when reading.
I'm on a 24" iMac and my browser window is around 1200px, so I prefer not to have to cover two A4s side-to-side when reading.
'Stretched' text? Do you simply mean extra-wide lines?
Supposedly 8-12 words per line is easiest for eyes to scan.
I've never seen -- but often wished for -- a fluid-width layout that automatically scales its text so that the average line in the main content has 8-12 words on it. (I often do this manually with the browser's text-zoom options.)
Supposedly 8-12 words per line is easiest for eyes to scan.
I've never seen -- but often wished for -- a fluid-width layout that automatically scales its text so that the average line in the main content has 8-12 words on it. (I often do this manually with the browser's text-zoom options.)
stretched means extra-wide. I agree. I prefer reading NOT to be like watching a tennis match. The link I posted above seems to be such a fluid layout, but I haven't looked closely.
"I've never seen -- but often wished for -- a fluid-width layout that automatically scales its text so that the average line in the main content has 8-12 words on it."
That's easy to do with a fixed width in units of ems:
That's easy to do with a fixed width in units of ems:
min-width: 15em;
max-width: 35em;
width: 35em;Actually for IE6/7 do:
http://www.gunlaug.no/contents/wd_additions_14.html for some caveats and other notes, in particular you can not specify a font-size at all for the body element (if you do, then do the math yourself and not in the expression).
width: expression(
document.body.clientWidth >
35 * parseInt(document.body.currentStyle.fontSize)
?
"35em"
:
(document.body.clientWidth <
15 * parseInt(document.body.currentStyle.fontSize)
?
"15em"
:
"auto"
)
;
http://www.gunlaug.no/contents/wd_additions_14.html for some caveats and other notes, in particular you can not specify a font-size at all for the body element (if you do, then do the math yourself and not in the expression).
That's easy to do with a fixed width in units of ems
Almost, but not quite. That adjusts the width to match the font-size. I want the other way around: adjust the font-size to match the width. (If I make my browser window wider, the text should scale up.)
Currently, this would take Javascript -- either adaptively scaling the font until the desired words-per-line is reached, or calculating what font-size would mean the existing width, whatever it is, is ~35em.
Almost, but not quite. That adjusts the width to match the font-size. I want the other way around: adjust the font-size to match the width. (If I make my browser window wider, the text should scale up.)
Currently, this would take Javascript -- either adaptively scaling the font until the desired words-per-line is reached, or calculating what font-size would mean the existing width, whatever it is, is ~35em.
Newegg does that with the menus and sidebar and it pisses me off. I find the text uncomfortably small, but when I fix it their Javascript jams it back to a small size.
With high-res screens and/or people with vision trouble, setting a particular font size is generally a bad idea.
With high-res screens and/or people with vision trouble, setting a particular font size is generally a bad idea.
Good point; any such auto-sizing shouldn't override user zooms.
Two advancement are working in favor of fixed-width sites
1. Monitors are getting wider more than it is getting taller. 2. The latest browsers replaced "increase text size" with a zoom entire site feature instead.
Liquid layouts are useful if executed correctly and only if there has to be a lot of content to present.
1. Monitors are getting wider more than it is getting taller. 2. The latest browsers replaced "increase text size" with a zoom entire site feature instead.
Liquid layouts are useful if executed correctly and only if there has to be a lot of content to present.
Did I miss it, or did the author not mention doing usability testing to find out what the actual users of the site will do with it?
(As it is, it was troubling to me that his examples of what he doesn't like are all big, profitable businesses while most of the examples he likes have yet to turn a profit.)
(As it is, it was troubling to me that his examples of what he doesn't like are all big, profitable businesses while most of the examples he likes have yet to turn a profit.)
For me, the answer is obvious: because it's much easier.
The Firefox extension "Web Developer Toolbar" has a Resize menu wherein you can define your own window sizes (based on either the overall window or the viewport). I've come to use this as a reading aid, with a few preset sizes that work well with my monitor and the sites I frequent most. Drop the menu and click a preset size, and I'm reading at a convenient width. Maximize the window to undo.
i strongly disagree. fixed width works in the world of 1998...everyone with a 17 inch monitor on their desks. today screens tend to be very big (24 inch monitor) or very small (iphone). the only viable method for addressing the inverse bell curve of monitor size is with liquid layout.
This presumes that the goal of all websites should be to maximize use of screen real estate. But that goal is in conflict with the basic principles of typography, which suggest that line lengths are not going to scale up with monitor sizes.