Number 7 in a series.

Break It Up

When an editor is planning the layout for a newspaper or magazine - or almost any other professional publication - he keeps in mind a few basic concepts that enhance the readability of the document. The same concepts are applicable to web page design, although it is somewhat more difficult to implement them in web pages than in paper publications.

The cardinal rule is to avoid large blocks of dense, undifferentiated text. They make the page look 'gray' and unattractive; they're also harder to read. Judicious use of white space and other non-textual elements break up the monotony of a page, and make it easier to read. Consider, for example, an inside page of a major broadsheet daily newspaper (A broadsheet is a large-size paper such as the New York Times or the Wall Street Journal. Smaller ones, such as the New York Post or the so-called 'supermarket tabloids' are called 'tabloids' because of their size.): Stories will start with a headline, and will generally have one or more associated pictures or maps, perhaps one or two 'pull quotes' (short sentences or quotations from the story, placed in a visual box in a larger type size), or maybe a 'box' (associated short story in a literal box). Generally, they're formatted in several columns as well, with hairlines between stories, and white space between columns within a story.

Although it's difficult to use many of these techniques with web pages, it is possible, and the results are likely to be worth the effort. Recent browsers, supporting frames and style sheets, are nearly ideal for these techniques; many can also be implemented using tables, although it's a bit more difficult.

When composing your pages, the things to remember are as follows:

1. Keep the line length of text down in the 5-to-10 word range. More means that the eye spends too much time traveling to the left, breaking the natural flow of the text; less means that the eye is moving left too frequently, resulting in eyestrain and fatigue. Both are distracting.
2. Use both white space and borders around your pictures. Borders should be white for pictures which are mostly dark colors (brown, black, or dark blue, for example), or black for pictures which are predominately bright colors (reds and bright greens, for example) or light colors (white, yellow, or sky blue, for example). Borders don't need to be thick; two or three pixels is enough.
3. Strive for a good balance of material versus white space.
4. Arrange your material 'naturally'. In other words, the visitor's attention should not be diverted to an area of the page that it hasn't naturally reached in the course of reading the material. Diagrams, tables, or pictures and explanatory text should be near each other.
5. Different headings, white space, horizontal rules, and images used as text separators break up text in psychologically different ways. Make your choices for these breaks carefully.