fixed vs fluid

  • Skybin
  • Graduate
  • Graduate
  • Skybin
  • Posts: 104
  • Loc: Where the soy and cornfields grow...

Post 3+ Months Ago

Ok, I'm struggling on coming up with a design that looks "professional" and a main issue that has come up for me is, fixed or fluid.

Let's look at the advantages/disadvantages.

Fixed: You know always how it's going to look like. You get to make sure everything looks alright so you can put this flash bit here, this doohickey here, blah blah balh. Looks great! Except...the reason people are moving to bigger screens is to have more space to view...and you're wasting that space making your design fixed.

Fluid: You're taking advantage of the user's screen, but you sacrifice some definite(s). You're going to have to make sure that the elements play nice with each other wherever the screen's positioned at, and it's going to be overall(y) harder to make it look great.

So the main question would be, what sacrifices should you make?

I want to hear other people's opinions on this; on waht cases to use waht; what do they prefer when looking at a sit; etc.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

One good mantra to follow is this:

Accessible web designs go easily unnoticed; the others are remembered and avoided forever.

With that in mind, you should make the width flexible -- that is, not set the width.

Additionally, flexible designs can easily look as good as non-flexible ones (or as I would say, non-flexible designs can easily look as good as flexible ones), and if you want the design to be "professional," I see no reason to go the lazy route.

The only sacrifice that I see is the sacrifice of flexibility found in fix-width design.

Additionally, this analogy is fun:
http://www.xs4all.nl/~sbpoley/webmatters/flexdesign.html wrote:
Suppose you are a graphical designer, and get a commission to do a poster. You have to specify the fonts used, their sizes, the exact layout – all to the last millimetre (or point). But: only when you have submitted the final version of the design, and can no longer change anything, will you be told what paper size the poster will have.

It sounds utterly ridiculous, doesn't it? But that's exactly the situation that the producers of fixed layouts are placing themselves in.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

I say it depends entirely on your situation and the weight of your content. Light content would lead me to a fixed width. Heavy content would lead me to liquid dimensions.

My preference is fixed width. I find it considerably easiear to read something when my eye only has to travel a few hundred pixels to get to the next line of text.

One of my greatest petpeeves with a liquid layout is in higher resolutions when a paragraph stretches out to a single line.

But again, for me it depends on the needs of the site.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

Yes, paragraphs with long lines of text can become difficult to read, but the user can always have a non-maximized window ;-) After all, if you have a very high resolution, you're wasting it if your window is maximized. (Of course, randomly-sized windows becomes a problem since every site is designed differently. In my imaginary utopia, Web design would not exist.)

Additionally, you can easily increase the font size while reading that page, which fixes the problem (since it's the width:line-height ratio that really causes problems with reading). Plus it's good for the eyes ;)

Fluid designs often have menus on the side and such though, which narrow the width of the textual content. With the application of generous margins, things can be just fine. :) With supersmall amounts of content, a 50% margin-right can do the trick.

If only a virus went around that patched IE into understanding the max-width property...
  • Skybin
  • Graduate
  • Graduate
  • Skybin
  • Posts: 104
  • Loc: Where the soy and cornfields grow...

Post 3+ Months Ago

Sam Hughes wrote:
...
If only a virus went around that patched IE into understanding the max-width property...


I know a solution to that problem, which i use on my own site (actually min-width but of course, same thing). If you want me to elaborate.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

please do. But min-width and max-width hacks aren't necessarily transferrable. But maybe they are! Please share.
  • Skybin
  • Graduate
  • Graduate
  • Skybin
  • Posts: 104
  • Loc: Where the soy and cornfields grow...

Post 3+ Months Ago

Ok.

PHP Code: [ Select ]
.ie-min-width
 
{
 
    min-width: 685px;
 
    _width: expression(((document.body.clientWidth)-(document.body.clientWidth *.14)) < 685? "685px": "auto" );
 
}
  1. .ie-min-width
  2.  
  3. {
  4.  
  5.     min-width: 685px;
  6.  
  7.     _width: expression(((document.body.clientWidth)-(document.body.clientWidth *.14)) < 685? "685px": "auto" );
  8.  
  9. }


expression() is a IE specific set of (functions?) that allow "dynamic" properties. There's a section about it in the MSDN on MS. For my site, i did the math like that because i had 7% margins (.07*2 =.14). Then it takes that amount checks to see if the statement before the ? is true. If it is, the first statement is run/executed/whatever. If not, it moves on to the expression on the other side of the ' : '. Hope that helps ya. Of course, this could be used to emulate max-width properties. I've yet to come up a solution for both. Gr...

EDIT: you could set the content within two divs. One with the min-width property and then within, max-width. Kind of crude, but would work.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

Just use a compound conditional:

PHP Code: [ Select ]
.ie-min-width
 
{
 
min-width: 685px;
 
max-width: 1000px;
 
_width: expression(document.body.clientWidth < 705? "685px": document.body.clientWidth > 1020? "1000px" : "auto" );
 
/*1020 and 705 used because scrollbar width matters since IE is stupid.*/
 
}
  1. .ie-min-width
  2.  
  3. {
  4.  
  5. min-width: 685px;
  6.  
  7. max-width: 1000px;
  8.  
  9. _width: expression(document.body.clientWidth < 705? "685px": document.body.clientWidth > 1020? "1000px" : "auto" );
  10.  
  11. /*1020 and 705 used because scrollbar width matters since IE is stupid.*/
  12.  
  13. }


Do you know of any way to get client-width in em's, by any chance?
  • Skybin
  • Graduate
  • Graduate
  • Skybin
  • Posts: 104
  • Loc: Where the soy and cornfields grow...

Post 3+ Months Ago

PHP Code: [ Select ]
width:expression(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)?"30em":"auto" );


I'm assuming that you'd be wanting it for easier readability for the within stuff as well.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6375
  • Loc: twitter.com/unflux

Post 3+ Months Ago

make sure you use code/php tags in your posts, ok? Thanks. :)
  • Skybin
  • Graduate
  • Graduate
  • Skybin
  • Posts: 104
  • Loc: Where the soy and cornfields grow...

Post 3+ Months Ago

Unflux, when is your website coming out!? I've been waiting for it for so long!

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 14 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.