Working with columns

The vast majority of print media makes heavy use of columns. The main reason for this is
that the eye generally finds it easier to read narrow columns of text than paragraphs that
span the width of an entire page. However, when working with print, you have a finite and
predefined area within which to work, and by and large, the “user” can see the entire page
at once. Therefore, relationships between page elements can be created over the entire
page, and the eye can rapidly scan columns of text.
On the Web, things aren’t so easy. Web pages may span more than the screen height,
meaning that only the top portion of the page is initially visible. Should a print page be
translated directly to the Web, you may find that some elements essential for understanding
the page’s content are low down the page and not initially visible. Furthermore, if using
columns for text and content, you may end up forcing the user to scroll down and up the
page several times. Finally, it’s almost impossible—due to the variations in output from
various browsers and platforms—to ensure that text columns are the same length anyway.
(CSS should eventually enable designers to more easily deal with these problems, but it
will be some time before such solutions are supported.)
Therefore, web designers tend to eschew columns—but let’s not be too hasty. It’s worth
bearing in mind something mentioned earlier: the eye finds it tricky to read wide columns
of text. Therefore, it’s often good practice to limit the width of body copy on a website to
a comfortable reading width. Also, if you have multiple pieces of content that you want
the user to be able to access at the same time, columns can come in handy. This can be
seen in the following screenshots from the Thalamus Publishing website (www.
thalamus-books.com).As you can see, the main, central column of the About page provides an overview of the
company. To the left is the site-wide search and an advertisement for one of the company’s
publications; and to the right is a sidebar that provides ancillary information to support
the main text. This provides text columns that are a comfortable, readable width, and
enables faster access to information than if the page content were placed in a linear, vertical
fashion.