Home Page || Public Bookmarks ||The Calvin Bookshelf
Some web design comments by
William H. Calvin
How to design web pages
for reading postures

copyright ©1996 by
William H. Calvin

Not only is the text a distillation, a dramatic shaping of materials, but to process it we must apply a very exclusive sort of focus. The result is an altered state of awareness, a kindled-up sort of high.
Sven Birkerts, 1994

Notice, if you will, that this line of type is one size larger than that in the epigram. The default font size <FONT SIZE=3> is fine for when you’ve got your nose 12-16" from the screen, but sustained reading is hard to do from a single posture. If reading books and browsing newspapers is to migrate to the computer screen, it’s going to have to be more comfortable. Design your pages around the problem of reading in bed.

    Staggered narrow columns is what SLATE has adopted, and I like it. Switching to <FONT SIZE=4> is one of my own experiments for sustained reading from the screen, whether desktop or laptop. Lean back in your chair, cradle the tea mug or the latté, and try reading this. Use your big toe to tap the PgDn (most modern browsers now allow you to use the space bar as an equivalent to PgDn). Get away from that mouse — it forces you into a pose, a posture that fatigues. While it’s nicely designed for sorting mail via drag-and-drop or working on graphics, it’s not what you want for turning pages when you’re in Reading Mode. As Sven Birkerts said in his Gutenberg Elegies about the ungainliness of on-line reading:

Not only is the user affronted aesthetically at every movement by ugly type fonts and crude display options, but he has to wheel and click the cumbersome mouse to keep the interaction going. This user, at least, has not been able to get past the feeling of being infantilized. No matter how serious the interaction taking place, I feel as though my reflexes are being tested in a video arcade. I have been assured that this will pass, but it hasn’t yet.
    Laptop mice are actually more civilized, because there’s a big mouse button that you can tap without carefully positioning yourself. Just park the mouse arrow over the lower part of the slider bar path at the lower right of your screen, and a tap on the mouse button will turn the page for you. Try that with a rolling mouse and you’ll have to carefully position yourself, splinting your arm into position by co-contracting extensors and flexors (and, secondarily, stiffening your whole upper body) — and thereby fatiguing yourself. [Great news — there is now a laptoplike stick for desktops, not between GHB but atop a palmsized stationary platform with two buttons on its sides, looking like a one-eyed flounder but called DeskStick.]

Consider, too, the TABLE feature that I’ve used to force the text into columns, whose width in spaces is booklike (those 80-to-132-wide columns are far harder to scan). You can set your screen wider, but it won’t widen the column. But you can admire my honeycombed wallpaper — you’ll have to read either of my two new books, How Brains Think (including my critique of the consciousness physicists, "The Janitor’s Dream") or The Cerebral Code, to find out why I’ve learned to like hexagons so much.

Narrative is one of the ways in which we speak, one of the large categories in which we think. Plot is its thread of design and its active shaping force, the product of our refusal to allow temporality to be meaningless, our stubborn insistence on making meaning in the world and in our lives.
        Peter Brooks, 1984
    Wallpaper has been a mixed blessing, as it makes reading text more difficult. With the addition of BGCOLOR=#F0F0F0 to your <TD> command, you can have your cake and eat it too.

    And, of course, BGCOLOR=#fff7d6 is the way to make your sidebars distinctive. The general answer to "How did they do that?" is, of course, to find your browser’s pulldown for View | Document Source. That’s pretty much how I’ve educated myself about web page design — clipping out sections of HTML code and figuring out how to modify them. You can do exactly the same thing with the epigram above: Just File | Save As and open up this web page with your favorite editor and, for example, snip out my sidebar code starting with the <TABLE> and continuing to the </TABLE>. You can do the same thing by blocking and copying to the clipboard in the View | Document Source screen, then pasting it into your own HTML code.

    One trick that page designers often use in print is the double column, but it has some limitations here. This example, from my new book The Cerebral Code, works because the text will fit on one screen without scrolling. (Well, at least once you finally get it positioned!)

The Cerebral Code is about a new understanding of how darwinian processes could operate in the brain to shape up mental images in only seconds, starting with shuffled memories no better than the jumble of our nighttime dreams, but evolving into something of quality, such as a sentence to speak aloud. Jung said that dreaming goes on continuously but you can’t see it when you are awake, just as you can’t see the stars in the daylight because it is too bright. Calvin’s is a theory for what goes on, hidden from view by the glare of waking mental operations, that produces our peculiarly human type of consciousness with its versatile intelligence.
    As Piaget emphasized, intelligence is what we use when we don’t know what to do, when we have to grope rather than using a standard response. Calvin tackles a neurophysiological mechanism for doing this exploration and improvement offline, as we think before we act or practice the art of good guessing.
    Surprisingly, the subtitle’s
mosaics of the mind is not a literary metaphor. For the first time, it is a description of mechanism at what appears to be an appropriate level of explanation for many mental phenomena, that of hexagonal mosaics of electrical activity. These mosaics compete for territory in the association cortex, implementing all six of the essential features of a darwinian process within seconds, and facilitating ascending levels of abstraction. Even analogies can compete to generate a strata of concepts that are inexpressible except by roundabout, inadequate means-- as when we know things of which we cannot speak.

William H. Calvin is a theoretical neurophysiologist at the University of Washington in Seattle, and author of nine books.

A Bradford Book Author photo by
Doug vanderHoof

It’s actually an early draft for the flap copy, the text that appears on the fold-in flaps for the dust jacket of a hardcover book, so it’s particularly appropriate to double-column it. But the following one, from the dust jacket flaps of my other new book, How Brains Think, has problems when webbed because the text is too long for the height of most screens, so that you have to page down, then back up, then down again. More than about 350 words, and you’re in trouble:

If you’re good at finding the one right answer to life’s multiple-choice questions, you’re smart. But intelligence is what you need when contemplating the leftovers in the refrigerator, trying to figure out what might go with them. Or if trying to speak a sentence that you’ve never spoken before. As Jean Piaget used to say, intelligence is what you use when you don’t know what to do, when all the standard answers are inadequate.
     Evolving something new “on the fly” involves a lot of creative trial-and-error inside the brain, mostly in the last second before speaking aloud. Starting from themes as disjointed and unrealistic as those of a dream, you make something of quality out of the subconscious morass. How?
    This book tries to fathom how our inner life evolves from one second to the next, as we steer ourselves from one topic to another, as we create and reject alternatives. It’s not just a little person inside the head doing all this, though it’s natural to assume that anything fancy requires an even fancier designer. Ever since Darwin, however, we’ve known that elegant things can also emerge (indeed, self organize) from simpler beginnings.
    And, says theoretical neurophysiologist William H. Calvin, the bootstrapping of new ideas works much like the immune response or the evolution of a new animal species — except that the brain can turn the darwinian crank a lot faster,
on the time scale of thought and action. Few proposals achieve a Perfect Ten when judged against our memories, but we can subconsciously try out variations, using many brain regions. Eventually, as quality improves, we become conscious of our new invention.
    Drawing on anthropology, evolutionary biology, linguistics, and the neurosciences, Calvin also considers how a more intelligent brain evolved using slow biological improvements in the last few million years. Back then, evolving jack-of-all-trades versatility was encouraged by abrupt climate changes. Now, evolving intelligence uses a nonbiological track: augmenting human intelligence and building intelligent machines. In his concluding chapter, Calvin cautions about arms races in intelligence. Just as the Red Queen explained to Alice in Wonderland, you might have to keep running to stay in the same place.

William H. Calvin is a theoretical neurophysiologist at the University of Washington in Seattle. He is the author of nine books, including The Cerebral Code, The River that Flows Uphill, and, with the neurosurgeon George A. Ojemann, Conversations with Neil’s Brain.

Author photo by Doug vanderHoof

More page design advice from the pros: David Siegel and Robert Hess
It’s Ready by the
Time You Get There

copyright ©1996 by
William H. Calvin

We feel in one world, we think and name in another. Between the two we can set up a system of references, but we cannot fill the gap.
Marcel Proust (1871-1922)

My two other adventures into web design (or, at least, into commenting on it) are 1) hidden answers and 2) this comment that is seen following the first screen of my home page:

[ Okay, now that the graphics have loaded, you can safely proceed to the next screen. Calvin’s First Rule of Web Page Design: Keep those slow graphics (and long tables) off the first page — give people something to read!]
Read-ahead buffering is a wonderful technique, often used in the faster disk controllers. We can do the same thing with web pages, loading the later screens while we’re reading the first screen. This is the reason why lots of little pages are so wasteful of everyone’s time: you could have been loading those other screenfulls in the meantime.
Downstream, you put an anchor such as
<A NAME="intro"></A>
and then link to it from your initial menu with
That’s all it takes to do read-ahead buffering.
That's why this little essay is a follow-on to the first one, rather than having a web page of its own (notice, you didn't have to wait?). If you want to cite this essay, you can also use the anchor tag as a suffix to the URL, i.e., http://weber.u.washington.edu/~wcalvin/webworks.html#readahead will take someone directly here, skipping over the first essay on page design.

Painting Pages Promptly. Many of my web pages are 20-40k in length but I work at making the first several screens load quickly. Always specify the image size so that your browser can leave room for it, and thereby charge ahead with the painting of text. For example,

<img width=223 height=123 src="./img/mtr-label.jpg">
means that the JPG of Mount Rainier at the top of my home page doesn’t hold up the painting of the text. Watch out for TABLEs, however; if you start with a sizeable one, your screen won’t paint any of it until the whole table text has been read and formatted. A series of short tables is better for the first screenfull. The corollary of Calvin’s First Rule is that there’s no excuse for an initial screen that paints slowly.

    When people omit such courtesies to the viewer, it may not be because they know too little about HTML. Commercial sites with advertising, sad to say, are starting to use such tricks to force you to stare at the ads for a few seconds, waiting for something else to finally appear. Some of what people blame on slow networks is actually an intentional delay. Complain early and often. We’ll have to live for decades with the standards that are established in the early years of the web.

[Go to Top]

Email || Home Page ||The Calvin Bookshelf

The background MIDI is POULENC, Mouvements Perpetuels (D.Siu)