Liquid vs. fixed-width layouts

As a website owner, you will eventually have to make an important decision about your site’s layout. Do you want for the layout to be liquid, so that it stretches to take up the entire width of the window? Or do you want for the layout to always be the same width, no matter how wide your browser window is?

You’d think it would be a simple decision, but it will have major impact over your site in the future. Let’s look at the pros and cons of each approach.

Liquid layouts: the user has control

According to research, most people prefer for the layouts of websites to take up their whole browser window. If someone invests in a nice wide screen monitor, they want to bask in their new investment by seeing their favorite websites taking up the whole screen. If you choose to have your layout be flexible, you’ll be a hero in that wide screen owner’s eyes. But this comes at a cost, and it definitely scares away most web designers.

With a liquid layout, you don’t have control over what your website will look like in all situations. One user’s monitor may be set at half the size of another user’s. This can cause frustration between you and your designer as you will be looking at things from 2 different monitor resolutions.

I recommend using a liquid layout if you can look at yourself in the mirror and believe that can let go of the small details. I’m not dissing you if you sweat the small stuff. I’m just saying that you should be honest with yourself and your style of management.

In all seriousness, I’d also recommend liquid layouts to organizations that don’t need as much design appeal. If you’re a B2B business, you probably don’t have to be as fashionable as MTV, Apple, or Abercrombie. Just sayin’.

Examples of sites that use liquid layouts: Amazon, Google, Digg

Fixed width layouts: the website owner has control

Now let’s say that you decide to use a fixed width layout instead. Now you literally can tell your designer to shift this element over to the left a little bit, and it will turn out exactly how you want it! Any visual effect you desire can be accomplished (within reason), and it turns out very predictably. It may even save some time for your designer because everything tends to be easier.

But now you’ve made some other trade-offs. First, the person with the wide screen monitor is a little disappointed with your site. Conversely, a person who hasn’t upgraded their computer in a few years is also disappointed because they have to scroll sideways to read the words on the right side of your page. It’s probably not going to be a deal breaker for them, but it is a small annoyance.

I think the fixed width approach is appropriate for certain situations. If your users are wowed by design appeal, you’re going to want to use a fixed width layout. It’s not impossible to cater to a design-savvy audience with a liquid layout, but it is much trickier. As you obsess over the small details of the “experience,” you’ll be able to sleep a little easier knowing that your columns are perfectly proportioned across the page.

Examples of sites that use fixed width layouts: eBay, Facebook, Yahoo!, Apple

So many trade-offs in web design

This is a pretty fundamental decision. But as you work with your designer, you’re going to learn that web design is pretty funky business. HTML doesn’t always work the way you’d like it to. You want to communicate every detail about your product, but people don’t like to read much from their computer screens.

Ultimately, each decision is a trade-off between your control over aesthetics vs. allowing for the user to have control over their experience. There are appropriate times to go with each choice.

If you work with a skilled professional, they will be able to educate you on the pros and cons of each situation. Keep coming back because I will be covering more issues like this one.