CSS Layouts: The Fixed. The Fluid. The Elastic.
Which Cascading Style Sheet (CSS) layout is best? All have their quirks and their unique pros and cons. Is one more accessible than the other? More usable? What are the drawbacks and how are they dealt with? Is one easier to create than the other? Is there an evil, inaccessible layout? I suspect some will say yes to this, but I’m not going to. I like them all and feel all are suitable if steps are taken to ensure easy usability and equal accessibility. All are part of a web site’s presentational layer, so most of the accessibility relies on the extractable semantics and proper usage of the underlying mark-up. What follows is my take on the rigid fixed, the adaptable fluid, and the expandable elastic layouts.
Fixed Width Layouts
A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A common and considerate fixed width is 760 pixels, a size that ensures users with 800×600 resolution monitors have close to full window viewing without annoying side-scrolling.
This blog is an example of a fixed width site, albeit one that could be easily made fluid or elastic without altering the existing imagery.
The Fixed Width Pros
- The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).
- Fixed width layouts are sometimes easier to style depending on the effect you’re after. Some visual designs can only be achieved in a reasonable manner with a fixed width layout.
- Based on the example width above — 760 pixels — the typical main content area will be in my opinion an ideal width for optimum readability.
The Fixed Width Cons
- My precious “ideal width for optimum readability” pro-listing above can go bad if the text is enlarged greatly since the line-width-to-text-size ratio doesn’t increase along with text resizing. Do note, though, in a good design, this is only a problem if the text is huge.
- People with small monitors (640×480 pixels) will end up with a horizontal scroll bar on a 760 pixel fixed width site. This is a very uncommon problem.
- A 760px fixed width site can look too narrow on large screen displays.
- The narrow width can limit the reasonable number of columns and content, but this may actually be a pro. Think forced moderation.
Some Fixed Width Advice
- Place your fixed width content on the left hand side of the page so on a typical site 640×480 pixel monitor users won’t have to side scroll to read the site’s primary content.
- Be sure to provide a handheld style sheet to accommodate smaller devices. Supplying projection and TV media-type style sheets may also be a good idea.
A Fixed Width Example
This fixed-width div is 500 pixels wide. This example cannot be resized due to its fixed width. If the text is enlarged, it’ll wrap.
Fluid or Liquid Layouts
A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar.
GrayBit.com is an example of a fluid width site. It resizes to under just under 755 pixels before sprouting a scroll bar, but the use of the scroll bar isn’t required to access the content. In fact, the site remains perfectly usable down to about 560 pixels after which elements start overlapping, getting concealed, or dropping. Most fluid layouts have limitations like this and most that I’ve seen don’t perform well on handheld devices unless styles are removed or a handheld style sheet is furnished.
The Fluid Layout Pros
- If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is seldom a reality, but in theory, and if care is taken to ensure it, it is possible.
- Fluid widths match the browser default layout method making this the “purist” of them all. But does a developer’s want of site purity sometimes stand in the way of usability? I think it may.
- The fluid layout makes the most out of available screen real estate. More content should be above-the-fold (meaning it’s available without scrolling in any direction). But…
The Fluid Layout Cons
- Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered. There is an expression: “White space sells” and it’s a truthful statement, even on the web.
- If width limiters using the CSS property
max-width— which isn’t supported by Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may very well, in your quest for layout purity, create a site that is at best difficult to use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see the problem.
Some Fluid Layout Advice
- Use this layout method purposefully. Don’t do it because it’s “pure” and for no other reason. I suspect there has to be a better reason than this. If you do create a fluid width layout, make sure it fits in a large variety of view port sizes. Else, why bother?
- If you’re making a fluid layout site and have fixed width content areas, you have essentially made a fluid/fixed width layout hybrid and can only be as narrow as the width defined by the fixed width content section or largest object. Be careful. If you’re going to make a site that is fluid, make sure it’s really fluid and not just in name only.
- If you do create a fixed/fluid hybrid anyway, like that shown on my CSS tutorial, make sure it fits 800×600 view ports.
A Fluid Width Example
This fluid-width div is 74% of the container’s fixed width. This example cannot be resized due to its fixed width parent. Changing screen size will have no bearing and if the text is enlarged, it’ll wrap.
Elastic Layouts
An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. Thus, as the text size is increased, the sections measured in ems will increase in size as well.
An elastic width example can be seen in my CSS Zen Garden submission (limited elastic-fluid hybrid). To the best of my knowledge, this is the only CSS Zen Garden submission that is elastic and meant to be as accessible as the non-editable markup would allow. I’m proud of this project.
The Elastic Layout Pros
- If done right, this is a very stable layout method because everything resizes at the same rate. The result is nothing changes disproportionally.
- An elastic layout is challenging and cool as hell. The first time I saw one was Tommy Olsson’s site (which happens to be an exceptionally well done example of how an elastic site should be done). This blew my mind, made me laugh, and generally impressed the hell out of me. Elastic width sites are best enjoyed by enlarging the text using ctrl and mouse scroll wheel… let me hear you say “Zwoop.”
The Elastic Layout Cons
- Aside from the cool factor, I don’t really see much of a benefit to this type of layout. This makes me wonder what the point is.
- Unless limited, this layout method can be a usability disaster as it’ll get wider and wider and wider — without benefit.
Some Elastic Layout Advice
- If you’re going to make an elastic layout, make sure it works on small monitors. Else, what’s the point?
- Limit an elastic layout specifying a max- pixel or fluid width measurement (hybridize it). For instance:
#wrapper { width:60em; max-width:98%; }. Purists may argue that it’s not a true elastic layout if it’s limited or hybridized, but I really must ask: who cares? Again, layout purity is all fine and good, but not when it’s at the expense of usability. - Remembering that IE 6 and older doesn’t support max-width, try to start narrow enough that the text can be enlarged to its highest IE setting without producing a scroll bar at 1024×768. You’ll see that is the case with my CSS Zen Garden submission. To step it up a notch, you can make it narrow enough that it’ll be enlargeable to it highest setting in IE on an 800×600 monitor as well. An example of this can be seen on my skinny elastic web hosting site (limited elastic-fluid hybrid). I do plan to re-do this in less than a year, but the link is good for now.
An Elastic Width Example
This elastic-width div is 35ems wide. This example will change width as the text is enlarged, but this example has no width limiter.
In Summary
As you can see, all of these layout methods have their pro and cons (can you think of others?). As far as which one is better I don’t know. It is just a site’s presentational layer as I noted previously, so with a little care and consideration, I think all of these methods are solid and usable when creating accessible, usable sites. That said, I do suggest not falling into the web purist trap of doing things because they’re more “pure,” sometimes at the expense of usability or accessibility. I’m not trying to criticize those self-proclaimed purists, they make us think and are a source of insight, but if you follow that route, do so cautiously. Have a purpose and a plan. “Just because” is not a reason — or so I tell my kids.
John Faulds responds:
Posted: August 7th, 2007 at 12:19 am →
There is another elastic Zen Garden submission — Elastic Lawn by Patrick Griffiths of HTML Dog.
Jermayn Parker responds:
Posted: August 7th, 2007 at 1:19 am →
I personally think that some designs require a different layout so I would say there is no right or wrong layout.
Tommy Olsson responds:
Posted: August 7th, 2007 at 1:29 am →
Thanks for the kind words about my site, Mike!
When it comes to fixed, fluid/liquid or elastic, I’d say that neither one of them is perfect. The best choice for most sites is usually a hybrid of two of those methods.
The problem with fixed-width layouts is that they assume that the user has his or her browser window maximised. While that is likely on smaller displays, it’s less probable on large, high-resolution monitors. I’m using a 1280×1024 monitor at the moment, and my Opera window is not maximised.
A user with an 800×600 monitor may have her browser window maximised, but she may also have a sidebar open that takes up a couple hundred pixels of the available width. A 760px design will give a horizontal scroll bar in such a window.
My blog is a constrained fluid/elastic hybrid. The right-hand column (secondary navigation plus assorted links) is elastic: its width is given in
em. The main content column is actually fluid, but the overall width is constrained withmin-widthandmax-widthinem.The result is a layout that adapts both to the viewport size and to the text size. At least within a reasonable range. The minimum width constraint prevents lines of text from being too short, instead causing a horizontal scroll bar in very narrow viewports. The maximum width constraint prevents lines of text from being overly long and unreadable. The elastic links column means it won’t take up more space than necessary.
It even works decently in IE5 and IE6. IE7 currently gets an unstyled page, because it doesn’t need the hacks in the IE style sheet and it doesn’t support CSS well enough to load the standards-compliant style sheet. I’ll need to fix that when I have time …
Ceyhun AKSAN » Bağlantılar ve Derlemeler : Ağustos responds:
Posted: August 7th, 2007 at 4:23 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. […]
Koen Willems responds:
Posted: August 7th, 2007 at 9:32 am →
Thanks for this good explanation Mike!
In fact, I realize that what I always mentioned to be an elastic layout is in fact fluid.
Mike Cherim responds:
Posted: August 7th, 2007 at 9:45 am →
@John: Thanks for that. I’m glad to see another. I really enjoy the submissions there even though most are accessibility-challenged. But then again, I appreciate and enjoy well-done Flash sites for the art that goes into making them, as well.
@Tommy: Thanks for that example of where fixed might be less than ideal. I don’t use sidebars so I tend to forget about them. That’s a solid argument for fluid-width sites (or those hybridized with fluid constraints). Good word, by the way, probably better than my “limited”
Freddy responds:
Posted: August 7th, 2007 at 9:55 am →
Good article! Personally, I think the decision lies within the specifics of the project itself and how much expandability may be required as the site evolves. I don’t feel a need to consider 800×600 resolutions anymore and it has yet to become an issue. Personally, I prefer the hybrid solution to layouts. As long as the content is clean & meaningful and the code semantic, I’m happy.
Israel Jernigan responds:
Posted: August 7th, 2007 at 11:25 am →
I think the biggest punch for elastic layouts is the accessibility issue. It has the greatest potential for enlarging or decreasing font sizes. And it’s not just the text, it’s the entire site that would increase. To me it seems like that’s the way to go. If you want the most people to enjoy your site make the key elements elastic. But, like you said, NOT EVERYTHING on the page has to be elastic, hybrids are your friend.
An example, I work with people who use 21 in”, 30 in” monitors(I know not the norm, but they still use the web) and they set their default font size to much larger, and most sites suck at that size(or don’t resize at all). But the elastic sites retain the best usability and accessibility (if made correctly) over any of the other layout types.
Mike Cherim responds:
Posted: August 7th, 2007 at 1:00 pm →
@Freddy:
For what it’s worth I think it’s too soon to rule out 800×600. For one thing, I have to take into consideration what Tommy said about some people not maximizing their browsers, especially those on larger monitors. (Personally I use 1024×768, but often have my browser in an 800×600 window so larger sites can be an inconvenience to me.)
Another thing is the average age of users is on the rise. This, of course, is due to the young age of the technology so it makes perfect sense. You may wonder why age has anything to do with resolution so I should explain that my wife chooses an 800×600 resolution because it makes everything bigger. My wife’s failing eyesight mandates this as a logical move on her part (much better than Windows magnifier and other OS accessibility options). My daughter, whose eyesight is just fine, also chooses 800×600 as well for the same reason. For her it’s not because she can’t use a larger resolution like my wife, she just likes it that way. Easier on the eyes she claims. My father also chooses this smaller resolution for the same reasons as my wife. That’s three people I know of just in my own family. Thus I can’t imagine they’re the only ones doing the same thing. For the record, all three people mentioned have systems which come preset to 1024×768 so these are conscious choices they made, for their own ease of use. So, as long as I have this personal insight into the matter, there’s no way I can forget them or suggest they get with the program, so to speak. For me 800×600 will be with us for a while.
Regarding it not being an issue, I would think that’s really hard to quantify. The reality is, if people have a hard time with your site they will likely not take the time to mention it, they’ll just move on. In fact, I’d venture to say that for every thousand users that have difficulty with a site, the owner should count themselves lucky if just one person actually takes the time to mention it. To empathize, I ask this: Have you ever had a hard time using a web site? I suspect the answer is yes. So, I must also ask: Did you tell the site owner about it or just move on? I suspect the latter in the vast majority of cases.
My conclusion: If something hasn’t been reported as an issue is a weak indicator, at best, that an issue doesn’t exist.
MFebber responds:
Posted: August 7th, 2007 at 4:57 pm →
Thanks for supporting 800X600. I work at a large university where nearly everyone is using a computer. I notice that many people of all ages and monitor sizes/native resolutions have their browsers set at 800X600. I have wondered if the widespread use of overhead fluorescent lights makes visibility more difficult at higher resolutions? Whatever the cause, 800X600 is not dead.
Carmelo Lisciotto responds:
Posted: August 7th, 2007 at 7:25 pm →
I agree no right or wrong simply preference.
Carmelo Lisciotto
www.carmelolisciotto.com
Brad Fults responds:
Posted: August 7th, 2007 at 9:30 pm →
Good analysis. Another one of my favorite poster children for elastic layouts is Dan Cederholm’s SimpleBits.
Mark responds:
Posted: August 7th, 2007 at 10:20 pm →
WoW, nice web site, Anyway, I think in some cases whatever works, works. I know this girl in japan that don’t know diddly squat about css, or scripting but she is very artistic. She designed this site: nagomi-studio.net using all just tables. As a wannabe web designer myself I know tables for the most part are evil. But hey, this don’t look that bad considering there isn’t one .css file attached to the entire site. Much of the time in the art world the people that don’t know what they are doing does the best work. “except for Mike” hehe, Hendrix couldn’t read sheet music.
CSS布局三种方式 CSS Layouts:The Fixed. The Fluid. The Elastic —— 夜鸟的巢 responds:
Posted: August 7th, 2007 at 11:21 pm →
[…] 今天看到一篇文章： CSS Layouts:The Fixed. The Fluid. The Elastic，讲述了CSS布局三种方式的优缺点。 […]
HTML Editor Reviews » links for 2007-08-08 responds:
Posted: August 8th, 2007 at 2:28 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com The pros and cons of fixed, fluid, and elastic CSS layouts. (tags: css layout webdev comparison) 08-07-2007 | 11:28 pm […]
Melodycode.com responds:
Posted: August 8th, 2007 at 4:13 am →
Pro e contro dei layouts CSS: fisso, fluido ed elastico…
Mike Cherim ha scritto una piccola guida molto utile intitolata “CSS Layouts: The Fixed. The Fluid. The Elastic.” dove espone in maniera chiara e precisa i vantaggi e svantaggi nell’utilizzare layouts di tipo fisso, fluido ed elastic…
LautundKlar Webdesign Blog » Die drei wichtigsten CSS Layout Typen responds:
Posted: August 8th, 2007 at 8:18 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. […]
Dennison Uy - Graphic Designer responds:
Posted: August 8th, 2007 at 11:58 am →
This is the first time I’ve heard of the term “elastic layout” and I have been using this technique for quite some time now. It’s almost a must especially if you’re working on a site that has font increase / decrease features.
Blog Image & Web Solution » Layouts CSS: El Fijo. El Fluido. El Elástico responds:
Posted: August 9th, 2007 at 1:22 pm →
[…] ¿Cuál estilo de CSS Layout es el mejor? Todos tiene pros y contras, todos tienen sus trucos y técnicas. ¿Es alguno mas accesible que otro, más fácil de implementar? Este artículo de Mike Cherim publicado en su Blog te ayudará a conocerlos a fondo. Lo que si le queda claro es que el Fijo es rígido, el Fluido es adaptable y el Elástico es expandible. […]
» Links for 10-08-2007 » Velcro City Tourist Board » Blog Archive responds:
Posted: August 9th, 2007 at 11:26 pm →
[…] 6 - CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com Web-dev malarkey. Cheers, Jeremy. (tags: layouts design style code CSS webdev) […]
Der kleine Wochenrückblick KW32 at trilodge computin blog responds:
Posted: August 10th, 2007 at 4:40 am →
[…] Wir alle kennen das. Man startet ein neues Webprojekt und überlegt wie man das Layout in XHTML/CSS umsetzt. Wer sich dabei immer mal wieder unsicher ist: Mike Cherim hat jetzt die verschiedenen Möglichkeiten gegenübergestellt. (via) […]
ff-webdesigner responds:
Posted: August 10th, 2007 at 12:24 pm →
fluid layouts? i think they are very dangerous with the change of viewing possibilities. 2 reasons for that. first: not any blackberry(set top box etc) is supporting css correctly. 2nd: there’s no use for that if you only have 240 pixel display
OPC Toolbox » Blog Archive » CSS Layouts: The Fixed. The Fluid. The Elastic. responds:
Posted: August 11th, 2007 at 2:48 am →
[…] Mike Cherim discusses the pros and cons of various CSS layout methods. […]
Fatih Hayrioğlu’nun not defteri » 10 Ağustos 2007 Web’den Seçme Haberler responds:
Posted: August 11th, 2007 at 5:41 am →
[…] “CSS Planlama: Sabit, Elastik ve Akıcı” anlatan İngilizce güzel bir makale. Link […]
links for 2007-08-13 : 7 seconden responds:
Posted: August 12th, 2007 at 8:32 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com (tags: css webdesign reference) Tags: none […]
Elaine responds:
Posted: August 13th, 2007 at 2:35 pm →
In a lot of cases (in my experience) it’s because that’s usually the default resolution, and most people don’t know that they can change it.
And if they change it, then the text on all their icons get smaller, and they don’t know that they can change that, too! (And text that looks small at 800×600…very, very hard to read if you bump up the resolution.)
James responds:
Posted: August 13th, 2007 at 2:38 pm →
Is there any easy way of doing column layouts?
Mike Cherim responds:
Posted: August 13th, 2007 at 3:03 pm →
@James: I typically use floats to make columns. Float one left, float the other right, display both inline. It’s a pretty stable method.
Max Design - standards based web design, development and training » Some links for light reading (7/8/07) responds:
Posted: August 13th, 2007 at 6:50 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. […]
¿Fijo, fluido o elástico? ¿Que estructura elegir para nuestra web? | aNieto2K responds:
Posted: August 13th, 2007 at 7:42 pm →
[…] Podemos optar por un diseño fluido, que se ajuste al navegador, o un diseño fijo para mantener una estética definida, en este punto tan subjetivo debemos tener presente que estructura nos conviene para cada proyecto. Pero para ello debemos conocer los pros y los contras de cada uno estos layouts (estructuras). […]
Recent Links for August 13th | False Positives responds:
Posted: August 13th, 2007 at 8:32 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com - a take on the rigid fixed, the adaptable fluid, and the expandable elastic layouts. […]
links for 2007-08-14 « Simply… A User responds:
Posted: August 13th, 2007 at 8:42 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com (tags: webdev css ** code html accessibility article blog compare comparison design elastic fixed fluid webdesign layout) […]
Comparing CSS layouts - Fixed, Fluid and Elastic responds:
Posted: August 14th, 2007 at 1:57 pm →
[…] You can read Mike’s blog on the different CSS layouts over at his blog. Related Posts: […]
links for 2007-08-14 « toonz responds:
Posted: August 14th, 2007 at 7:22 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com (tags: css layout fluid fixed) […]
POWERED » О css-макетах responds:
Posted: August 17th, 2007 at 9:23 am →
[…] Примечание: ниже выложен перевод статьи “CSS Layouts: The Fixed. The Fluid. The Elastic.”, в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки). […]
Nick Cowie responds:
Posted: August 17th, 2007 at 11:25 pm →
If you want a elastic fluid or is it fluid elastic layout, here is a little experiment of mine. It is a proof of concept that I have never got round to fixing the javascript for. It is a elastic layout that adjusts to your screen width.
Der Korsti bloggt. responds:
Posted: August 18th, 2007 at 7:15 am →
Fixed, Fluid, Elastic?…
Ich habe mich soeben für eine feste Breite (fixed) für das neue Theme entschieden. Dass alle Varianten Vor‑ und Nachteile haben und die Wahl eher eine Geschmackssache ist, kann im Artikel „CSS Layouts: The Fixed. The Fluid. The El…
CSS Layouts: The Fixed. The Fluid. The Elastic. : Beyond Excellence in Web Design :: Projects by Peggy responds:
Posted: August 18th, 2007 at 2:02 pm →
[…] Read the full article: CSS Layouts: The Fixed. The Fluid. The Elastic. Posted August 6th, 2007 by Mike Cherim. […]
Laura responds:
Posted: August 19th, 2007 at 6:47 pm →
Really nice overview, I tend to get stuck in the same layout methods and not spend time exploring other ways.
Phil H responds:
Posted: August 21st, 2007 at 7:41 am →
My vote goes for ‘elastic’ for the majority of websites. Not necessarily for every website, and I see a case for building in min and max widths to temper it, but the majority of sites fall into this bracket. There are several reasons for this:
Line lengths and readability
A long history of graphic design has determined that the most readable line length is around an alphabet and a half (18ems approx, dependent on font) or others say up to 24 ems. Thus in defining the width of a block of text in terms of ems the readable width remains. No other method gives this without hammering you into the fixed-width version which breaks the moment you step outside the target browser/resolution/text size. This also means you can go for multi-column layouts if you so wish - it makes the amount of text that will fill a column predictable.
Drop caps/Initials and in-flow images
Drop caps, or initials, such as you might find in those ancient hand-copied bibles or in newspapers, need the size of the initial to be defined in terms of the text that follows it. You can do this without the rest of the layout being elastic, but generally in graphic design you set the proportions of one thing compared to another in the most aesthetically pleasing way you can.
If you have images in the flow of text, and you want the text to flow around them - much as you’d find in a magazine - the elastic version allows you to have a page where this image scales with the text. Thus the image (or in-line quotation) doesn’t get separated from the text it’s supposed to be near, and doesn’t squeeze the text into silly single word columns.
Single word columns
The bane of ‘fluid’ sites in small windows, or fixed ones at large text sizes, is the ’single word column’. You make the text larger to read it, or make the window smaller to see your IM window, and
suddenly
you’re
forced
to
read
just
one
word
per
line
which
makes
the
prose
oddly
punctuated.
Most of the time it would be better to have the main text refuse to resize, and let the user scroll horizontally to view only the middle column (so you might put a max-width 98% on the central column, rather than the whole page. This is particularly annoying on handheld devices, which inevitably have small screens. I’ve just tested it on my pda/phone thing (WM5/IE Mobile), and 24 ems just fits, with 20 a bit more comfortable.
Resolution independence
Today’s monitors are around 17″, at a resolution of around 1024px wide. XP and its predecessors were built with that in mind. But as we move towards larger screens, or higher resolution screens, people want more dpi rather than just more space. That’s why people intentionally set their monitor’s resolution below its maximum - they prefer the better readability to the real-estate. Thus in future OSs (Vista may well do this), you set the resolution of the monitor to whatever is comfortable. Preferably to a higher dpi, making everything a bit bigger, and allowing you to sit further back - a huge ergonomic improvement. An elastic layout takes all this in its stride, and acts much more like a pdf - more dots just make the text prettier and more readable. Try setting your browser text size to Large(r), and sitting back in your chair. Isn’t that more readable?
‘Zoom’ Consistency
People use Word, Excel, PDF viewers, etc. They understand zoom. If you want to see an image bigger in a pdf, or the text more clearly, you just zoom in a bit. The Ctrl-scroll zoom is widely implemented. The behaviour of a document when you perform the zoom action is predictable and understandable - everything gets bigger, and if you go too far, it disappears off the screen. We have a new medium, yes, so we can go one better by using max-width and the like to reduce the horizontal scrolling if we can. But people really want the pdf functionality. Websites are just plain weird when you ‘zoom’, which is why zooming isn’t common. Everyone zooms pdfs - the tool is right there. Zoom non-elastic websites at your peril, or for amusement.
Simplicity of design
Designers draw things on pieces of paper, or on napkins, or on whiteboards. They draw the logo here, and a divider line there, and a big swooshy background thing there. The main reason that fixed-width designs are out there is that people take the design and translate it onto the screen in a format where things stay where you put them. Yet it’s totally inflexible, and the moment you step outside the normal box, you’re left with something messy or even unusable. With the elastic approach, it’s just as easy to fit all the bits together, and have it just work, even when people resize the page or change the font size. It pushes people to use CSS as you can’t define sizes in ems without it, and in so doing away from the horrors of tables, without requiring them to spend ages dealing with the complexities of fluid layouts.
In short
It just works. It just works for designers, and it just works for users. It does what you expect. It is flexible and responsive to the browser environment, and provides the stability to allow you to employ techniques from print media without breaking everything. It just works.
Phil
Mike Cherim responds:
Posted: August 21st, 2007 at 8:59 am →
Nice take on it, Phil. Good argument for elastic. Thanks for taking the time to present that. I find no fault in it, but I do have to state that fluid sites as well as elastic can be tempered/constrained/limited to control reading widths, at least in browsers that support min/max width. But you’re right in that things can go bad fast if care isn’t taken with the other layout methods (I too find elastic the most stable while remaining horizontally movable). This blog, for instance, does happen to be a fixed width (not for design considerations, though), but hopefully it’ll work out and remain accessible/usable within a wide range of resolutions and font sizes — up to three increases by keyboard which is really big text.
theartbox » Blog Archive » CSS макеты responds:
Posted: August 23rd, 2007 at 6:12 pm →
[…] Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям. Спасибо всем, кто дочитал до конца статьи. Примечание: выше выложен перевод статьи “CSS Layouts: The Fixed. The Fluid. The Elastic.”, в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо посмотреть профиль MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки) […]
CSS Layouts: The Fixed. The Fluid. The Elastic. at fxCraft responds:
Posted: August 28th, 2007 at 7:04 pm →
[…] Read more> […]
rtraction » Blog Archive » CSS Layouts: The Fixed. The Fluid. The Elastic. responds:
Posted: September 4th, 2007 at 2:29 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic […]
Revue de presse | Simple Entrepreneur responds:
Posted: September 8th, 2007 at 12:39 pm →
[…] CSS Layouts: the fixed. The fluid. The elastic. Un article très complet sur les différentes manières de présenter des informations avec des feuilles de styles. L’auteur dresse également pour chaque méthode une liste d’avantages et d’inconvénients. […]
www.limoncik.com » Blog Archive » CSS макеты: фиксированные, резиновые, эластичные. Плюсы и минусы responds:
Posted: September 13th, 2007 at 2:51 pm →
[…] Примечание: ниже выложен перевод статьи “CSS Layouts: The Fixed. The Fluid. The Elastic.”, в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки). […]
Vertinox responds:
Posted: September 17th, 2007 at 7:44 am →
HI,
I have one sample.html page. I’m using extenal css to design this page.
I have used all div tags instead of table and tr to design the page. But when I see this page in 800×600 resolution, My font should shrink. Also when I check it on high resolution ie.1280×1024, it should become big. I”m using font size in em, but still its not workin.
So can anyone help me for css to design my page in this manner. Also I dont want to use any javascript which checks the resolution first and then will work.
Lookin for pure css which will work in all the resolution. basically the font size.
Looking for reply,
Thanks,
Vertinox
Mike Cherim responds:
Posted: September 17th, 2007 at 8:47 am →
Sizing your text in ems mean it’ll enlarge if you enlarge it with your browser (ctrl++), but the font size isn’t going to change based on resolution.
Nachlese August 2007 - Die Seiten des Monats | Nachlese responds:
Posted: September 18th, 2007 at 8:20 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. Mike Cherim erklärt den Unterschied zwischen verschiedenen Layouttypen sowie Vorteile und Nachteile der einzelnen Techniken. Zur Wiederholung: Layouts fester Breite (pixelgenaue Angabe) verändern sich bei der Skalierung des Seitenfensters nicht, erzeugen also bei genügend kleiner Fenstergröße einen horizontalen Balken. Flüssige Layouts arbeiten mit Prozentwerten; die Breite von Seitenelementen hängt von der Breite des Fensters (viewport) ab — der Horizontalbalken entsteht nur bei einer schmalen Fensterbreite. Elastische Layouts hängen dagegen von der Schriftgröße im Text ab (em-Angaben). […]
Best of August 2007 . responds:
Posted: September 18th, 2007 at 9:55 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. Mike Cherim explains the difference between the three layout types as well as their advantages and disadvantages. A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. […]
Sean responds:
Posted: September 18th, 2007 at 11:25 am →
I am pretty sure max-width is supported by IE7. In fact, I know it is, because when I am building a site with a max-width, the only exception stylesheet I have to make is for IE6.
Mike Cherim responds:
Posted: September 18th, 2007 at 11:41 am →
No argument from me, Sean. In the article I wrote…
lost node » Blog Archive » Best of August 2007 responds:
Posted: September 18th, 2007 at 12:23 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. Mike Cherim explains the difference between the three layout types as well as their advantages and disadvantages. A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. […]
煎蛋 » 2007 年 8 月最佳设计类网站收集 responds:
Posted: September 18th, 2007 at 1:32 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. CSS 布局。 […]
مدونة الدكتور نت » أرشيف المدونة » وصلات و مواقع 19-سبتمبر-2007 responds:
Posted: September 19th, 2007 at 2:17 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic: أشكال التصميم بواسطة html و css و مميزات و عيوب و نصائح لكل نوع . […]
christian schorn » Blog Archive » links for 2007-09-19 responds:
Posted: September 19th, 2007 at 5:24 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com (tags: web css) […]
christian schorn » Blog Archive » Links vom 19.09.2007 responds:
Posted: September 19th, 2007 at 9:35 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com […]
mcdave.net » links for 2007-09-20 responds:
Posted: September 20th, 2007 at 2:26 am →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com (tags: css layout webdesign design fluid fixed webdev elastic) […]
Mai pen rai khrab » Fest, flüssig oder elastisch? responds:
Posted: September 20th, 2007 at 7:10 am →
[…] Beim Erstellen von Layouts mit YAML taucht oft die Frage auf, welches Layout gewählt werden soll: Fixed, fluid oder elastic steht zur Wahl. Welches ist das beste für meinen Zweck? Mike Cherim hat die Unterschiede in seinem Blogbeitrag CSS Layouts: The Fixed. The Fluid. The Elastic. sehr gut beschrieben und erklärt. Bookmark hinzufügen bei: […]
YWNK! » Blog Archive » 2007 年 8 月最佳设计类网站收集 - You Will Never Know! responds:
Posted: September 20th, 2007 at 1:28 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. CSS 布局。 […]
Times Emit: Apt’s links for September 25th responds:
Posted: September 25th, 2007 at 8:32 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. - Beast-Blog.com - A good digest on the perennial question of which kind of web layout to have… [thanks again Alex.] […]
» Best of August 2007 responds:
Posted: September 26th, 2007 at 2:14 pm →
[…] CSS Layouts: The Fixed. The Fluid. The Elastic. Mike Cherim explains the difference between the three layout types as well as their advantages and disadvantages. A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. […]
Jon Tan responds:
Posted: September 27th, 2007 at 11:00 am →
Hi Mike, good analysis and I’ve included in an article on elastic layout and em units so anyone interested can get a balanced overview of all different layout types.
Mike Cherim responds:
Posted: September 27th, 2007 at 1:31 pm →
Excellent nuts-and-bolts article, Jon. Love the Elastigirl and Pixelman image!
Jon Tan responds:
Posted: September 28th, 2007 at 12:37 pm →
Thanks Mike, much appreciated. I’ve tried to lower to barriers as far as I can. My wife loves being compared to Elastigirl, too, so I figured the em wouldn’t mind.
Mike Cherim responds:
Posted: September 29th, 2007 at 1:21 am →
Example Pages Available
Note: I had created three example pages a while back (2005) to support a “hasLayout” experiment to see how it affected keyboard focus.
I made the pages for Jim Thatcher and the other people involved in the research were Liam McGee, Becky Gibson of IBM, Mike Scott, and Terrence Wood.
I had them elsewhere on the web but just moved them to this domain and they should be posted here to serve as example pages:
Small Comment Boxes Need to Grow Up - Beast-Blog.com responds:
Posted: October 27th, 2007 at 9:51 am →
[…] Note: If you’re not familiar with the layouts above, see CSS Layouts: The Fixed. The Fluid. The Elastic. […]
A Comparative: Accessibility and Usability - Accessites.org responds:
Posted: November 5th, 2007 at 1:02 am →
[…] You are checking out a web site and you happen to have one of those snazzy mega-monitors with an outrageous resolution. The maker of the site decided on a liquid layout, but hasn’t constrained the width to remain reasonable. As a fully enabled user you are trying read the content, but by God the lines are over 2000 pixels wide and you keep getting lost! Is this a usability issue, accessibility issue, a little of both, neither, or something else? […]