A web page is essentially a rectangle (note that a computer monitor is a rectangle and a browser window is a rectangle). Furthermore, in the Anglophone community, we read text left to right, top to bottom. These means that your eyes travel over text row by row, top row to bottom row...we read by sweeping over a rectangle.

Notice the organization of text blocks in the right-most image (I have superimposed some red lines for illustration). See how the organization of text blocks in a grid helps you understand how the text is organized. This is less true of the left-most image that displays blocks in a manner that weakens a grid organization.

Organization aids comprehension

A grid is an geometric structure applied to the individual units of the rectilinear webpage presentation. The most important reason is helping your reader comprehend the elements on the web page (Why? you ask --  Because organization aids comprehension and chaos impedes comprehension). This is particularly true when designing a large number of webpages. A common design (i.e., grid structure) helps your reader recognize that he is still located in your web site. Notice the strong grid structure used by USA Today. This newspaper has to use a format that permits readers to quickly comprehend the news and find their way around the geography of a page.

Importance of spatial location

"Supporting memory for spatial location while reading from small displays" K. O'Hara, A. Sellen, R. Bentley. Conference on Human Factors in Computing Systems, CHI '99 extended abstracts on Human factors in computing systems, 1999.

...when people read paper documents, they can often recall the approximate location of information within those documents...knowing spatial location...supports search and retrieval of information since even knowing the approximate location of information can narrow the search space...negative aspect of scrolling 'scrolling means there is a dynamic relationship between the location of the information and reference points such as window boundaries'

Underlying design grid

Web Style Guide

Your goal is to establish a consistent, logical screen layout, one that allows you to "plug in" text and graphics without having to stop and rethink your basic design approach on each new page. Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web site will seem patchy and confusing.   

An Absolute Width For Easy Reading

"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal." Bringhurst, R. The Elements of Typographic Style. Hartley & Marks, 1996 p. 26

Grids and White Space Distribution

Setting up a grid for the most text-heavy pages gives you an indication of how you might design subsequent pages where more flexibility is possible. More flexibility almost always means that more white space can be allocated. Here are some suggested grid patterns. The left-hand column indicates the initial text-heavy page.

Implications of grid for reading

Contrary to common belief, the eye does not glide over the picture or along the line of printed matter. It covers the area in jumps and stops which are known as fixations and excursions or eye movements. Brandt, p. 27

To discover whether the eyes themselves tend to follow a consistent pattern or whether they move at random without rhyme or reason has been the major objective in all of the research studies...The results of the study reveal that the median of the first fixation for all subjects falls at a point above and to the left of the center of the observed field. Brandt, p. 30 - 31

The left side preference is most likely due to our habits or reading and a type of brain dominance. In reading a printed page, it is necessary for us to move to the left when beginning the first line as well as when returning to the next line of print. Brandt, p. 33

When calculating the relative time spent in each of the four quarters of the field it is found that the percentage of time, 41%, is spent in the upper left-hand corner, 25% in the lower left, 20% in the upper right, and 14% in the lower right. Brandt, p. 35

Brandt, Herman F. The Psychology of Seeing. The Philosophical Library, 1945

Heat maps showing location of eye fixations

Our participants scanned headlines that were in the upper left first. However, once there, they generally took only a quick look at the first few words before moving on. We found that the first 1-2 inches of each headline is where most eyes fixated, suggesting that the first few words are key in drawing reader attention. This situation is particularly true when headlines are in a list format or when headlines and blurbs have a similar look and feel.
As seen on all heatmaps of our test homepages, concentration of viewing is left-sided when participants are perusing a list. (A heatmap is an aggregate view of all participants' eye fixations on a page; a fixation is where the eye paused to look for at least a fraction of a second.)
"What we saw through their eyes": Eyetrack III - Online news consumer behavior in the age of multimedia

Reading Text

The Poynter-Stanford Project on EyeTrack Research

"Where do eyes go initially after firing up the first screenful of online news? To text, most likely. Not to photos or graphics, as you might expect. Instead, briefs or captions get eye fixations first, by and large. The eyes of online news readers then come back to the photos and graphics, sometimes not until they have returned to the first page after clicking away to a full article."

Common eye fixations sequences in reading a newspaper:

The Canonical Intranet Homepage

Over the past five years, I've reviewed several hundred intranets and have seen a clear trend: homepage layouts are becoming more and more similar over time. We've now reached the point where one specific intranet homepage layout is so common that it makes sense to anoint it as the canonical design.

I made the following graphic by averaging the screenshots of ten major intranet homepages. Each screenshot has a few deviations, but the graphic clearly shows the tendency toward commonality in the layouts. Jakob Nielsen, May 23, 2005

Here's the canonical layout for intranet homepages:

Top horizontal bar: colored background, 100 pixels tall. Typically used for logo, global navigation (often as tabs), and a search box.

Left column: colored background, 200-250 pixels wide. Typically used for a navigation bar with detailed navigation and/or a contextual list of options for the current intranet subsite.

Middle area: white background, 400-600 pixels wide. Typically features one wide column (or sometimes two skinnier columns) containing a few photos or illustrations, a list of news headlines, and boxes with "portlets" to the most important intranet features and applications.

Right column: white background, 200-250 pixels wide. Typically used for a stacked set of boxes, some with colored contents or pictures.

Prize-winning newspaper designs

Note how the following prize winning newspaper design combine exciting, well-balanced graphics within a grid framework.

26th Edition SND (Society for Newspaper Design) Prize Winners

Click images

Further grid and column designs

• Grid and column designs
• Design by grid
• Designing with grid-based approach