Pattern 55: Content before graphics **
 AKA:

Back to Diagram 1 - Getting started Back to Diagram 2 - Useability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

Download sensitizing image
[25Kbytes]
Nice picture of rice paddies

You have CLASSIFIED YOUR SITE (11) and are designing pages for it. People on dial-up lines want to use features quickly, rather than wait for graphics to download; they are sensitive to DOWNLOAD TIME (42).

How do you reconcile the desire for a sexy, graphical appearance with the need for lightening speed?

Therefore

First try to avoid using images. Explain what each navigation option is in text before placing any graphics. Put text in the spaces where the graphics will (eventually) appear. Make the buttons clickable and use the RHETORIC OF ARRIVAL AND DEPARTURE (20) pattern, before starting the graphics download. Warn users of file sizes rather than estimated download times.

Now use WORDS BEFORE ICONS (57).

Discussion - forces - known uses

The simplest solution is to avoid using graphics at all, but this is rarely possible on commercial sites and never on arts and entertainment ones. However, it should always be considered because of the KISS (38) principle.

Paint the screen with meaning text and obvious textual links before rendering any graphics. If you use ALT text attributes to do this most browsers will do the right thing automatically. This is especially important (a) on the home page, and (b) above the fold. Users can now follow the links they need without waiting for the graphics to load. The images can only be placed quickly if you supply HEIGHT= and WIDTH= attributes. Of course you should do this for tables too.

For especially large images, give the user the option as to whether they download them (as above). Notice that the ALT text explain both the penalty and reward for taking the download.

It is possible to manipulate, search and process text in many other ways on current generation computers. This is not so with graphics. Text rendered as a graphic has lost its semantics. HTML and, even more so, XML go further by allowing one to add structure to text, thus adding even more meaning.

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites