Design Tip: Be Careful of Variable Width Layouts
I was looking at a site the other day that is under development and I was just puzzled at the layout.
Articles and graphics in the center column were bleeding over into side columns. At first I thought it was just a Firefox thing, because a lot of hobbyists just go with Internet Explorer . . . but no, it looked the same way in IE7.
But then I thought, “Well, they’re still working on it.” A month later it still looks the same.
At this point, it’s bugging me so I looked at the style sheet. They’re using a variable width layout and a percentage of the browser window.
Now if you are just having text in all of your columns, variable width is fine. The problem with the site is that the center column has wide images that break the layout in lower screen resolutions.
Balancing Beauty and Usability
It used to be that you weren’t a web designer if you didn’t know how to create a flexible width layout. In the advent of CSS, there has been much angst over creating flexible three column layouts. So much so that the successful implementation has been labeled the “Holy Grail.”
Here’s my issue with flexible width layouts today, you’re designing to the web browser rather than designing to the web reader.
It was one thing when the most commonly used resolutions were 640×480 and 800×600. If you had a two column layout that stretched between the two resolutions, either one is going to be readable.
A two column layout stretched at even 1024×768 is not very readable for the visitor, and once you get higher than that . . . forget it.
It really doesn’t matter the size or resolution of browser someone is using, once the content area gets wider than a certain point it’s uncomfortable to read.
Think about a newspaper. Stories don’t go across the full width of the page, they are broken into columns to make it easier to read. The same thing with books. How wide is the average book page? Not very.
So What is the Answer?
This is a personal (or business by business) judgment call based on what type of content is going to on the site and how it is going to be used.
If I am creating an informational site for a business, I usually go with a two column, fixed at 765px to 785px. That is not designing so much for 800 x 600 as it is setting a width where neither column will be too wide for readability.
If it is a blog or a site that will have advertising, video or other types of media in the side bar, I give up on fitting it to a 800 x 600 resolution and design it for 1024×768.
When you are trying to incorporate 728×90 and 300 x 250 banner ads and 330 wide videos in a side bar, 800 x 600 just isn’t going to work.
According to Wikipedia, only 8% of internet browsers still use an 800 x 600 resolution and only 1% percent lower that that.
