Fixed vs Fluid vs Elastic, and basic setup Options

[barrykins]

Well. I've been going back in forth in deciding on how to design websites overall. Fluid is amazing, yes. But however, it can pose problems to people that have cinema display Macs. Right? I develop on a macbook pro so my 1440x900 resolution would be different then that of someone one a windows.

I guess Im looking for input on what you design in and kind of the basic set up to let everyone be able to see.
As such I use the 960 grid for laying out my wireframes but I'm confused about one thing. How big do you exacly make the Background image so a screen with a larger size may be able to see it?

This is what I currently use to set up the main containers and bg, am I correct? Centering is a issue with em because I don't exacly understand the em measurements. Any input would be nice. Im majoring in graphic design so all web design is kind of self taught.

CODE

html, body{
background:url(..) no-repeat;
background-position:center;
height: 100%;
margin:0;
padding:0;
width:1000px;
}

#container {
position:relative;
min-height: 100%;
width:960px;
}

#main {
position:relative;
min-height: 100%;

[mipadi]

Well. I've been going back in forth in deciding on how to design websites overall. Fluid is amazing, yes. But however, it can pose problems to people that have cinema display Macs. Right? I develop on a macbook pro so my 1440x900 resolution would be different then that of someone one a windows.

It depends on the site. Personally, I used to be really into elastic layouts, and to a lesser extend fluid layouts. But the problem is that a lot of screens are becoming very wide these days. In an article-based site (such as a blog) with a lot of text, you don't want to have text that spans all the way across a 1900-something screen -- that's hard to read. (The optimal line width is 60-85 characters -- check out a novel and you'll see this concept in action.) As a result, last year I redesigned my blog so the article width is only about 80 characters. Elastic and fluid layouts end up creating a lot of whitespace. Whitespace is good, but too much is less than optimal, and also encourages you to fill the space with stuff you don't need.

At the other end of the spectrum, more and more people are using handhelds like iPhones or Blackberrys to browse the web. It can be hard to create an elastic or fluid layout that looks good on everything from an iPhone up to a 2000+-pixel screen.

But it depends on the site's content. If you're not dealing with an article-based site (maybe something with a lot of graphics, or a web application or something like that) an elastic or liquid layout may be the best choice.

How big do you exacly make the Background image so a screen with a larger size may be able to see it?

I guess that also depends. "Big enough" is the best answer. Optimally, you'll create a graphic that will look good on the most number of screens, and then have some other background color that blends well with it for wider screens (or a background made up of multiple images). If you're dealing with a pattern, you can always repeat it horizontally.

Centering is a issue with em because I don't exacly understand the em measurements.

The em unit of measurement in CSS (and its close cousin, the ex unit) comes from typography. In typography, an "em" is the width of the letter "m" in whatever font you're using (get it?). Similarly, the "ex" is the height of the letter "x" in that font. CSS uses the same concept, but defines the units a bit differently. In CSS, an "em" is equal to the "computed value of the 'font-size' property". CSS defines multiple ways for a browser to interpret an "ex", but it usually ends up being 1/2 of an "em". So what does all that mean? When rendering CSS, everything ultimately becomes specified in pixels; if you're dealing with a 12-pixel font, then an "em" is 12 pixels and an "ex" is about 6 pixels. Likewise, if you're dealing with a 24-point font, an "em" is 24 pixels and an "ex" is about 12 pixels.