Forum Moderators: phranque
Surfing around I am seeing more and more enterprise-level sites are using fixed layouts and I am wondering why.
One benefit could be that the user have to move her eyes less to read content, and move less to see the advertising.
Another could be that it looks the same on all screens.
Is this a sign that in sites for regular users (not WebmasterWorld or slashdot) that the web team has some research suggesting that fixed is better?
It's difficult (for me anyway) to make it fliud and still look 'right' at all widths.
Of the 10 sites I visit daily (Slashdot, CNN, Wired, WebmasterWorld, etc.. etc..) 80% use a fixed layout.
Fixed layout? Do you mean by 100% browser window width? I thought fixed layout is like yahoo where they focus the screen on the center and set it to 800 width.
I am very interested in this thread because i was thinking of switching my site from 100% width to a fixed width like 750 width
[edited by: sirkei at 5:49 pm (utc) on May 31, 2005]
Using fixed templates is the easiest way to ensure multiple resolutions see the content OK when you're not sure what you're uploading. If you delve deeper into some of these sites you'll see that for certain special features (ie special flash based reports, etc) they make them 100% instead.
But instead, i am sing 1200 resoultion and the texts look weird. Especially the ads in the middle. They do not seem to match the site.
Should i switch to 800 width?
I've read dozen and dozen and dozens of articles about the two types and coders seem to be split.
Obviously a user with a 1280x1024 page-width would like a page with 100% width. But as more and more people have HUGE resolutions and HUGE 20in, 24in, even 30in screens I am realizing that need to constrain my pages for the sake of the user (users hate huge lines of text).
I also have more selfish reasons. First, by keeping by width fixed users would be more likely to notice my advertising because users eyes are in that genearl area more often.
Finally a fixed width is just easier. Fluid designs pretty much banish most large images in the layout (such as a header image).
Because it is unnecessarily hard to create fluid layouts with CSS positioning.
Obviously a user with a 1280x1024 page-width would like a page with 100% width. But as more and more people have HUGE resolutions and HUGE 20in, 24in, even 30in screens I am realizing that need to constrain my pages for the sake of the user (users hate huge lines of text).
Why would anyone in their right mind have the browser window set to full screen size on such a large monitor? At least the smarter half of users will have two browser windows sitting next to each other, which are likely to be less than 800 pixels wide. Many fixed width centered layouts (eg Yahoo or msn search) are almost unusable that way, because relevant information disappears behind the left window border.
full width layouts look really silly when the browser window is set small or large, impossible to read, that's been studied, ideal words per line is around 12, give or take, pick up any newspaper, magazine, or book, excluding technical books, and count the characters. You'll find they are pretty much all within 12-18 words per line, give or take, that's how much your brain can comfortably retain if you are an average reader, any more and you have to rescan the line to get the whole thing in your head.
Since as of now IE doesn't support min or max width you can only control these problems by using hacks, which most pro websites avoid for very good reason.
Also, creating nice looking layouts is harder full screen, you lose alot of control, especially with graphical headers etc. See for example slashdot, which looks horrible as far as I'm concerned, but works fine for geeks.
Personally, I like WebmasterWorld's method of using a percentage of full screen, that's a nice compromise.
"Fixed" limits everyone to a lowest common denominator. "Fluid" simply removes limits yet design is all about limits. A year or so ago my thoughts and efforts were crystalised by a Patrick Griffiths ALA article where I first saw the term "Elastic" (lots written in great detail by others since).
Basically use a max-width wrapper div to limit total width on overly large screens yet be totally fluid within the wrapper. So 640x480 and 800x600 can display that cluttered 3-column ad heavy jumble using all available real estate yet overly long text lines are held in check on larger monitors. Works a treat. Best of both design worlds.
Note: winIE requires the use of an IE proprietary expression to approximate max-width; very old winIE and all macIE will recognise nothing and be totally fluid (fortunately most users of antiquated IE versions are likely to also be using antiquated small screens).
Since as of now IE doesn't support min or max width you can only control these problems by using hacks, which most pro websites avoid for very good reason.
Not totally true. Most sites try to minimise hacks but many (esp. those that have reduced the use of table layout) use some. As long as IE is dominant and old and recommendations non-compliant hacks will be necessary. As long as multiple browsers have differing multiple bugs hacks will be necessary. Unless you build a 1998 era site. To forgo the advantages of CSS and remain reliant on <table> for layout, inline HTML element/attributes like <font>, etc. is a very difficult ROI decision. Unlike WebmasterWorld many are moving on. To lose the least number of viewers hacks are a necessary evil.
Also, creating nice looking layouts is harder full screen, you lose alot of control, especially with graphical headers etc.
Yes, some graphics like headers need more thought if they may be viewed in varying dimensions and resolutions. But unless you utilise a "Fixed" width design this problem will always exist. Just like cross-browser considerations cross-resolution issues need to be addressed. Another reason to hire a professional rather than the neighbours nephew. Not a reason to place limits on yourself or your clients.
Fixed or not fixed?
If you want to spend 2 hours making a suitable layout, use fixed.
If you want to spend 10 hours making an amazing layout, use liquid.
Sad but true. For less commercial sites I use a wrapper and fluid content, that works very well, but doesn't work with graphics layouts, or layouts that use images on the left or right bars, if present.
Too many hacks are too hard to maintain, fine if you do a few sites, not so fine if you do more. Maintaining different stylesheets, not so good, unless, again, you only do a few sites. You can make very stable layouts with a minimum of hacks, depends on how complex and how much css you use.
" So, after all these discussions, what is the conclusion?
Fixed or not fixed?"
Look at what the commercial web is doing, it's fixed almost exclusively, for many reasons, most of them good. I don't have any fluid commercial sites, there simply is no reason to do it that I can see, a left nav is going to be x width, the content will be around 34 em wide, right bar if present is the only time I'm tempted to use fluid, I almost did that on a recent 3 columned site, but the designer had made a top banner header image that just wouldn't work if I stretched the page, although in that particular case it looks much better fluid, but only because it's 3 columns. 3 columns at 770 px is pretty tight, but works ok.
However, you can emulate full page display with some css tricks, that's a fairly good compromise. Fixed content and bars, full header and footer, fills the page but doesn't get into overly stretched content.
The trick is to center the page, that minimizes how odd it can look at higher resolutions, look at this page for example, a mild version, but same idea.
If in doubt, pick up any paperback, count how many words/characters per line, then pick up another one, and another one. This was evolved over years, and it is pretty much how we actually read, I think that's one reason fluid layouts lost favor, people started looking at these things more objectively, not following the latest web design fad that is, and realized that we read in a certain way.
Is this a sign that in sites for regular users (not WebmasterWorld or slashdot) that the web team has some research suggesting that fixed is better?
I'd rather a few visitors wonder why my site is a little narrow, than why it's so empty feeling. In my mind empty = nobody home.
Although 3 columns for 780 seems tight, but i guess its fine. And i guess visitors will have to scroll 1 page half to get to the bottom but its fine.
Want to avoid the empty feeling and let them focus more on my ads! :>
If I find that a particular fixed-width layout looks a little "scrunched" at 800x600, I throw in a javascript resolution sniffer and use it to write a new stylesheet for users whose resolution is wider. Users with 800x600 or without js turned on get the "standard" version, while those at 1024x768 get a broader, more open layout.
Testing both resolutions is a breeze with this kind of setup, as you can view the 800x600 version just by turning off javascript (two clicks in Firefox with WebDeveloper extension installed). And, the substitute stylesheet only has to include new width values to over-ride the defaults, meaning it's a pretty small file size.
One comment by DrDoc stuck with me:
fluid layouts do not automatically mean you can't use fixed width elements ;)
I'm still a fan of liquid layouts. They're definitely more difficult to make, but if you do a good job you'll have some longevity to your design.
Someday today's 800x600 minimum resolution is going to go the way of 640x480...
