UX Rule: Fixed Content Width
- October 7, 2009 1:56 PM
- User Interface Design
- Comments (0)
When you're laying out a site, one of the most basic questions you can ask is "Do we make this liquid or fixed width?" Do you let your site fill the user's browser, or do you hold it to a single fixed width? It's a good question, but let me make a suggestion, nay, let me suggestion a rule: Always use a fixed width for your content.
It's been so long since I did a "UX Rule" entry that I've gotten what number I'm on, so I'm just throwing this one out there. Always put your site content into fixed width columns. It's a rule that I've relied on, and I've seen those that ignored it cause themselves a lot of pain trying to figure out how to manage the complexities that come out of a fluid design.
The Reason
You should limit your site to a fixed width for one reason: readability. The ability to easily read and understand a website is probably the key to almost all UI design, and a fluid width layout can really set you back in this department. While your initial thought might be "But you've got more space, so the user can see more stuff", this extra space really doesn't help your users for a number of reasons.
First, many studies have shown that there is an "ideal" number of words per line that people find comfortable to read (I think it was 27 words, but I'm having trouble finding the supporting link). What this means is that if you have a column with variable width, at any given time you text might be much shorter or longer than people like to read, which will cause users to just skip reading the text entirely.
Secondly, having variable width columns can really ruin attempts at good typography. When laying out your text, you'll want to avoid jagged ends to your text, lines with a single word on them, rivers ("lines" inside text formed by the spaces between words), and any of a dozen things that can ruin your typography. Making your columns fluid can destroy a typographic design. Another thing to consider is that as the height and width of your text blocks changes, you're going to have changes in the ratio of white-space to text within specific areas of your site, which might serve to confuse the visual design, or even create or destroy the illusion of association or separation caused by placing elements close together or leaving white space between them. In short, clear designs that worked at 1024px of width probably won't be as easy to understand at 800px or 1400px.
The issue of white space plays into my last point as well: what do you do with all of that extra space? Either your content isn't going be dense enough to require all the extra room that you'll get large pockets of white space on the page, or your content will be so dense that it over whelms users on smaller screens or will still be a visual mess even if you have given it 1600 pixels of room in which to frolic.
…
Ok, so I lied, there is one other reason you should limit the width besides readability: complexity. As your site grows, you're going to find that you have little sections and areas inside the content space that aren't the full width of the site, like expandable areas, content portlets, widgits, images, and what have you. When your layout is liquid, you have to really think about the width of these items; if you make them fixed width, a user on a large screen might think that they are too small. If you make them liquid too, then suddenly they might be much too large for their content (and you get all of the issues I discussed above). Keeping things fixed means that everything inside of it can stay fixed as well, and that really simplifies things.
Which Width
You might start to ask yourself, "But which width do I use?" and I can't help you on that one. While I think that while you should always use a fixed width for your content, that width might be 800px, 960px, or 1600px; whatever makes sense for your application and your users is the right width. If you're maintaining a simple site for users that are on old computers, stick to 800px. If you're a cutting edge website where you're sure everyone hitting your site has a 22 inch widescreen monitor, go ahead and target 1200+ pixels. It all depends on your users.
