Should all sites be fluid?
~ 15 September 2006 ~
Yesterday’s post about optimizing sites for 1024px has stirred a considerable amount of controversy. Some cried foul assuming I was making the case for moving to 1024 without any regard to target audience. Others assumed I was ignoring the importance of fluid layouts. And others dugg it and buried my site for a few hours last night.
Here’s the deal, people:
- I’m a huge fan of fluid / liquid / elastic / call-it-whatever layouts. As proof of that, consider the case study site I did for CSS Mastery. Stretch it wide, narrow it down, watch it resize and stop around 800 on the low end and 1200 on the high end. The crux of my chapter in the book is fluidity, and that wasn’t just done for show.
- Having said that, fluid designs solve every layout problem much the same as computers make offices paperless i.e. they don’t. Having seen both sides of the coin — fixed-width layouts and fluid layouts (and everything in between) — I don’t buy the argument that every project must be fluid. Certainly it’s wise to consider their use for any project, but regrettably it’s not always practical.
- Is it possible to code a website “optimized for 1024x768” but that works “at any resolution, from 800x600 to 1280x1024 and beyond” as Jakob argues in a recent Alertbox issue? Of course it is. It’s merely a matter of including said considerations in your comp.
- Can you have your cake and eat it too? Yes. Earlier this year Richard Rutter coined the term “variable fixed width layout” to describe and link to techniques that offer fixed-width layouts with an element of fluidity.
- At the end of the day, it’s all about knowing your audience. The recommendation to optimize sites for 1024 with accommodations for 800 to 1280+ is a sweeping generalization; if your project demands otherwise, don’t be swept away.
35 Comments
Veer: Visual Elements for Creatives.Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
First off, its a shame that posts that make it to digg always have to have a second post to really explain themselves. This is no offense to you, Digg.com is just getting really immature in its audience. I have had to do the same thing in the past. They are just looking for something to start an e-battle without reading the actual articles or doing their research.
Now - not to re-iterate what Jeff already said, but I work for a Book Publisher and we run into the same exact things - we get all of our images/advertisements in pixels. Many times marketing will actually construct the ads, and then upload them into a promo management console - I never actually touch them. They don’t understand web layouts, at all, and they just make the images they are told. So - yes, it COULD be done - but it would take much more time/money to accomplish it with our setting. As you said, it depends on your audience and on your goals.
Personally, I am in agreement with you. I enjoyed your case study in CSS Mastery as well - it gave light to several different methods and approaches. I would love to start using them, It just wouldn’t work for our company goals right now. Our current site is just a shade over 800 pixels wide - so we barely pushed the envelope that way. Our current analytics show that we have 53% at 1024X768, and 18% at 800X600. So I think we are in a good place at this point.
At any rate, there are many methods out there with CSS that allow for so much flexibility in layouts. Richard Rutter’s is an excellent example of this.
I’ve always considered there to be a couple of reasons why people don’t dig a fixed-width site at 1024: some people still work at an 800 x 600 res, and some people work at at 1024 res or higher, but don’t browse full screen.
In much the same way there was a difficult limbo when people were jumping from 640 wide screens to 800, we may be in a limbo now from 800 to 1024. Plus, a reason that people may not browse at 1024 or higher could be that many sites don’t have the content to fill that space. Meaning, why have your browser window at its maximum width when you don’t need to; you could use that space for other things. But, as the content of more and more sites start to support 1024 wide screens, either through fixed-wdith or fluid/elastic, people may start browsing with a larger portion of the screen devoted to their browser. The questions may drift more towards “what are you doing with that width” rather than “should your site be that wide”.
I’m no trying to make the case for or against fixed or fluid, just trying to understand the problem a bit more.
“At the end of the day it’s all about knowing your audience.”
I might add, it’s all about knowing what your audience wants do with your website.
My personal feeling is that web applications and reasearch tools work better in liquid layouts, I also think that in cases where web sites have content that is meant to be “read”, there are instances where the designer can control that experience better with a fixed layout.
Now - the worst (and best) part of a fixed layout is that you’ve taken the ability away from the end user to fix (or make worse) a bad design by resizing their browser.
So at the end of the day for every project you might ask yourself: Do I want and need the user to control that part of the experience? Or, does the designer need to control that part of the experience?
Well said. Much of that can be applied to a number of absolutes folks seek to impose on web design, but the bottom line is that there are several things people need to accept:
1) The web is not a rigid medium, thus beauty AND frustration of not be able to force designers to do one thing.
2) Web technology is still in its toddler phase as far as I’m concerned… Better than pre-bubble, still not mature.
3) It is always about the target audience.
I don’t think there is any situation where you can say “all sites should be XXXX.”
Good insight, John.
I don’t think there is any situation where you can say “all sites should be XXXX.
Well, except for “All websites should be pink.” But that’s a given. Forgive me for stating the obvious.
Regardless of what resolution screen is being used, How many people actually browse the web with a less than maximized window?
From a designers perspective, I’ve always thought the reason most of us aren’t in favour of flexible widths is they’re more difficult to design when composition relies on specific placement. White space isn’t empty space. Right?
Like Jason says though, maybe the question should be what are ‘you doing with that width?’ rather than ‘why that width?’
In terms of grid system design, flexible designs (and when I say that I mean just, well, stretchy) are more closely related to grid system theory, but only if ems are used as the unit of measurement.
In print, there is (or should be) a close relationship between the Measure and the type size (for optimum legibility). This can be done in flexible layouts with ems. The challenge comes when resizing the ‘canvas’. The grid should adapt to those changes rather than just stretch. Or maybe the typography should increase in size to maintain the Measure/type size relationship? There’s definately work to be done there…
Recipe Zaar!!!
I like what Dan Cederholm has done. Offering a semi-fluid default layout with a fixed-width option allows users to have their cake and eat it too.
Mark, we really need a book on grids from you, you know…
Cameron. Watch this space…
With baited breath I await :)
I think a fairly sizable obstacle to seeing more fluid width sites is both the designer’s and the client’s struggle to relinquish some control of the design. Many clients (and designers) want the site to look just so on their screen, and that often dictates the design work. I’ve heard of site redesigns that came about because the CEO got a bigger monitor and thought the company site looked bad on his new screen. Obviously that’s not every client, but form generally seems to be a higher priority than function. So, people pick the ‘safest’ form. Like Jason said, we’re slowly migrating toward the newest ‘safest’ form.
@Pete, That’s difficult to see without actually sitting down with a huge sample of people.
FTR, I browse without a fully maximised browser because there is no need for it be maximised.
I have Dreamweaver maximised because then I can see more (and more efficiently access more) of the code. I have Excel maximised because I can see more cells. I maximise Outlook, so I can see more of my folders and messages. I maximise Track-It and QueryBrowser so I can view more records.
I do not maximise Word because I only need it as wide as the page. I do not maximise Acrobat because I only need it as wide as the page (or rather as wide as the page at a comfortable zoom). I do not maximise Google Talk because I only need it large enough to see what I am writing and the last few lines of the conversation.
And so on.
If the majority of websites are designed to enlist a scrollbar on my browser at my resolution, then I am going to have to start using custom stylesheets or turn off styles.
@Pete (way up there),
I agree with Kim. I run many of my applications on full screen, but I frequently close down my browser to only the size it needs to be for me to see the content of a website. Another possibility, that I haven’t seen addressed yet, is sometimes I do not want to see certain content, such as animated ads, so I squeeze down the width of my browser. I usually read the Guardian Unlimited at just over 500px.
OT:
funny to see you working on RZ, I just finished a contract doing HTML for allrecipes’ new html. Wasn’t involved in the design, but certainly have an appreciation for what you’re going through!
I’m a big fan of layouts which adapt to window size, by whatever means. I think that approach is more appropriate to the web as a medium, and is the only one the really takes advantage of the web’s properties. One of the prime benefits of the web over print as a medium is the ability for the end user - the reader/customer - to tailor the medium to their needs (text size, language, ‘page’ size, etc), or at the very least not have the medium dictated to to them as is inherent in print. Layouts which adapt to window size are part of this advantage. [Do understand I’m not knocking print here - that would be ridiculous, I’m merely stating the oft-quoted benefits of having information online].
That said, the content - which is always of prime importance - may dictate that a flexible layout is sacrificed (and it is a sacrifice) for a fixed one. The only kind of content that can force that issue should itself be fixed in nature - images, movies, and other non-textual content. But even with these contraining types of content, it’s perfectly possible for a layout to have to have fixed elements within a flexible design.
I also disagree with Mark when he says:
In terms of grid system design, flexible designs […] are more closely related to grid system theory, but only if ems are used as the unit of measurement.
While it’s true that grids are designed to give the optimum measure of text, they are also designed to give elements on the page relative importance and space, which is why grids laid out in percentages can still work well. Absolutely, there are well known ideal widths for lines of text, but I do believe designers can be afforded some flexibility in this. Again, it’s down to designing for the most representative window size, and allowing the layout to adapt to inevitable changes in its environment. A 25% swing either way of 66 characters per line is not going to significantly harm the readability of the page.
These are all very good ideas. Way to stir healthy discussion, Cameron.
Whenever I approach a new design and make the decision whether to go fixed or liquid, I tend to choose fixed for the simple purpose of controlling the design. Knowing what the user will see regardless of resolution is reassuring.
When creating a fixed width design it would seem logical that the first step would be to determine the optimum measure of text (especially if the site is heavy with the written word.) It seems that many folks automatically adopt the maximum width allowable by screen resolution or begin by implementing an easily divisible grid system. Perhaps both the grid & width should be determined by the optimum measure? Which may also be determined by typeface choice.
Arial / 30em / 64 Character per line.
Verdana / 35em / 64 Character per line.
Times / 27em / 66 Character per line.
Georgia / 33em / 67 Character per line.
Lucida / 31em / 65 Character per line.
Perhaps one example of what Jason meant when he wrote “what are you doing with that width”?
“I’m a huge fan of fluid / liquid / elastic / call-it-whatever layouts.”
I have always referred to fluid designs as making a website “squishy”. Not the most professional sounding term, but it gets the point across.
I have been experimenting with fluid elastic designs. Build it in ems (including images) and scale to fit (via font-size and a little bit of javascript) to the browser window width. You need to use flash instead of gifs, (great for small file sizes and smooth vector graphics) and big jpegs to scale (not so great for file sizes).
It works well for browser widths 700px to 1400px and 150 or so pixels per inch WUXGA and WSXGA laptops. However I have been getting complaints that the font size is too big. It appears a number of people do browse maximised on large screems, even if most sites either occupy a small section of screen real estate or are so stretched to make it diificult to read (and the ones that don’t freak them out ;-)
So you can not please all of the people with one solution, even if your content does allow you to scale.
I just wanted to clarify what I was talking about with reference to grid systems and the measure.
Percentages can work when defining a grid system. Of course there is room for movement 25% on the measure either way. I don’t think this will effect legibility too much, especially when you combine it with min-width and max-width. However, there is no relationship between the unit of measurement and the type. That is the beauty of using ems - there is a relationship between the grid system and the typography contained within.
That relationship simply doesn’t exist with percentage based layouts.
I find that the more fixed width elements you include in a design - photos, illustrations, diagrams, video clips, the more the overall design needs to be fixed width. I have tried allowing these elements to scale using techniques discussed by Richard Rutter on Clagnut but scaling up or down non vector-based images looks really ugly and actually hampers usability. So they way i work it is if the site heavily uses fixed-width content, then the overall layout will be fixed. If the site is mostly text with the odd fixed width piece of content then i’ll use stretchy layouts.
I recently moved to 1024 and I don’t have a problem. That’s my choice and at this stage I’m not providing another option.
But providing you use CSS layout it isn’t a huge ballache to create an 800 x 600 stylesheet and either detect screen resolution using javascript or offer a stylesheet switcher.
Designers can pontificate all we like but sooner or later we should realise we can and should give users more choice to users on how they see layout.
Great articles Cameron. Your two articles last week got me wondering about the size of design and font use in general. I’m curious to your insights on the matter.
Can you clarify, Daniel?
I say ALL TABLES ALL THE TIME!
A good designer solves problems. If the solution to the problem is fluid, do fluid. If it is fixed, make it fixed. End of conversation.
oh, the link is faulty.
heres the clarification
cheers!
providing you use CSS layout it isn’t a huge ballache to create an 800 x 600 stylesheet and either detect screen resolution using javascript or offer a stylesheet switcher.
That’s all well and good, but it requires that the design is capable of scaling from 1024 down to 800. Sometimes that simply isn’t always possible, especially when a designer is taking advantage of higher resoutions to present a large amount of information on a page. In may be that a different design (different layout or grid scheme) would be required for the smaller resolution.
Most fluid sites exceed the ideal line width when sized on anything above 1024 px. Meaning everyone who is browsing at 1024+ resolution has to resize their browser just to be able to read the content quickly. Fixed layouts allow for much more precise control over optimum line widths. It’s only 11 words people.. 11 words per line. I HATE all the liquid layouts which stretch to 15+ words per line when sized at 1024+. Try reading that for any length of time and get ready for tired eyes or a neck cramp!!!! This site is fixed and VERY easy to read quickly at high resolution. If you’re going to go liquid, you need to use multiple columns for regular text - not just one column for text content and another for navigation / call to action. Most fluid sites I come upon would be easier to read in a fixed format. Why do you need a liquid layout for a single column of text if 11 word line widths are optimum? What are you doing with all that extra space?
Just a quick note to point out that although the terms seem to be increasingly used interchangeably, there’s a difference between liquid and elastic - see alistapart.com/articles/elastic/
Thanks, Patrick. I thought someone might mention that at some point…
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
Linkage:
Follow me: 
1 Jeff Croft ~ 15 September 2006 at 08:30 AM
I’m also a fan of liquid designs, but there’s no question that are more difficult to do well and do right. As someone who spends a lot of time designing newspaper sites, I have to deal with a lot of images and ads, which are always going to be sized in pixels. It becomes difficult to create and maintain a precise grid that works throughout the “stretchable range” when you are combining fluid elements (like text) with static, pixel-based ones (like images and ads).
Don’t get me wrong — it can be done .You can always show or hide more of the image or background (like you did with the case study site). You can even size your images in ems or similar to let them flex with your text. My point is simply that doing this sort of thing, and doing it well, is often time a lot more work than a fixed pixel-width layout. Your mileage may vary, but In my experience, the benefits usually do not outweigh the costs.
For the record, the media company I work for moved about eight months ago to designing wider sites optimized for 1024px screens. We still average a little over 10% visitors using 800x600, though. My thinking is that these people have to be used to seeing that scrollbar by now. All of the major media outlets (NYTimes, ESPN, Washington Post, CNN, etc.) have gone wider. I just suspect these folks running 800x600 screens aren’t nearly as offended by seeing that horizontal scrollbar as they once were, because they see it all the time. They’re used to it, I imagine.