Rehashing the Fixed vs. Liquid Width Debate
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.
[Source: Mike Madaio - blog.sessions.edu - Sept 2007]
Our RSS feed
