Layout ideas

Figures 1) 2a - 2b) and 3: diferent alternatives for text box distribution in a typical publication.

An example of layout with assymetrical columns —like the one in this page— in the equivalent page of the catalan version of the Manual.

The composition of the text must consider aesthetic (visual) and functional criteria. From this point of view, the text must as legible as possible, to facilitate the understanding by the user.

A well structured text, with correct typography helps a lot it being understood. We must separate the sections and subsections clearly; add elements that orient the reader; emphasize if needed, using cursive or bold fonts. Summaries can be included, emphasizing the most significant parts; photo captions or commentaries accompanying the illustrations which clarify or complement their meaning.

Los estudios sobre legibilidad muestran que ésta depende de dos factores principales: el tipo de letra y la composición del texto, esencialmente la longitud de las líneas y su espaciado. Obviamente, conviene que tengamos en cuenta estos principios para facilitar al máximo la lectura de nuestros textos. Existen unos valores óptimos para la longitud del texto: con independencia del tamaño de éste, lo que facilita la lectura es poder leer tramos de las frases de golpe. Si las líneas son demasiado cortas, la vista debe buscar continuamente el principio de la línea siguiente y resulta cansado; pero si la línea es excesivamente larga, también resulta fatigoso. The studies about legibility show that it depends on two main factors: the font and the text composition, essentially the line lenght and spacing between lines. Obviously, we whould take these factors into account when designing a publication to allow the easiest reading our texts by our readers. Optimal values for the length of the text exist: independently from the font size, what matters is te ability to read sections of the phrases without tiring the eyes. If the lines are too short, the eyes must look for the start of the next line continuously and they get tired; but if the line is excessively long, it is tiring as well.

The optimal length of the text is between 60-70 characters, approximately 12 words of this same paragraph. For typical a A4 sheet with 2 or 2.5 cm. margins and with a single text column, set in the standard size of 10 to 12 points, the width of the lines turns out to be excessive. If the paper is larger, like in a newspaper, the exageration of these line lengths would be still bigger. Not surprisingly, text in newspapers is split in several columns, the narrower the smaller is the text.

In order to improve the legibility of the text we can make something very simple: to widen the margins (figure 1), so that the column is contracted proportionally, until having the most comfortable width for its reading. In addition, we obtain a cleaner, clearer and, to a certain extent, more luxurious looking design, with the abundant white space that we obtained.

As an alternative, we can distribute the text in two or more symmetrical columns, like in the figure 2 (to decide the number of columns, we can follow the same mentioned criterion to have a suitable number of characters by line.) We must have special care with the size of the characters in the column: the narrower they are, the smaller the type size should be. If we have very big characters in a very narrow column, we will cause a problem of difficult legibility, this time by the opposed reason, and in addition the aspect will be worse.

Designing with assymetrical columns

This it is a page model that works. And when something works, usually it is used and adapted in many situations. Many webpages, including some of ours, are based on a structure like the one of the image (figure 3). Why this model, so simple, is a better choice than other options? The reasons are multiple:

This way of distributing content in a page is optimal because of:

Legibility . To have most of the text placed within a box, with a width of 10-12 words, is much easier to read than a single text column with the total width of the page, and easier than multiplenarrow columns too.
Clarity . With this model, the visitor-reader identifies clearly where he is and which are the sections to which it can access (with the heading or the graphic of the top), where it is the body of the text, where are the details the information (the right block). The small column on the left is used, on the Web, to offer different informations: the related sections, new features, summaries, small illustrations, et cetera.
Familiarity . It is a very commonly used solution, yet very flexible and customizable; the readers immediately know where to scan for the information and clues about the contents.
Simplicity . This option of design is easy to lay out. You can create a template based on it and apply it as necessary.

Although this model is ideal for the pages which display text-based information, other alternatives exist that must considered when designing a Web. Of the existing options, those we can sketch in paper, in our notebook, some are more hard to transfer to the web page. Some ideas are suitable for their printed publication, while others work better in hypertext form. For example, for an index page, a more visual approach can be more recommendable, based on small images and short text blocks to extend the information.

Remember that everything related to the organization of the information and the design of pages is thorougly explained in some resources of in the Web, some of which can be followed as links from our different pages. We must highlight Patrick Lynch’s Manual of Style (formerly from the Yale University); it discusses with detail and clarity all the aspects to consider at the time of designing and constructing a Web. Finally, a small booklet that turns out very useful to look for layout solutions: the recommendable book by L.Koren and R.Wippo Meckler.