em, what?
Elastic layouts seem to be the new nifty idea on the web design scene (or maybe just the scene that I'm privvy to). "Elastic" is just one of the buzz words available in the layout market. The big ones, it seems to me, are:
- Fixed
- Liquid
- Elastic
I'll talk a bit about each of them, the UOM of choice for each, and some of the pros and cons and why you would chose one over another.
What, no gaseous layout?
You'll note that all the layout categories listed above are themed according to a state of matter. Cute, huh? Yeah, whatever, but their use to describe the layouts is fairly accurate. Think of them like this:
- Fixed => solid
- Liquid => liquid (duh)
- Elastic => colloidal*Coll—what? Think pudding
For all the examples below, let's use a simple two column layout:
sample.html
<html>
<head>
<title>Two, count them, TWO columns, a a.</title>
<link rel="stylesheet" type="text/css" href="style/basic2.css" />
</head>
<body>
<div id="page">
<div id="left_column">
<p>
This is my left column. Isn't this nice?
</p>
</div><!-- End left_column -->
<div id="right_column">
<p>
Imagine a search form or link list here.
</p>
<p>
Yeah, that would be neat.
</p>
</div><!-- End right_column -->
</div><!-- End page -->
</body>
</html>
basic2.css
body {
background: lightblue;
}
#page {
margin: 0 auto;
overflow: hidden; /* wrap container around floated contents */
border: 1px solid black;
background: white;
}
#page div {
float: left;
}
Fixed. What do you mean zoom?
Fixed layouts use pixels (px) dimensions to define a set of regions in a page to contain content, imagery, etc. Since a pixel is a fixed size on the screen, a block element with a width of 400px will be exactly 400 pixels across regardless of browser resizing or text zooming.
Add these instructions to our stylesheet:
#page {
width: 770px;
}
#left_column {
width: 500px;
}
#right_column {
width: 270px;
}
We have a series of fixed width declarations for our columns and the container block #page. If you view this page at a resolution of 800×600 in a shrunken browser window, the page will extend horizontally beyond the viewing area, because the viewing area is narrower than 770 pixels. Similarly, if you view the page at a resolution of 1600×1200 on a full screened browser, the whole page would display, but would fill only a relatively thin slice of the window.
Additionally, if you zoom the text, the text grows (go figure) but the container size stays the same, so the visual effect becomes progressively more claustrophobic.
Fixed layouts are often used due to their ability to more easily incorporate imagery in the page style. It can be a lot of work to create a nice visually charged design. It's frustrating beyond words to spend all this time only to have it blow up when viewed under "unusual" conditions.
Don't drink any ol' liquid
Liquid layouts go the opposite direction. They embrace the flexibility granted to the viewer to browse at whatever resolution in a window of whatever size. Hippies. Where fixed layouts are based on the px uom, liquid layouts are based on percentages.
Liquid layouts are arguably the most difficult to develop cross-browser support for. Maintaining a nice look and feel, regardless of scale, can really limit a designer's style options. The reasons for this are many, but I'm not going into detail about them here. Suffice it to say, "who owns what percentage of a block's visual space?" and "what becomes the base measure for a nested percentage measure?" are intricate questions answered differently by our friends in the browser coding business.
Add these instructions to our stylesheet:
#page {
width: 80%;
}
#left_column {
width: 70%;
}
#right_column {
width: 30%;
}
So the idea here is that the column space will consume 80% of the visibly available space in the browser window, and the two columns will consume respectively 70% and 30% of that space. Assuming this worked cross-browser (I'll give you a hint, it doesn't), when our 800×600 viewer and our 1600×1200 viewer each visit the page, the layout will be proportional to their view port size. If they resize the window, the widths will adjust automatically to maintain the layout.
The text inside the layout, similar to the fixed layout, lives in its own world. If we zoom in and in and in, the same claustrophobic effect occurs, but at least we can keep expanding the browser to fit it!
There's always room for ... elastic?
The elastic camp comes from the point of view that your design and your content are inextricably tied. A designer can't have full control of the presentation unless proportions can be maintained. Enter the em. The em has a soridid and vague history that has led to wide spread confusion about how one properly defines 1em as a unit of measure. I'll cut to the chase and say 1em = the point size of your font. If a12pt font takes up 16 vertical pixels of display space on the screen, then 1em = 12pt = 16px. Seems simple enough, right? Yeah, it took me a while to get it, too. There's (much) more to it, but for our purposes, this will do.
The basic idea behind elastic layouts is that your font size determines the widths/heights of the elements in the layout. The fact that the uom in elastic layouts is not percentages makes it more akin to fixed layouts than liquid, but there's a bonus to the elastic plan: the layout manages the typographical proportions automatically. In short, zoom, baby, zoom.
The vague point with building an elastic layout is how to best work with the uom. For starters, you as the designer don't know how big it is, and can't, since each viewer could have different font settings in their browser. So you start with an assumption that the default font size on most browsers is 16px. You know your multiples of 16, right? How many ems is a 770px column if 1em = 16px. If you know the answer, I'll bet you didn't just come up with it in your head. Though possible, who wants the pain of calculating the em equivalent to Xpx for every sized element in their design?
So let's prime the em to something more friendly. How does 10px strike you? I like it, too.
body {
/* Set 1em ~= 10px under normal conditions */
/* Note: you can't do the following. it breaks IE */
font-size: 0.625em;
/* However, for some reason, this works */
font-size: 62.5%;
}
There's actually more to it to get the pixel to pixel conversion working, but without, it's pretty darn close.
Now throughout your stylesheets, all units of measure are in ems unless yo want them to maintain specific sizes. For example, this site uses both ems and px to position the "...but I digress." image so it stays lined up with the horizontal rule images when you zoom*Try it. Zoom the page. the page. Getting to work in one unit of measure is, in my opinion, awfully convenient. Especially when you get the bonus of relational resizing.
The effect this has is that the page scales as a unit. If you zoom in or out, you're not just zooming the text, you're zooming the whole page (less the images, unless you sized them w/ ems). This gives the page more of a printed media sort of feel. Precisely the feel I was going for in this blog design.
The layout low down
- Fixed layouts
The easiest, but restrict the browser to a specific display scale. If fonts are sized in
pxs, some browsers won't allow text zooming. If you're using a small font size, your usability suffers. If you don't usepxs, your text will zoom inside the fixed container, unbalancing the typographical harmony (and crimping your style). Also, the layout is the size defined despite the machine's resolution or the size of the browser window.For image heavy layouts, Fixed tends to be the way to go, since you will likely be working with images that might not handle scaling all that well, and work together with a layout of specific proportions.
- Liquid layouts
The most difficult to create. They allow the greatest flexibility to the viewer, allowing for maximum screen real estate consumption. If snazzy style is less important than quantity of content, liquid layouts fit the bill. Also the relation of a static text size to the scaling content container effects the measure of the text, thereby effecting readability.
- Elastic layouts
Fairly easy to use, but make the final product sort of a guessing game. Where they use a fixed unit of measure, the base size of this measure isn't constant across all browsers/views like in the Fixed layout. Also similar to the fixed layout, you have to construct your design with a particular resolution in mind (commonly 800×600). Sites with a limited number of images, but a strong need for content balance fit well in Elastic layouts.
