Presenting information
In web design, like most other things we do, context needs to be looked at carefully and in detail. The more we understand about what we want to do, the particulars of what we are trying to say, and in what contexts and what ways it will be received, the more effective we can be.
Although web sites come in many different forms, most take one of three general formats, and each of these formats is used in differently. Understanding these differences, how they function and how design principles can fail if misapplied, helps in understanding how to best design a particular site. Each asks for its own set of principles and a focus on what problems are being solved.
Much bad web design is based on trying to apply an idea that works for one form to another where it doesn't - for instance, the elimination of white space in site which presents extended text.
These are the three:
1. A story - Extended text, as is found in many online newspapers, blog entries, news magazines and stories. Because these are read like essays, many of the traditional guides for print typography can be applied effectively to stories and other narratives - like font size, line length, line height and white space. An example is this essay by George Orwell on writing and politics, another is Ernest Hemingwayʼs story, The Big Two-Hearted River.
2. A collection - Information presented as tabular data - like tables and lists of various kinds.They can be organized a number of ways and combinations of these ways, - by alphabet, number, location, kind, time or sequence and in an order of relationships, a hierarchy. ‘Density is the new whitespace.’ is good advice for on line collections (as it is in print collections - dictionaries, catalogues, want ads and phone directories) because they are scanned for a particular bit or bits of information, not read over a period of time. Efficient (and dense) ways of organizing information are at the center of their usefulness.
Four of the ways to present a collection of information are as a table, an ordered list, an unordered list and a definition list.
Table examples
| Entity Name | ISO Code | Code Result | HTML Code | Code Result |
|---|---|---|---|---|
| ampersand | & | & | & | & |
| vulgar fraction 1/4 | ¼ | ¼ | ¼ | ¼ |
| ndash | – | – | – | – |
| left double quote | “ | “ | &ldquo | “ |
| dagger | † | † | † | † |
| bullet | • | • | • | • |
| horzontial ellipsis | … | … | … | … |
| small o-e ligature | œ | œ | œ | œ |
| cent | ¢ | ¢ | ¢ | ¢ |
| pound sterling | £ | £ | £ | £ |
| currency | ¤ | ¤ | ¤ | ¤ |
| yen | ¥ | ¥ | ¥ | ¥ |
| broken bar | ¦ | ¦ | &brkbar; | ¦ |
| section | § | § | § | § |
This random group of unicode entities is presented in a <table>.
Another example is this table of HTML Elements
List examples
The ingredients uses an unordered list <ul> and the directions an ordered list <ol>.
Granola recipe
Ingredients
- 6 cups of rolled oats
- 2 cups of walnuts
- 1 cup of water
- ½ cup of sugar
- 1 cup of peanut oil
- 2 cups of raisins
Directions
- Preheat over to 275° F (135° C)
- Mix oats and walnuts in a large bowl
- Dissolve sugar in warm water
- Add water and oil to oats and walnuts
- Stir and let soak for 10 minutes
- Spread in baking pan
- Cook in oven for 3 to 3½ hours, until lightly browned
- Cool and add raisins
And another unordered list <ul> used to design for homepage of a complex institution.
Here is an example of a definition list <dl>:
- Bug
-
- insect (bug on a leaf)
- germ (caught the bug)
- covert listening device (the room was bugged)
- defect in software (it has a bug)
- Volkswagen Beetle
- annoying (bug me)
- enthusiast (camera bug)
- to go away (bug out)
- bulge (bug out, bug eyed)
3. A visual - Single message sites, like headings, trademarks, slides. signs or ads. These are like a snapshot, an aphorism or a doorway - words or images or a function taken in quickly, at a glance.
◀ LOOK LEFT
LEAN RIGHT ▶
This is the markup for LOOK LEFT LEAN RIGHT: font-size:380%;color:#fff; padding:1em 1em 1em .5em;background-color:#000;font-weight:700;font-family:'droid sans',sans-serif;text-align:center; margin:0
♕ ♖ ♗
Play Chess
♘ ♙ ♔
This is the markup for Play Chess: font-size: 450%; color:#000; padding:.5em;background-color:#fff;font-weight:700;font-family:'droid sans',serif;text-align:center; margin:.25em 0; border-width:.2em;border-style:solid; border-color:#000
✄ ✄
THE CUT-UPS
This is the Dingbat used for Cut-Ups: #9988.
And a list can also be presented as a graphic:
- Sentences are short.
- The text is broken down into short paragraphs.
- Favour the active voice.
- Do not use jargon, slang or idiomatic phrases.
- There are links to definitions of technical terms.
Simple and Clear Language
Making Accessible Web Sites for
the United Nations
This is from UN Guidelines for accessible web sites.
These designs make a point, but make it visually as an image, not as a story told over time or as a grid filled with information.