Best Practices

Update: Since writing this article, I implemented a redesign that uses a liquid layout. Let me say that I still agree with all of these points in this article. For a better understanding of why I chose to use a liquid layout, see the post Does This WordPress Theme Make My Hips Look Fat?

This article assumes that you are already at least passingly familiar with the age old web design debate of liquid versus fixed layouts. Let me start by saying what follows is not an objective analysis of the two alternatives. Sure, I’ll discuss some of the pros and cons, but I’m not making any effort to show a balanced perspective. I don’t particularly like liquid layouts. I don’t like making them, and with very few exceptions I don’t like running across them in my day-to-day web browsing. Unlike some fixed layout evangelists, though, my objections don’t have anything to do with different screen resolutions compromising my artistic vision of a site. I have no problem with putting control in the hands of the users. If the users don’t have the design education to recognize why visiting my site is giving them a headache and what they can do to fix it, though, then I do have a problem.

Why the Bias?

I take in a lot of new information via the Internet. Based on what I’ve read and my personal experience, reading text from a computer monitor is significantly more taxing on the eyes than reading the printed page. Now I suppose I could print out every web page that I wanted to read, but I’m not sure they’re cutting down trees fast enough to accommodate me. That means I’m reading a lot of onscreen text, and anything that can be done to make that process easier on my peepers is welcome. (Wow. I haven’t used the word peepers in years.)

What makes reading from a monitor easier? Thoughtful typography goes a long way. Most typographic elements are equally at home in a fixed or liquid layout, but I’m going to talk about line length. The reason newspapers and magazines display text in multiple columns per page is because it is soooo much easier for the eye to take in. The typical liquid layout web page lets text lines span all the way across your monitor. As an example let’s look at the Editorial Reviews page for The Da Vinci Code on Amazon.com. By the time my eyes travel from the end of one line to the beginning of the next, I’ve forgotten what the sentence was talking about.

With fixed layouts, line length isn’t going to expand no matter what your screen resolution is set at. I should be careful here that I don’t imply a fixed layout is the panacea for all line length problems. It is possible to use a fixed layout and still have out of control line lengths. (They’ll just be out of control consistently across all resolutions.) It is also possible to design a liquid layout with easily readable line lengths. (Man, it is rare, though.)

A Liquid Defense That Doesn’t Hold Water

One of the defenses of liquid layouts is that they maximize use of above-the-fold screen real estate. Well. I suppose they maximize the quantity of screen real estate that gets used. I’m not willing to concede that cramming the entire screen full of content necessarily increases your chances of capturing your visitor’s interest. One of the first things every designer learns is that whitespace can be your friend. (Okay, now I’ve got that snarky comment out of my system…)

Yes, a large, isolated chunk of unused whitespace does seem a little wasteful. By all means use the space, but the answer is not to let a giant column of text get wider and wider to fill up the screen. If you are willing to take the time to craft a more thoughtful solution that will add to the visual experience (and not force me to hold a ruler up to the computer screen as I’m reading) than I salute and encourage your endeavor.

So What Are the Other Options?

The simplest is to use a background pattern/image that reinforces your fixed width content. The classic example is to extend the horizontal color segmentations of the page out infinitely in both directions. (This occurs all over the web, but here’s an example.) Some people maintain this is a very weak use of the space, and from a content perspective I have to agree. From a presentation perspective, though, I think it strengthens the design elements. I’m not your design professor, so feel free to contest that view.

If you want to put that space to better use to display content, you could always create an extra column. I’ll reference a site that I visit almost daily, Chicago Bears. If you view this site at 800×600, you see a normal, complete site. Unless you look at the horizontal scroll bar at the bottom of your browser window, you probably won’t even realize there’s more content over to the right. If your screen resolution is a bit bigger, instead of empty space you see extra content. The downside to the extra column solution is that you can’t use it for any vital information or features, since low-res users may not ever lay eyes on it. Update: The Bears have changed their layout since I wrote this post, but you can see an example of the same idea at the Indianapolis Colts site.

Still not satisfied? How would you feel about a secret tool that lets you present different layouts depending on your visitor’s screen resolution? Wouldn’t you be excited? Other web designers don’t want you to know about this extraordinary tool! ORDER TODAY, and I’ll throw in this deluxe set of knives… Actually it’s not really a secret, and it doesn’t cost a dime. I’ve seen a few different versions of it, but the easiest one for me to wrap my mind around is Cameron Adams’. It does require the use of Javascript, but Cameron’s example is a great demonstration of how to handle line lengths on liquid layouts. (Is it hypocrtical of me to recommend a solution that uses liquid layouts? Yes. Yes, it is. At least Cameron mitigates the damage they can cause.)

These are just a few formulaic approaches to getting the most out of the extra space above the fold. If you’ve come up with other solutions, feel free to post a comment about them below.

A Final Note

Although I haven’t heard it often, I have heard the argument that a fixed layout is going to look terrible to anyone viewing your site on a mobile device. The argument is presented as if simply using a liquid layout is going to suddenly make your design equally suitable for a monitor or a cell phone. If you expect a reasonable amount of traffic from visitors using mobile devices, you owe it to your client to create a separate style sheet. There are several CSS methods for pointing your visitor to different style sheets based on the media they are using. I won’t get into the pros and cons of each here, but you can test them out by pointing your cell phone’s browser to this handheld media type test.

Okay, Seriously the Final Note

This could change any time Web Style Guide decides to do a redesign, but the irony of the following page kills me. Read the first sentence of this discussion of line length.