3 Columns Done Wrong

This layout consists of a main content area bordered on either side by narrow sidebar columns. Despite the inherent problems with this sort of layout, it caught on fast and remains a popular choice for blogs and online retail. It also became and remains quite popular as a default layout for many content management systems.

Design fundamentals reveal this layout to be deficient in several ways. Due either to a lack of designer or owner discrimination or understanding, or perhaps simply due to laziness, this layout remains common even today.

Sites Using Centered 3-Column Layout

* Apple Store
* Amazon.com
* Many content management systems’ default themes

So what are the flaws ? In order to better understand them, it is helpful to first examine some of the supposed benefits to the centered 3-column layout.

Supposed Pros

* Centers the content, “making it the focus”
* Results in a “pleasing” symmetrical design
* Allows for twice as much ancillary content and cross-promotion on the page at
any given horizontal level
* Mostly it just allows people who don’t understand design and who cannot craft a
good content hierarchy to have places to put all sorts of extra info on a page

But these supposed benefits are not often beneficial at all. The reasoning behind them is based on a certain ignorance of design and usability. When you take design fundamentals and the corresponding facts of human perception into account, the flaws appear.

Definite Cons

* Symmetry is usually detrimental to content hierarchy
* Symmetry diminishes viewer interest
* Having 2 sidebars, one on either side, defeats the purpose of sidebar content
* It requires that site visitors first learn (and perhaps relearn from page to
page) where to look for a particular sort of ancillary information or links
* Often results in far too much ancillary information on the page
* The particular sort of visual noise generated by the 2 bracketing sidebars
diminishes, rather than enhances, user/reader focus on the main content

Given these usually relevant and always compelling issues, it makes little sense in almost any case to use a centered 3-column layout for Web pages. It’s time to retire this deficient and problematic layout and reserve it solely for its best use: cases where design and usability are not important—or you don’t want to pay a designer to craft something that’s actually effective.

For Example:

For Example:

Here’s a simple, easier to use iteration of the Apple Store main page. Compare this with the current Apple Store.

website development design

Also, you might want to see how I chose to redux Amazon.com and mitigate the problematic centered 3-column layout.

How Deep is My Silo ?

When done well, Newspapers can represent some the best examples of information design. When your sole purpose is to present loads of textual/graphic information to be consumed in-full by everyone, you get good at designing for just that or you perish in the marketplace.

When newspapers and other print publications took their products to the Web, they were armed with what they thought was relevant design expertise. But this theretofore expertise turned to hubris when they failed to accurately recognize the constraints of this new medium. Their design and layout experience caused them to hold precious their deep columnar silo approach to sectional information presentation.

Examples of poor online main page (index) layout:

* Wall Street Journal
* L.A. Times

While many publications have caught on to the differences between print and Web media, the results of that initial hubris survive even today with many publications taken online. It is common to find news or magazine website main pages laid out in narrow vertical columns for sectional or contextual organization. This convention is almost always problematic, as the following facts point out.

In Print

* High resolution—comparatively easy to read
* Pages are largely vertical in nature
* A person can see and visually take in a large area of content (on a gatefold or
newspaper spread) at one time, so many items or department references in a layout
are all visible at the same time
* Typically, the section/article index is not a primary area for content consumption
Seldom any need to scan many contextually different sections at one time in one

For online newspaper/magazine main pages..

* Low resolution—comparatively difficult to read
* The screen is largely horizontal in nature ( because of and necessitating
scrolling ).
* Much of the page content is hidden below or above the visible screen area
* Main page content usually comprises a vast index of content, broken up into
distinct and contextually different sections—but this index is a primary content
consumption area

When news main page sections are laid out in vertical columns of varying heights placed side-by-side it requires that a reader practice one of 2 irritating methods of content consumption:

1) scroll downward to scan a column’s or section’s content and then go back up to do the same with another column or section, or

2) scan horizontally across adjacent columns of differing contexts, then scroll down and repeat the process, etc…

The first option is tedious and requires that we scroll up and down a number of times in order to consume the page in a contextual manner. The second option requires that we must examine part of 2 or 3 or more different departments/contexts, then scroll down to get the rest of some of these sections while introducing new departments/contexts. This option involves contextual schizophrenia. website design

The best method is to acknowledge the horizontal nature of the medium ( especially with regard to information-rich indexes online ) and lay out your departments and contexts in a horizontal manner. Horizontal browsing of information is far more comfortable for people than is vertical browsing of information (when reading). This allows readers to consume the entirety of one or more departments’ offering(s) and then scroll down for a different sort of information. With this method scrolling can become basically a one-time affair and there is no contextual dissipation of information.

Examples of better online main page (index) layout:

* Times Online
* Time Magazine

Examples of excellent online main page (index) layout:

* New York Post

website design development

Verbatim online mimicry of print media ignores vital differences in medium. New media is not new any longer and this sophomoric layout practice should be ended. So long as online newspapers and other publications continue to hold precious the idea of visual similarity to printed newspapers, they will fail to best serve their readers. Online publication designers should start being designers rather than legacy form production artists.


Every new medium or environment brings opportunities for missteps, and it is inevitable that initial efforts in these environments will utilize practices that are later found to be lacking. This is the case with centered 3-column layouts and vertically oriented columns in news index layouts.

With the examples of clear problems inherent with these (and other) layouts, it suggests that we designers should ever reexamine things we typically regard as standard practices. Making a regular practice of regarding any given medium or environment as a new frontier rather than one fully explored, it becomes easier to be a real designer and to actually do our job.

These examples are, like most of our design issues, contextual in nature. When we first pay attention to contextual matters, designing for any given medium or circumstance becomes easier and mistakes like these are easier to avoid. I sincerely hope that the problematic example websites cited in this article are fixed soon for the benefit of their users/readers/customers. But if they’re not, it certainly provides more opportunities for their competitors. Such is the nature of the marketplace.

Source : Killing Some Bad Layout Conventions

This entry was posted on Friday, December 14, 2007 at 12:18 AM and is filed under , , . You can follow any responses to this entry through the comments feed .


A reader had to go through the interview for Web Designer / Graphic Designer position and sent in his set of questions.

1. Whats is the difference between cellspacing and cellpadding?
2. If a page has to be loaded over all frames in window, what should be the value of TARGET attributes?
3. Which one of the following settlement is correct?
1. A table cannot contain another table
2. A Form can ve nested inside another form
3. Which element are table cells
4. List out tags that are support exclusively by IE and Netscape.
5. What tags are used to embed one html page inside another html page (without using frames)?
6. In dreamweaver what is used to apply same layout to my pages.
7. Which HTML tag is used to define an internal style sheet?
8. How do you define an inline style?
(Website design India)

February 23, 2008 at 2:11 AM

Post a Comment