It’s over, it’s done. Those of you holding on should wave the white flag as two of the best flexible width sites, Doug Bowman and Dan Cederholm, have thrown in the towel and gone fixed-width without even an entry of explanation, I suppose because the benefits of fixed-width are so obvious no explanation is necessary. Update: Cedorholm’s design is now centered.
The assault is coming from all sides:
Dear Mr Antonioni:
I recently screened your classic film, The Red Desert, starring Monica Vitti and Richard Harris. I have a problem with the way you used screen space. My theater’s screen is big and wide. It is capable of handling many actors at the same time. For instance, crowd scenes and battle scenes work well. But in your movie there are only a few actors — and many times they are pictured in one corner of the screen or another, against a stark minimalist background. This is a terrible waste of screen space. For instance, there is one scene where Ms Vitti is filmed on the left side of the screen and there is a white forest behind her. The white forest is not much to look at. Sure, I can look to the left and watch Ms Vitti’s performance, but what do I see when I squint my eyes and look only at the right side of the screen? Not much! I urge you to add extra characters and situations to your movie so every inch of my screen bursts with action at all times.Sincerely,
Howard Gumpf
Ouch. Now I think the film/web analogy is a bad one, and it breaks down with any sort of critical thought. Zeldman knows this but he’s trying to make a point.
Was it that long ago that flexible-width designs were all the rage? They came in with a bang, and left with a whimper. Is anyone still holding out? Are there any good flexible sites left? The only place I see it anymore in web applications (such as the WordPress administration interface) and in lightly designed e-commerce sites like Amazon.
I love your movie analogy… certainly illustrates the point. No point in trying to design for flexibility if it just doesn’t look that great…
Ha! I thought I noticed that today on Stopdesign but chaulked it up to too much caffeine. Thanks Matt, now I can have another cup!
Seriously though, I’m putting together a layout right now and I couldn’t help but think of (Zeldman’s) Give me pixels or give me death. At a crossroads, I’ve decided to go fixed width, so it seems. (nice redesign btw!)
Steve, that comes from the illustrious Mr Zeldman.
Mike, have a cup on me. Thanks for the comment on the redesign. Drop me a note when you relaunch your blog/website.
I used to think flexible width designs were the bee’s knees… now they seem to be more of the… cricket’s… ankles? I’m not sure what the opposite of bee’s knees is. Regardless – fixed width designs just look better 🙂
I agree, fixed width is the way to go for readability. However, it’s always a good idea to let the user pick the layout he/she wants to see. It’s not hard with stylesheets to set up an alternate variable width version of your site. I did it on Webspiffy via a PHP style switcher and the feedback is positive so far.
Mike #2, of course that brings up another problem. Fixed width designs can become crutches. My design is currently set up where it wouldn’t translate easily into a liquid layout. It’s an interesting idea though, and I’ll look into it.
What I’d like to see are more scalable fixed-width designs, like Zen Garden: Elastic Lawn, or this Notestips.com redesign. These design don’t change with the window size, but they do scale to match the font size. This solves one of the problems with most fixed-width designs (they break when the font size is too large or too small).
Here’s some commentary by the designer of Elastic Lawn.
Matt #2, there’s a problem with designs that become wider based on the text size though, one I have not seen addressed adequately. Personally I zoom text all the time because sometimes I like to sit back when I’m reading. When I zoom a site with a fixed width set in ems, when I zoom the design often becomes wider than my window, or even wider than my window when it’s fully maximized. So, when the text is at a size I want to read, I can’t even see it all because some is off the screen. A
max-widthof maybe 100% could fix this, but that would be unsupported in IE. I do remember seeing an interesting hack to implementmax-widthfor IE, it was something like embedding script within the CSS. I don’t know if I’d ever do that, but it was interesting nonetheless. I’ll have to dig up that link, because I would want to do something like that anyway if I were to move this site to a dynamic-width design.Matt, you’re probably thinking of this
max-widthin IE hack. Like you said, it uses an IE-only CSS property to allow you to embed javascript in you CSS.Jacque Distler has gone fixed width as well, though I think he may have done it a bit ago. His site works a bit better fixed width I think.
Interesting… Just as all this new hubbub about fluid designs came up, I was switching back to fixed width design (from a long binge of fluid). At first, it was just because my layout was extraordinarily simplified when fixed. Then I realized the advantages. Then all this stuff came up (began at Asterisk*, perhaps?).
Anyways, I’ve gone to a fixed layout in my recent redesign. It really does give me as a designer a lot more freedom, and the content is all the more readable. I’ve done the same design fixed and fluid, just to prove to myself that I could, but ended up liking the fixed version much better.
I also tried one of those scalable designs for a friend (http://tkfast.webhop.org/). I even gave myself a pat on the back for having such a great idea. But, like Matt said, it’s not good for people who just want to scale the text, not the page itself. Perhaps browsers should have a separate page scale option (never gonna happen; it’s not abstract enough, and it would only benefit a small fraction of websites).
These days, I’d definitely go fixed (and centered, a lot of times). Fluid is great in theory, but in practice, it’s just not practical to read (on an already reader-contemptuous medium).
Not fixed width. Max width:
For narrower windows, the design is still liquid.
I find flexible layouts sexy http://kalo.slickpc.net/lab1.php. Indeed it costs me a great deal of time to ensure flexibility but I think sometimes it’s worth it. Yet for the next project I don’t think I’ll care so much.
Sometimes (like for my weblog) I’ll go with a fluid layout. Othertimes, it’s fixed. Depends on the project. I have to admit, I liked both stopdesign.com and simplebits.com better when they were fluid. I certainly hope people don’t start switching their designs from fluid to fixed for the sole purpose of jumping on this bandwagon that appears to be starting. I have to admit, though, that all the articles written about this issue have caused me to lose a little confidence in fluid layouts. From now, I might make it a point to include a fixed alternate stylesheet for my larger fluid projects.
I like to specify everything in
emvalues, especially the width of the displayed content. That way, the user agent’s font size value has no influence on the number of words that fits on one line, and with that an important part of the design. Changing your font size settings -on most of my sites- looks like zooming in and out on the entire page, rather than just the letters.Because of limited support for SVG, I use a lot of
imgelements on my sites, and since setting theheightandwidthvalues of those to anything that is notpxdoesn’t really improve the quality of the image that is displayed (understatement) these are not relative.Because of that (and other, less important reasons), I like to set a
min-widthinpxto the width of the displayed content. This way I prevent that the displayed content becomes (a lot) smaller than the images (or other static elements) it contains, when the user agent’s font size setting are decreased.Last but not least, I know it is annoying to have to scroll both ways to read a text, so I always set a
max-widthvalue to the displayed content in%. This way, the displayed content does not become wider than the window when the user agent’s font size setting is increased, or the window is narrowed.The CSS for the displayed content usually looks something like this:
#content {
width: 50em;
min-width: 300px;
max-width: 100%
}
I’m not saying this is the way, but it has been (and still is) for me.
Sincerly,
ACJ
Interesting my writeup came a day after yours. I guess that makes it official.
http://www.9rules.com/whitespace/design/death_of_liquid_layouts.php
Meyerweb is still flexible-width, and likely will remain so for a long time to come, although I may drop in
max-widthandmin-widthconstraints at some point. Whether or not Meyerweb is a “good” flexible site probably ests in the eye of each beholder. I like it, but then I would.Dear Mr Zeldman:
I recently screened your version of the classic film, The Red Desert, starring Monica Vitti and Richard Harris. I have a problem with the way you used screen space. My theater’s screen is big and wide. But your movie is only 50 inch wide, no matter what I try. This is a terrible waste of screen space. Only the people at the first row could see what was going on. I also tried to watch the movie at home, but my TV isn’t 50 inches wide. I urge you to make the movie-width adjustable so the movie can be enjoyed at all times.
Sincerely,
Howard Gumpf
What an interesting development, as I would have put money on flexible/liquid layouts becoming the norm rather than fixed. I have always used fixed and centered layouts because I am not skilled enough to develop a properly liquid layout. I find it easier to plan in pixel widths and heights.
The problem is that I am now getting visitors to my site with screen resolutions of 2056×1024!!, since the max resolution I can test on at the moment is 1024×768 I have no idea what my site looks like at a greater resolution.
I still believe that a liquid layout is the way to go, if you have the skill to pull it off. Unfortunately you can count on one hand the sites that do manage this – my pick would be http://www.etherfarm.com. As long as the text is scalable and doesn’t break the layout, the header, navigation and other static elements aid in the scannability of the content rather than hinder it, then all should be well.
As far as I’m concerned, fluid layouts now only benefit those with small resolutions (like 640×480; ouch), because it allows the layout to shrink to their viewport, getting rid of the admirably annoying side-scroll.
Viewing a fluid layout (without max-width) on a large screen is terrible for reading (as if reading screen media wasn’t bad enough), due to long lines of text (anyone who’s read a txt file on Mac Internet Explorer should really know the pain). Max-width solves this problem (letting it shrink-to-fit for small screens and remain narrow enough for big screens), but everyone’s favorite browser doesn’t support it (without the proprietary eval() trick).
Fixed width really isn’t the evil we thought it was (I first read about fluid layouts in an issue of MacWorld). It just has to be applied properly (not requiring users to have a ridiculously huge resolution).
You know what would be really useful? Hard data on both screen resolution and whether the users surf full-screen or in smaller windows. The correlation would really help to make some nice generalizations. If people with big resolutions tend to surf in smaller windows tiled about their screen, liquid and fixed both serve well. If the same people actually like to surf full-screen, liquid layouts would be terrible on them.
Either way, I’m going with my fixed layout from here on out. Because I lack the necessary skill? Not so much. More because I’m stubborn, and I think it benefits the end user. In the end, it’s just a design choice we’ve had to make from the beginning. If nothing else, make an alternate stylesheet. (Then, for fun and profit, check your logs for which stylesheet is used the most, minus obvious bias toward the default)
Dris, I can’t give you hard stats about the whole web, but I can about my little slice of it. Here’s the top five resolutions of people who come to photomatt.net and the percentage they comprise of total visitors:
I would strongly caution against taking Matt’s entry too literally. Of course fixed-width designs have advantages – especially for designers. But liquid-width designs also have advantages that shouldn’t be ignored simply because everyone else is going fixed or fixed-width designs are inherently easier to design. It would be more helpful to make a list of the advantages and disadvantages of each approach rather than just say, “Everyone else is doing it.”
How many of those who have 1280×1024, 1152×864 and 1600×1200 resolutions use a browser which supports max-width?
They are for me, can you enlighten me or point me in the direction of something that will help me understand? Thanks
Howard, that would actually be an interesting statistic, and I’ll look into compiling that from my stats. BTW, why stay anonymous? I’m curious who you are.
Sian, I’m still hoping either Dave or Dan will post about their design decisions so that should clear up their thinking. That statement was actually made half-sarcastically.
Joshua, doing something because everyone else is doing it is never a good reason for anything. If you point out some resources of both sides of the debate I would be happy to link them. This entry was simply that I noticed that my two favorite fluid layouts went fixed within days of each other, and I thought it was worth writing about.
Flexible and readable and nice-looking: http://clagnut.com/
My site is also liquid and will stay so. I won’t turn back to all those headaches about choosing which resolution to indulge in.
For instance matt, your site is around 815 pixels wide in my Mozilla. How do you deal with 800×600 people? Horizontal scrollers? Not on my life.
It would make sense to me that liquid layouts allow better use of space, and avoidance of whitespace; going back to fixed-width seems like stepping backwards – like reverting to using tables for layout.
My site (schillmania.com) isn’t a perfect example, but it does try to be fluid and take advantage of all available browser real estate.
Why shouldn’t sites scale? Unlike printed work on a standard 8.5 x 11″ sheet of paper, the Web is rarely browsed through a consistent “viewport”.
Scott, why is whitespace something you want to avoid? The most beautiful and effective designs have great use of whitespace, not just on the web but everywhere.
“Avoid” may be a bit over the top; I agree that whitespace has a place and a purpose and looks good when implemented well. Perhaps fluid whitespace is what I should have said, rather 😉
Flexible widths indicate that a site will accomodate a variety of viewing options, instead of just one. Zeldman (hallowed be his name) has a site which looks not so hot on 1280X1024 – less than half the screen is used. Whitespace as artistic statement only works when you know what the resolution will be – otherwise you have varying amounts of it and can’t predict the impact accurately. WIRED looks pretty good in whatever resolution you choose.
Fixed widths are SO much easier to design for, but that’s not the point. A web designer works with a fluid medium and should make fluid designs – that’s why we get the big bucks!
Some examples of good liquid designs: sidesh0w, clagnut, etc, Adot’s Notblog, WAMAS, 1976design.
That’s just on my blog shortlist.
David, Dunstan at 1976 Design does not have a liquid design. The header background image stretches, but the content is a fixed width.
However, 1976design does use a max-width set in ems, so that content scales with font size (where supported).
Matt, I would say any design where the main content is not relative to the screen size (not the font size) is fixed-width.
There is a easy way to do max width in ie. see.
http://www.svendtofte.com/code/max_width_in_ie/
This site also deals with the real problem with both
approaches. words per line and/or characters per line.
I prefer a fixed width and centered layout myself.
My monitor is set at 1600 and most fluid layouts look pretty bad at that res.
My own page (no assertion as to design quality) uses a flexible main column and fixed sidebar; this was my approach on another site I run where I know I get people using a range of different base font sizes and screen sizes (because of complaints). It’s not perfect; if you increase your font size, the sidebar gets hinky. The CSS is a little hairy, and I’ve been thinking of redoing it using pseudo-tables to achieve the same effect.
I can see the argument against truly liquid layout–arbitrarily long lines are not readable, and a couple of my sites are “rigid.” But I always do scalable (defined in ems rather than px).
Matt: Agreed. I would call the 1976design page a “scalable fixed-width design”, or something similar.
As a 1600×1200 user, I can tell you I never browse fullscreen, so liquid layouts don’t bother me (who the hell browses fullscreen in 1600×1200+ anyway?!). However, I’m going to get back to fixed width layouts just because it brings me some kind of warm fuzzy feeling of knowing how my content will likely look like on the visitor’s screen. 😛
For what its worth i’m doing my best, with some company resistance, to convert our company’s site http://www.cegltd.com to a fleixble width design and i think it’s working ok so far. At least on some pages.
Um. Zeldman’s layout is fixed-width, so why is he complaining? Also, I believe in restricting line-length. It makes sense to me. Especially with the huge amounts of pixels wide one’s monitor can now be – I don’t want to read text that spans 14+ inches of monitor, thanks very much.
If you don’t want to read text 14″ wide, why is your browser that wide?
A somewhat snarky question, true, but this is something that really baffles me. The windows resize, and long lines are hard to read, so why do people persist in browsing the web in landscape mode? There’s reinforcement now from wide-format fixed width site designs, but still. I’ve never seen a fixed-width HTML layout that didn’t really honk me off, because they never let me work in windows as narrow as I prefer. Bleh.
(This very blog is an example: I have a scrollbar at the bottom of the window, and am having to dodge back and forth just to make sure I’ve read all the text of peoples’ comments. And yet this window seems medium-to-wide to me….)
Hope you killed the debt spam OK. I have really enjoyed this well informed discussion so far. But guys surely there needs to be a relationship between our design choices as to width and what we choose to put in it.Matts entry in the WP css comp has a navbar at 92 pix and a category name of 24 or so characters and it isn’t pretty. Likewise the block quotes at WP and elsewhere frequently burst the containers at even quite wide screen sizes even though there is space at the side. I reckon that deep down you fixed and central guys have a yearning for tables:-). I start top left and work down and across come what may. There may also be constraints if the site/client requires 3 columns. Fixed or Fluid. It’s going to run and run.
Replying over a year after this post was last commented on feels a bit weird, but I have an argument for fixed width designs that hasn’t been mentioned yet: line length. Some research has been done to determine the ideal length of a line to support readability. For text to be read pleasantly, a line should consist of approximately 12 words. Twelve. This site, albeit fixed, counts about twice that amount. Let alone a liquid design, that stretches text columns over the entire width the reader’s a screen.
I’m not saying everyone should start narrowing their text columns, because 12 words is ridiculously little, but keep in mind that readability plays a key role in a visitor’s decision to stick around or click away.
More information: http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm
Arguments aside, there are still liquid sites that work.