Help - Search - Members - Calendar
Full Version: Fixed vs Fluid vs Elastic
Forums > Resource Center > Webmasters' Corner
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
QUOTE(barrykins @ May 12 2010, 02:44 PM) *
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.

QUOTE(barrykins @ May 12 2010, 02:44 PM) *
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.

QUOTE(barrykins @ May 12 2010, 02:44 PM) *
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.
barrykins
QUOTE
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.


That makes perfect sense since the web translates into pixels rather. I actually just read that in eric meyers book after I asked haha.

QUOTE
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.


But lets say I use a 1440x900 BG element. How can I center the container to that. I know that the bg will be in the html, body but what type of margins or padding?

And I know these are all simple questions but it seems that they are the ones no one wants to anwser.

QUOTE
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.


Couldn't you then just create a javascript on the main page to direct a mobile phone to a mobile version of the website? detect screen size and point browser to what page depending on that size?

fixtatik
QUOTE(barrykins @ May 12 2010, 03:49 PM) *
But lets say I use a 1440x900 BG element. How can I center the container to that. I know that the bg will be in the html, body but what type of margins or padding?

You can just use an auto margin on a container to center it. In most cases, "margin:auto" will equalize the left and right margins, if the element you're giving the margin to has a defined width (be it fixed, fluid or elastic). There are exceptions; go figure, it involves Internet Explorer. Of course, it only errs in a 10+ year old browser, so it's not something you'd usually need to worry about. If it bugs you, though, also adding "text-align:center" to the body selector will fix it. You'll just need to remember to left align the text in your content area.

QUOTE(barrykins @ May 12 2010, 03:49 PM) *
Couldn't you then just create a javascript on the main page to direct a mobile phone to a mobile version of the website? detect screen size and point browser to what page depending on that size?

Technically yes, but optimally I'd try to stay away from being JavaScript-dependent for mobile browsers. While they're getting better, most phones won't know what the hell to do with JavaScript. A better way would be to use the "handheld" media type for a mobile style sheet (one or the other):
CODE
<link media="screen" type="text/css" rel="stylesheet" href="normal-stylesheet.css" />
<link media="handheld" type="text/css" rel="stylesheet" href="mobile-stylesheet.css" />

<style type="text/css">
@import url('normal-stylesheet.css') screen;
@import url('mobile-stylesheet.css') handheld;
</style>
barrykins
and how exactly would the phone know which CSS to use though?

QUOTE
You can just use an auto margin on a container to center it. In most cases, "margin:auto" will equalize the left and right margins, if the element you're giving the margin to has a defined width (be it fixed, fluid or elastic). There are exceptions; go figure, it involves Internet Explorer. Of course, it only errs in a 10+ year old browser, so it's not something you'd usually need to worry about. If it bugs you, though, also adding "text-align:center" to the body selector will fix it. You'll just need to remember to left align the text in your content area.


Well I realized the question I asked about the center was rather simple.

I would say something like.
CODE





.container {
margin: 3em auto;
width:960px;
text-align:left;
}

.main {
margin:auto;
position: relative;
}



mipadi
QUOTE(barrykins @ May 19 2010, 01:53 PM) *
and how exactly would the phone know which CSS to use though?

<link> can take a "media" attribute. Phones will use a stylesheet designated with "media=handheld", if one exists.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.