Layouts - Why bother?

by Joe Gillespie — Aug 1, 2001

by Joe Gillespie

The last two editorials covered some of the more practical considerations of Web page layouts - static vs. liquid layouts, tables vs. CSS-P. This time, I'll ignore the "how" and concentrate on the "why".

How important is "layout" anyway? Does it really matter?

Some people will tell you that it doesn't really matter what a page looks like as long as the information is presented in a logical manner. They say, "Keep the content and the style separate. A Web page should be readable on any device capable of displaying it - a computer, a television, a PDA, a WAP phone."

That is like saying that it doesn't matter what you wear as long as your hat is on your head, your shirt on your torso and your socks and shoes on your feet. Yes, it makes sense logically, and sometimes you have to do it that way - but not always. Logic can be very restrictive if followed blindly. If you are travelling fast in an open-top sports car, your head is probably not the best place for your hat. If you are going to paddle in the sea, it might make more sense to have your socks and shoes under your arm.

What you are wearing definitely does matter as well as where. Putting aside the impracticalities of wearing a diving suit for dinner, the more subtle aspects of dress require you to dress appropriately for a job interview, a funeral or a disco.

The purpose of page layout design is to present information not only in a logical order but also in an appealing way that tempts the reader to get involved.

Regardless of what the text matter says, its presentation and delivery can communicate "tedious", "exciting", "important", "informative", "waffle" or a host of other things. Just like your attire, a page communicates something even before you start to read it. This can colour your attitude to the content without you even being aware of the fact.

The signals contained in that communication won't necessarily mean the same to everyone. As a graphic designer, you have to be in control of these subliminal undertones. Used with skill, they can can condition the reader's attitude to your advantage. At a more basic level, they should at least avoid sending negative messages.

An ill considered or badly laid out page is like an untidy person in a moth-eaten, badly fitting suit. Were it more akin to a person in casual, comfortable attire, it wouldn't be a problem - unless, of course, the subject demands a more formal approach.

If someone is trying to sell you something and they look scruffy, then you don't have much confidence in what they are selling. If it's something cheap and cheerful, then your expectations may not be so high.

Trying to sell something off a tatty Web page is less likely to produce the desired results than one that exudes care and confidence. As with anything, it's the attention to details that makes the difference.

Handwritten letter Business letter

The layout of a traditional hand-written letter is quite different from that of a typed business letter.

We are all introduced to the basic principles of layout at school when taught to write a letter or essay. Typists learn the fundaments of laying out business documents as part of their training. Where these basics cover the more practical issues, the strict rules that are laid down actively discourage creativity, just as straying from the straight and narrow structure and grammar of written English is considered wrong.

Well, okay, I can accept that you should at least know the rules before you start bending them. Rules are there to keep people in line but sometimes they are right and sometimes they are wrong! It is wrong to drive up the left hand side of a road "for creative reasons" - unless you live in England or Australia!

Layouts on paper or screen.

You are probably aware of most of the significant differences in page layouts for print and Web. Once you've created a print layout and it has been published, that's it. The reader will see exactly what you had in mind when you designed the page.

On a Web page, your layout will be relatively low in resolution, restricted in typestyles, inexact, and will shift and change depending on the reader's computer, monitor and browser.

You can either live with this fact, or fight it, but working with the medium rather than against it will cause less frustration and give better results in the end.

Information priority

When you read a novel, the information is delivered in an absolutely linear fashion. There is a title page, maybe some preamble, various chapters and some vaguely related stuff after the end of the story. You start at the beginning and finish up at the end. Each page will look pretty much like every other page with only a few minor distractions here and there. In layout terms, a book like this assumes a top-down approach and the typography assists by leading the eye from left to right and from the top to the bottom of the page without compromise.

A cinema or TV movie is similar - a sequence of individual frames presented to you one after the other, but we will stick with the concept of "pages" for the time being.

A reference book is quite different. It is dipped-into without necessarily going from front to back. You usually want some kind of shortcut to the information you are looking for - chapter headings or an index. Even when you get to the section you want, it might not be just a sub-section of continuous text, there could be one or more blocks of text, illustrations, photographs, captions to these images and references for further reading.

Newspapers and magazines are also broken up into smaller sections or articles that you can read or skip as you wish. Although you could read them from front to back, it is just as likely that you flick through them from back to front without it mattering too much. This is called "random access". You are looking for something of interest to you and you are just as likely to find it randomly as you are if it was presented sequentially because it is essentially "unordered".

The order that you are seeking is local to the article itself. First, a picture or headline will catch your attention, perhaps taking you to a caption or sub-head. If that manages to hold your attention, then you will be led into the main body of the text. The important thing to notice here is that top-down is no longer of any great importance. The photo you see first could be below the headline or the headline could be at the bottom right of the introductory text. It gains its prominence in some other way, size or colour of type, or through some visual trickery that leads the eye to it in much the same way that an artist composes a picture to bring attention to the main subject.

Now, if you start thinking about page layout as pictorial composition you will start to see what it is all about.

Newspaper layouts are about getting as much information onto a page as possible, magazine layouts can be whatever the designer wants them to be - crowded pages, virtually blank pages, only type, only pictures or type and pictures in any possible combination.

Now ask yourself, is your Web site a newspaper or a magazine, a photostatted price list or a glossy brochure?

Read more about information priority in the typography section of this site.

Examples

A common exercise for student typographers is to take a number of related lines of text and to present them in a prioritised order, but in doing so, they must only use one technique. They can use size of type, but not change the weight. They can use a variety of type weights, but the size and colour must remain constant. They can use colour, space, position on the page, rotation, whatever they like, but only one trick at a time!

Here are a few possibilities. Click on the pictures to enlarge them.

Emphasis through type size

Generally, large type has greater emphasis than smaller - no big surprise there - but it's not always so. If type is too big for comfortable reading at a given distance, a more appropriate size will take precedence. This will happen on a large newspaper or magazine spread but rarely on a Web page. It is all to do with breaking outside the eye's normal field of view. Enlarge image

Emphasis through type weight

Body text weight variation on a Web page is restricted by the availability of fonts on the reader's system. Very few common Web fonts come in more than two weights, regular and bold. Arial does have a black variant but if you want to play tricks with type weight on Web pages, you have to use GIFs or Flash images with embedded outline fonts. Very fine fonts such as thin and light are likely to break up at the low resolution of a Web page, especially at smaller sizes. Enlarge image

Emphasis through type colour or tone

Colour or tonal values with very low contrast against their backgrounds become diminished in emphasis. Warm colours seem to come forward whilst cool colours are recessive. Where Web typography is somewhat restricted by lack of type weight variants, tone and colour can be used to add or reduce relative emphasis. Enlarge image

Emphasis through type position

We normally read from left to right, top to bottom but you can override this natural flow. There are dominant positions for type on a page and other areas - "backwaters", if you like - where text is less likely to be read. A conjurer can ask you to pick any card from a deck and then force a particular card on you. You can play the same trick with type using space and position. Enlarge image

In the real world, designers are not restricted to using such academic exercises to establish priority although they will learn a lot in the process of trying. All these tricks are there to be used however you wish. What were once rules are now playthings. The purpose of the exercise is not only to present the information in the correct order, but to do so in a creative way.

That's where body language starts to get interesting!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float