Recently, someone was kindly complimenting the layout of this site and commented that, had it been his site, he would have gone with a fixed-width layout. For those of you who don't design websites for a living, a fixed-width site is one that doesn't stretch to fit your browser window. Usually designers set the width of the site somewhere in the ballpark of 770 pixels wide and it stays that way no matter how wide or narrow your window is. Many sites, including many of the biggies like Salon and CNET, have fixed-width sites.
So, why would a site like this one benefit from being fixed-width? I understand some of the benefits of a fixed-width site:
- The primary benefit I can see would be that I could control to some extent the line-length of the text in posts. Studies have concluded that a line-length of something like 10-12 words is ideal for readers and I could set the width of the left column of my site to approximate that.
- Designing with a fixed-width would be easier for creating graphics and managing new content. Because I'd know the exact width of the space where a graphic or a piece of content is going, I could make my graphics and text fit perfectly and make the images extend to the sides of a column like you would doing bleed stuff in print work.
- A fixed-width site never 'breaks' apart due to extreme stretching. With a flexible site, if you stretch your browser window ridiculously small, elements of the layout will jump around or overlap each other. Good new browsers, like Mozilla and Safari, allow you to set a minimum width, but your flexible site will 'break' in Internet Explorer. This never happens to a fixed-width site.
Almost all of the sites we develop at silverorange have flexible layouts.¹ With a flexible-width layout I have a number of distinct advantages:
- The site presents more content to people because a flexible-width site stretches to maximize screen real estate. If people stretch their browsers quite large, the content stretches to fit and more content is available on the screen at once.
- In term of readability, I can control the line-length to some extent using percentage widths. On this site, both the left and right columns are set with percentages, so that as the page gets wider, each one stretches a bit. Even at a large window size (my laptop stretches up to 1400 pixels wide) the line-length isn't unreadable. Maximized, I still only get about 16-20 words per line: longer than the ideal length, but not too significantly.
- A flexible width makes the site more readable for everyone. The layout of this site currently scales for people with their monitors set to a resolution of 640x480 without horizontal scrolling. I know most people are have monitors that are at least 800x600, but why not make the site more accessible people for those unfortunate souls? Also, many people, myself included, never maximize their browsers and browse just under 800x600 in a floating window.
- Flexible sites look better. I know this one is largely subjective, but a site like this fills the window nicely, has consistent margins around the content, and allows for nice large images if done correctly. As well, the 'breaking' issue is only really relevant when someone reduces their browser window to an extreme size and then, only in browsers that don't understand the min-width attribute.
- Although some may argue that it's easier to design for a fixed-width site over the long-term, with proper care, flexible-width sites can be properly up-kept even on a large scale. Sites such as Amazon.com use flexible-width sites to good effect even with incredible quantity and diversity of content.
So, tell me what am I missing here? Why would someone take this site and make it fixed-width? And, just to make it clear, I'm not at all complaining about the person's comment. I'm truly interested to hear your opinions on this.
¹ Notably, the Veterans Affairs Canada and Starmaker websites are both fixed-width. The first adheres to strict guidelines set out by the Government of Canada and the second has many fixed-width forms and thus made more sense to limit the width.
Comments
Peter Rukavina - November 26, 2003 4:12 PM
The obvious answer here is that, coming from the print world, designers want to be able to control the "page size." Design for the screen is <I>not</I> the same as design for the page, but if your head is well-tuned towards having a concrete edge to deal with, it's sometimes hard to deal with aery notions of infinite boundaries. This isn't an argument against floaty designs, simply an explanation as to why they're not as common as they might be. We all spent a lot of time trying to get the Letraset to stay down; being able to conceive of it floating around seems counter-intuitive.
ben - November 26, 2003 4:41 PM
i may revise this when i have more time to think.
thank you for giving such a thoughtful response to my comment.
i was actually hoping to to hear what went into the decision.
i should have stated before that my preference for fixed-width is largely an asthetic one.
although i am a fan of shorter line lengths for legibility - in this case it's much more about the look.
long lines of text seem, to me, to strengthen the "horizontality" of the text, like a horizontal striped shirt on an already, um...<i>wide</i> person.
that said, i can completely understand the decision for flexible layouts. i appreciate the dynamic nature of the web and not forcing webpages to mirror print layouts. it's a tough call.
addendum:
while previewing this i just saw peter's comment.
i'm actually not coming from the print world - i somehow managed to jump straight into the web, and for a long time i was in the flexible camp, but i just grew to appreciate the look of fixed columns of text. embarrassingly, it was a snide comment jason kottke made about the fact that even ancient egyptian scroll writers knew the importance of fixed widths, or something like that, that made me reappraise my view and really look at text on the web.
Will Robertson - November 26, 2003 10:18 PM
How about printing?
I don't know specifics, but I imagine it would be more reliable printing from a fixed-width website than a flexible one.
Steven Garrity - November 26, 2003 10:37 PM
Will, regarding how fixed-width vs. flexible width layouts print, I think the contrary is true. As many of the units used to define the size of type on the screen (pixels, ems, CSS font size keywords, etc.) do no have print equivalents – the size of the text to be printed may vary depending on the browser implementation.
A fixed-width layout may end up using only ½ or ¾ of the page, or worse-still, it may end up being too wide for the printed page, requiring scaling or clipping part of the content. That said, most typical 600~800 px-wide sites do print relatively well.
A variable width page, on the other hand, can flex comfortably to the size of the printed page, regardless on font-size, much as it does with the window/screen size.
This is assuming that the same style sheet is being used to print as is used to present on the screen. With medium-specific style sheets, it is possible to use techniques that are intended for the screen (pixels, etc.) on screen, and techniques that are intended for print when printing. So, fixed-width or variable-width could be used in either screen, print, both, or neither.
Peter Rukavina - November 26, 2003 11:55 PM
Steven is right on all points except one: the <B>em</B> has a long and colourful history in the print world:
<BLOCKQUOTE>It must be remembered that any measurement given in ems is not by itself a fixed size, but is meaningful only in relation to the size of type in use; 'one em indent' in 8-pt type is 8 points, but in 10-pt is 10 points. In most type families the em space is designed as a square of the point size. Therefore, units are relative, the larger the point size being used, the larger each of the units will be, but the number of units will not change.
</BLOCKQUOTE>
The beauty of the <B>em</B> is that, because it is a relative unit, related to the size of the type, it can be used to scale horizontal space appropriately. It serves this purpose both in print, and in CSS.
Indeed CSS also supports the use of the print world's <B>pt</B> and <B>pc</B>, for <I>point</I> and <I>pica</I> respectively, as units of measure.
Here, for example, is a piece of 24 point type, with 1 pica's worth of top and bottom padding:
<DIV style="font-weight: normal; padding: 1pc 0 1pc 0; text-align: center; font-size:24pt; font-family: times-roman;">Ép</DIV>
And, indeed, the distance from the top of the <B>É</B> to the bottom of the <B>p</B>, when I print this page out, is just a titch over 24 points (aka 2 picas) and there's just a titch over 1 pica's worth of spacing above and below. Of course this depends on a lot of assumptions and/or coincidences about my browser, my operating system and my printer. But it <I>did</I> work out in this case.
Which is all really to say that the print world has taken hundreds of years to work out many of the issues that the web world is now facing, albeit with a new medium that has infinity working both for and against it. While it's important that we innovate and expand our palette, it's equally important to build on this base where it makes sense.
Everything, you see, is reinvented.
Mella - November 27, 2003 2:09 PM
I like the idea of flexible width in theory, but like any other design technique, it is too often abused...
"The site presents more content to people because a flexible-width site stretches to maximize screen real estate. If people stretch their browsers quite large, the content stretches to fit and more content is available on the screen at once."
Having more content on the screen at once is not necessarily a good thing. A point that I value as much as the fact that fixed-width can guarantee in most cases that all content will be viewable at lower resolutions is that it will also be properly viewable at *high* resolutions. Granted, here at work I'm viewing this site on a 22-inch monitor at 1280 x 1024 points, but even at home at 1152 x 864, I find it awkward having to repeatedly scan across almost the full length of the monitor to see everything. This can be especially distracting when the content could easily be confined within a smaller area and does not require that much real estate.
I would argue that if flexible width seems the way to go, at least leave a *sizeable* margin of space on each side so that the page projects what I would call 'a subliminal concept of comfortable containment.'
Daniel Burka - November 27, 2003 5:41 PM
Thanks for all the great thoughts. Mella, you're totally correct when you say that <blockquote>Having more content on the screen at once is not necessarily a good thing.</blockquote> However, sometimes it's great and in many ways a flexible width site is a trade-off. For instance, on the Sloan site you linked to, the index for the photo gallery uses some style sheet stuff to tile the categories. It's really nice that if you're browsing at a high resolution, you're presented with more of the categories without scrolling. The width of the Upcoming Shows (when there are shows) is also nice in a balance sense and is easier to read than if it was compressed to fit a smaller space. Actually, that page is a great example of both the pros and cons of flexible width. The top image is awkward because of the lack of text to the left, but the shows list is easier to read because of the variable width. I guess it's really all about the trade-offs.</p>
Steven Garrity - November 30, 2003 9:48 AM
While I agree with Daniel's original post here, I appreciate this well thought-out rebuttal at linuxart.com.
Al O'Neill - November 30, 2003 2:23 PM
Reading these comments is the most thought I think I've ever given to how text is formatted for the Web.
For me I find the idea of fixed width pages anathema to the original philosophy of HTML itself, which was as a content markup language, not as a style / presentation language.
Originally, HTML was made up of tags like 'h1', 'h2', 'h3', 'address', 'code', 'ol', 'ul', 'dl', and many others that help to say what _kind_ of information is contained within these particular tags. As graphical browsers and the commercial web grew the desire to tinker with how a user would see information on one's site caused HTML to morph into an aesthetic language.
The irony, of course, is the rise of the new buzzword 'semantic web', where (*gasp*) they want to be able to glean content and context from web pages. Back to square one.
Keeping in mind this is from someone who still fires up Lynx from a remote shell prompt now and then. But I still find it strange that it's actually _possible_ to control the width of a page, let alone why one would want to do it. Think of all the wasted space. I must have made my browser window that size for a reason :)