A guide to web design

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 NameISO CodeCode Result HTML CodeCode Result
ampersand & & & &
vulgar fraction 1/4 ¼ ¼ ¼ ¼
ndash – –
left double quote “ &ldquo
dagger † †
bullet • •
horzontial ellipsis … …
small o-e ligature œœœœ
pound sterling££££
broken bar¦¦&brkbar;¦

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



  1. Preheat over to 275° F (135° C)
  2. Mix oats and walnuts in a large bowl
  3. Dissolve sugar in warm water
  4. Add water and oil to oats and walnuts
  5. Stir and let soak for 10 minutes
  6. Spread in baking pan
  7. Cook in oven for 3 to 3½ hours, until lightly browned
  8. 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>:

  • 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.


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

✄ ✄

This is the Dingbat used for Cut-Ups: #9988.

And a list can also be presented as a graphic:

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.