Rehashing the Fixed vs. Liquid Width Debate
Author of this post: Mike Madaio | About Blog Authors »
While browsing through the new Dell catalog the other day, I couldn’t help but notice that ALL of the featured computers (desktops and notebooks) came with widescreen monitors. This has been the case with notebooks for some time now, but for desktops it is relatively new phenomenon (HP and Gateway still offer standard monitors on their cheaper units). What this means to designers is that the 1024×768 resolution, which currently the most common resolution for internet users, is already on its way out, giving way to 1280×800 and larger sizes featured by these widescreen monitors.
That being said, now seems like a good time to revisit the common usability debate about whether a site should be fixed width or liquid width. I don’t want to speak with too many generalizations, but on the whole, usability folks and IAs tend to favor sites that take up all the screen real estate that is available, while designers prefer to create fixed pages that allow for complete control of presentation (or as complete as is possible on the web). The correct answer, unfortunately, is somewhat gray.
On a theoretical level, liquid designs are far superior. Simply put, designs that are fixed, especially the many online that are fixed at 800×600, waste huge amounts of space on larger monitors. This space could be used for additional content, supporting information or additional promotional space. Think about it this way — if you bought a brand new 50-inch TV, then found out that your favorite show was only available in 27-inch resolution, that would be pretty darn disappointing, wouldn’t it? It’s not exactly the same thing, obviously, but this is just an example to show how the wasted space online can and should be used in a better way.
Some folks argue that stretching a site to some of the new monitor sizes, especially on widescreen monitors, actually makes sites harder to read. It has been suggested that line lengths above 75-100 characters per line actually decrease reading efficiency in most people, so pushing text all the way across a 1600 pixel-width monitor may not be the best use of screen real estate.
In addition, many designers prefer fixed width designs because they allow for more specific control elements of element placement. When a design shifts with the screen width, elements can move around and the original design can be compromised.
There’s also the operational cost to consider — assuming the design features any amount of imagery, it simply takes more time to design for liquid width, because multiple situations need to be accounted for and tested. In most money-making environments today, the benefit from creating a liquid site may not be worth the operational cost for the team doing the designing.
The bottom line here is that different situations call for different answers to this debate. In contrast to all of this, however, I believe that the answer lies with a totally different solution.
About two years ago, I wrote an article that discussed the proliferation of widescreen monitors and how they will affect our designs going forward. In this article, I proposed a method, using JavaScript and CSS, that allows us to create an online document that combines the best of both design styles; by moving fixed width containers of content around on the screen (via CSS positioning), we are able to fill the screen while still retaining the design control that fixed width offers.
While this method has yet to become widely used, I recently noticed a major website — AOL.com — using a similar tactic on their newly redesigned homepage. I have created a screen capture video to demonstrate this technology.
Having trouble viewing the video, click here
Will this method work for every site? Probably not. But with the widescreen monitor quickly approaching, not to mention the proliferation of the mobile internet browser (another topic for another time, perhaps), we need to start coming up with design solutions that present layouts that are optimized for the different platforms of our users.
September 21st, 2007 at 7:57 am
great article!
I think alot of it depends on the actual website, as each website is different.
You can use min-width with divs, p tags etc and while it does not work in IE (you can use a hack) it does mean you do not have to read a sentence over 1200px.
September 21st, 2007 at 1:08 pm
A pure liquid layout can cause almost as much usability problems as a fixed-width layout. As with most other things in life, the ideal is often somewhere in the middle, not at the extremes.
A constrained liquid/elastic hybrid is what I’ve found works best for most content-rich sites. A navigation column and/or sidebar that is elastic (”fixed” width specified in em) plus a liquid main content column. Then you assign a max-width to curb the problems with overly long lines of text, and perhaps a min-width to prevent the content column from collapsing in extremely narrow viewports.
The min-width and max-width properties aren’t supported in IE6 and older, but this behaviour can degrade gracefully. Specify an em-based width in an IE style sheet, and use Microsoft’s proprietary expression() syntax to emulate min-width and max-width for the majority that has client-side scripting enabled.
Of course there are sites that will work best with a rigid fixed-width layout and sites that will work best in a pure liquid layout, but those are quite rare.