UX Rule: Fixed Content Width

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.

The Exception

Like all of my other UX rules, this rule is hard and fast; of course there are going to be exceptions. Specifically, sites which require the display of a large table of data will make you bust out a fluid width, since sometimes there is simply no way to contain the information within a fixed width layout. If you do get into this situation, I suggest an alternate layout that features a header that is shared with the standard, fixed width layout, and a fluid width section below it. This will accommodate your data, keep a consistent design, and let your users know that this is the exception rather than the rule.



Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.