Caffeinate Your Hypertext

I once asked a wise programmer for the definition of hypertext. The programmer sighed.

“That’s a hard one,” he replied. “Ask me something simple next time, like the definition of love.” He folded his hands and meditated for hours. Then he spoke. This is what he said:

“Hypertext? It’s just text on caffeine. Lots of it. That’s why it’s hyper, you see.”

“Smart aleck,” I retorted and left.

How did you learn to create Web pages? No, not HTML — the pages themselves. I don’t know when I learned hypertext. Until recently, I didn’t even think of my writing as hypertext. I was just putting stuff on pages. Then one day, I wrote a filler paragraph. It wasn’t anything special, but my client loved it. The paragraph looked something like this:

In this article, “Caffeinate Your Hypertext,” I suggest that knowing how to create a Web page is only a small step toward writing good hypertext. The article is the first installment in a two-part series on hypertext for anyone who writes anything for the Web. In a world where designers create systems to offload work to secretaries and writers, both technical and non-technical people need a sense of the possibilities opened up by hypertext. This article will look at key issues in hypertext authoring, point out some common, fun, and interesting examples, and finish up with a bucket of questions and ideas. The second article will look at some technologies that make hypertext easier to understand, write, and publish. If you’re interested in Wikis or Content Management Systems, the second article is for you.

My paragraph was just a normal paragraph with a few links thrown into the sentences. This is not a new technique. I have seen it used on many pages; blog writers often use this very technique. Yet my client had never thought of writing in this way — it was a revelation for both of us.

I realized that the wise programmer was right. Take a single serving of text, add the caffeine of hyperlinks, and the now-stimulated paragraph works better than a normal paragraph. But just like caffeine, using hypertext can have side effects. Nobody wants an over-caffeinated kid running around, destroying everything in sight.

I needed to find out how this electronic caffeine works if I was going to use it to my best advantage. I went to Tibet and meditated for thirty years. Here’s what I discovered.

Caffeine

The hyperlink is the most basic, most powerful part of the Web.

Vannevar Bush, who also directed the US Atomic Bomb project, proposed the hyperlink in 1945. He hoped for a system that would allow researchers to collaborate on a single, central knowledgebase of all known information about anything. In Vannevar’s proposed Memex, the links aren’t in the documents themselves. In fact, Vannevar’s hypertext worked more like a history list. His ideas inspired later programmers who then made the hyperlink into what it is today. Later still, Tim Berners-Lee combined existing hypertext ideas with the Internet to create the World Wide Web.

What’s In A Link?

So what? Everybody knows what a hyperlink is.

That’s the problem. When I first learned HTML, I wasn’t concerned about my documents themselves. I wanted to learn to write good HTML. I worried about different browsers displaying pages differently. I salivated over new technologies. After all, I’d been a Web user for years; I knew what links were. I was more interested in the pixel width of a paragraph than what it said or how it fit within my site.

I never thought about my entire site as one big, connected document. Rather, I thought of it as a number of individual, connected pages. My sites were islands with airports instead of a single continent. I rarely strategized about creative ways to connect my content. I went by what I saw everywhere else: make a toolbar and link it to a hierarchy.

Note: Not sure how to create HTML code? If you use a WYSIWYG editor like Netscape or Dreamweaver, keep reading. Otherwise, you might want to check out SitePoint’s Beginners’ HTML.

Even though I’d been designing for years, I hadn’t seriously thought about the link. It was always just there. I did know that coming up with good links is hard. I just didn’t realize all the nifty ways hypertext lets us put good links together. Some links are part of the sentence. Other links can be listed together in an index. Some people put hidden links on their Web pages. Sometimes, each pixel in an image is a different link. At the most basic level, however, links just connect information.

Just? Authors of the past would kill to write in hypertext. After I thought about links for a while, I got some painful flashbacks to elementary school as I realized that the link works like a part of grammar.

The Hyperlink’s Place in Grammar

I know what you’re thinking. Ole Nathan has finally gone over the edge. All those English classes made him go crazy. But think about it. When I was growing up, I learned a lot about nouns, verbs, adjectives, and adverbs. I learned how to piece together sentences, paragraphs, and essays using different parts of speech. Punctuation and whitespace link words into sentences; hyperlinks piece together multiple pages in the same document.

While there are fewer rules for hypertext than for punctuation, there are similarities. Write a chapter with no punctuation and readers will find it hard to understand. Write a sentence with too much pu.-;nct!ua)t.ion, and everyone will find it hard to read. Write hypertext with too many or too few links and pages, and it will fall short as well.

Page Organization

Connecting pages with hyperlinks organizes the information the pages connect. Most people think of complicated webs when they think of hypertext, but most sites don’t look like webs at all. One part of the page contains an index, and a seperate part of the page displays the site content. On the SitePoint Website, you’ll notice a simple index along the top, left, bottom, and right.

Simplified? Yes. While the SitePoint navigation bars might look very complex, they only link to a small number of the total pages. With so many articles, it would be impractical to list every possible page down the side. Many of the links along the top and sides link to further indexes of articles and forums. This hierarchy allows SitePoint to neatly organize and categorize content.

Let’s look at some more examples of Website organization to see what we can learn about designing our own sites.

Learning by Example

Notice that I’m using SitePoint as an example to demonstrate a way to use hypertext. This brings us back to a question I asked at the beginning of the article: how do you learn to create Websites?

I originally learned design by using the Web a lot. Over time, I got a feeling for what everyone else was doing. If I liked it, I imitated it. I learned quickly, but there were some downsides. I got stuck in the Monastery of Perpetual Fad. Inside this Monastery, an infinite number of designers is busy at their tables, trying to make good sites by copying everyone else. The definition of cool changes rapidly, and only a few end up making interesting or unique sites. Of course, borrowing or stealing ideas from great sites is often helpful, but if you borrow all your ideas from other people, you can’t meet your own individual needs.

I tried to find new, nifty technology to help me design with a minimum of work. So did everyone else. In the end, technique is more important than technology. Your site might be easy to manage, but how well do you manage it? Your technology might provide powerful features. Are those features relevant? Your code might make organizing data very easy. How do you organize it? Are you stretching to fit your technology, or does it meet your needs? You might have a cool-looking site — that’s a good thing. However, unless the site’s purpose is to look pretty (and later, we’ll look a site with exactly that goal), the design should complement the primary content. Remember: nifty features and technologies can make things easier and enhance your content. Your content should still be the primary focus. After all, why did you create the site in the first place?

How are you designing your interfaces? Are you designing sites that only make sense to Web professionals who understand how sites ‘ought’ to work? Do you write for experienced Web users only, a tactic some experts suggest? Or are you going to design a site that fits the content like a glove, one that feels natural in a way that anyone can understand? Can you do both?

With those things in mind, let’s take a look at some ways of organizing Website content. This time, instead of looking at technology, look at how the sites organize and present the information they contain. Look for ideas to copy. But also look at how their designers have created unique solutions for their unique needs.

First, we’ll analyze the most common types: Hierarchy and Timeline. Then we’ll look at a barrel of less common ideas to see what we can learn from them.

The Hierarchy

Hierarchies work like outlines, with a few big differences. When I was in my early school years, I learned how to create outlines. I couldn’t stand them.

Outlines are great. They force us to squeeze a tree-shaped piece of information into a straight line. They provide a great way to debug the flow of lignear writing. Outlines also make us think about what we’re writing more than we might otherwise. They help us throw away the information we don’t need to include.
The outline does have some weak points. In an outline, the order of the information defines each item’s purpose and importance. Outlines make it hard to put equally important details on paper and still tie them together. Outlines help us relate ideas for a single persuasive or educational purpose. We can also throw away the outline and separate segments, like a dictionary or encyclopedia. But we can’t separate and relate ideas on paper easily. Outlines also force us to throw away information we don’t need. We often want to include that extra information in a Website. Outlines don’t enable this. They are purposely designed to limit us, so we can fit our ideas on paper.

Hierarchies are what outlines want to be. Sometimes the information we want to write about looks like a tree. A hierarchy lets us describe many pieces of information, yet keep them well organized. Hierarchies are easily created in hypertext.

SitePoint is a good example of a hierarchy Website. SitePoint has also used some interesting techniques to take the basic hierarchy to another level.

At the top level of SitePoint’s hierarchy are three areas of content: Articles, Our Books, and Forums.

This top level of hierarchy seperates out the different formats of content. If you select the “article” content format, the next two levels of hierarchy are displayed:

• Before You Code
  • Domain Names
  • Hosting
  • Site Planning
  • Legal Issues
  • Privacy and Trust
• Design and Layout
  • Usability and Information Architecture
  • Accessibility
  • Design Principles
  • Design Practice
  • Tips and Tricks
  • Software Tutorials
  • Flash

In this case, Before You Code and Design and Layout are the main categories. The other entries, like Domain Names or Accessibility, form the subcategories. Here’s where hypertext starts to show its power over the traditional outline. The traditional outline would have one paragraph or page for each item on the list. But with hypertext, we can do something that is impossible on paper.

Notice that each of these items is clickable. Each of these options brings up a listing of the final level of content: articles. Furthermore, hypertext content in Domain Names might show up in a listing of articles in Before You Code. This allows readers to take different paths to reach the same content. Even neater, SitePoint has organized their forums in a hierarchy that’s similar to the way they organize their articles. This lets them link to forum posts from article listings.

If SitePoint were a magazine, linking to the forums would be the equivalent of having thirty pages and three hundred page turns. Seeya later, Paper.

Because SitePoint is a collection of loosely connected articles, SitePoint’s hierarchy is primarily an index. However, there’s no reason you have to design your site that way. In fact, you can often give the user a better experience by making every page in the hierarchy contain useful information. One site I’ll mention several times during this article, ExplorePAHistory.com, uses this strategy. The index pages don’t feel like indexes because they contain interesting information about PA History.

ExplorePAHistory.com also solves the dangling ends problem experienced by SitePoint and other hierarchial sites. At SitePoint.com, when you finish reading an article, you’re at the end. You drill down through the hierarchy, read the article, and that’s it. You’re at the end of the line. You have to backtrack to find something else.

To solve this, many sites display links with related information. For example, SitePoint article pages autogenerate a list of related articles, books, or forums. ExplorePAHistory does something even smarter. On the last page of an article on the religious history of PA, they include a substitute for the “next page” link: the three magic words “Continue The Story…” This link lets the reader continue to read about the religious history of PA, but it seamlessly moves them onto a new article. True to its name, ExplorePAHistory includes little touches to give readers the impression of exploration. To be successful, this method requires every writer to cooperate.

The Timeline

Many sites organize their content by time. Most of these are blogs. Blogs started out as personal journals online, but now a blog can be almost anything. They share one trait, however: they are organized by date. Many blogs comment on current events or the comments of other blogs. Thus, the time of writing is the most important detail in most blogs. Because blogs must stay current, the front page is the most important page. Archival and later retrieval are less important.

Many blogs provide us with excellent examples of smooth hyperlinks within the flow of language. For many blog writers, writing with the enhanced features of hypertext comes as naturally as writing on a piece of paper. This is a good thing.

Combos: The Hierarchy Timeline

Many news sites use a combination of time and hierarchy. Some readers are interested in reading the latest news. Others are interested in a particular topic, like sports news or international news. For example, the BBC News site shows the latest news (time) as well as a number of news categories (hierarchy). It also has a section cataloging news reports by date.

Once you start to design complicated combinations like the BBC site, editing by hand becomes very difficult. You may need to use a dynamic content management system, but be careful. Pick one that fits your needs; don’t be distracted by bells and whistles.

Nifty Site Techniques

Now it’s time to look at some unusual site organization. While you may never have content that works with these methods, perhaps these sites will help you think about the awesome potential of hypertext. Perhaps some of the creativity will rub off and find its way into your own site.

Pure Hypertext: Wikis

Although Wikis are often used for knowledgebases and encyclopedia-type sites, they are extremely versatile. Unlike most content management systems, which concentrate on a SitePoint-like hierarchy, Wikis store site data in a loose hypertext database. Wikis are great open-ended systems for taking advantage of the full possibilities of hypertext. Some Wikis go wild and even allow any viewer to edit any page.

The Wiki Wiki Web, the original wiki, is an interesting social hypertext Website. By making it easy for anyone to edit any page, the people at the WikiWikiWeb have put together a fascinating collection of documents. The editors can easily undo any change made to the site, which guards against defacement. The content isn’t designed. Instead, it grows because many people collaborate to write all sorts of interesting things. One of these documents is a description of WhyWikiWorks.

Where do you start? One author on the site says, “I consider it a minor success for hyperism that we even ask the question. There are many ways to use these pages and therefore many places to start.” The site still offers other types of organization: a Category Page and a recent changes page. WikiWikiWeb content is nearly alive; where else would you find information about The Creativity Goblin, Good Thinking Music or Post-Scarcity in a Technological Society?

Do you want to play games? You can do it on a Wiki.

Many writers collaborate on Wikis. If you enjoy humor writing, you might find the humor on GreenCheese pretty funny. Of course, you never know what will happen to your identity when anyone can edit your personal info.

Some Wikis try a little harder to be organized. Wikipedia manages to provide tons of interesting information. The Wikipedia does the best job I have seen of demonstrating the power Wikis give us to organize our information well. Just reading the Wikipedia is a great lesson in the capabilities of hypertext.

Jorge Louis Borges and Random Order Content

Wikis organize pages by linking the relations of the ideas they contain. Why not make a site that displays content in a random order?

In a long-past literature class, I once read The Book of Sand, by Jorge Louis Borges, a writer who wrote extensively about hypertext without ever knowing about it. In The Book of Sand, a librarian encounters an infinite book. This story helped kick off my interest in writing. Much later, a site about The Book of Sand renewed my interest in studying hypertext.

The Book of Sand, a Hypertext Puzzle, by Maximus Clarke, makes a point about the flow of meaning by mixing up the pages of Borges’s story. Instead of displaying the story in order, he presents the pages independently and challenges the reader to guess their order.

If you have a philosophical bent, studying Borges is a good way to start thinking about the possibilities of hypertext without getting bogged down by technology. I highly recommend Clarke’s Book of Sands links.

Zarf’s Adventure Homepage

Let’s move from guessing to exploring. Zarfhome is just the personal Website of some guy named Andrew Plotkin. However, that guy just happens to be very creative when it comes to hypertext.

I found his site while looking for an ambient sound generator, but I liked the very clever way he organized his site. Since Andrew writes interactive fiction computer games, he organized his Website like a text adventure game. Other sites Andrew works on are equally clever. The Wunderland Toast Society organizes content with a matrix of author faces and names. The Dan & Eric Recipe Circle is equally interesting, and ties recipes with art.

There are probably thousands of interesting and creative personal Websites. I just happened to pick out Andrew Plotkin. Rather than creating a run-of-the-mill personal site, Andrew chose to create a Web experience for his readers. As a computer fiction writer, Andrew tries to hook the reader into reading more of his site. It worked on me; I went for a soundscape tool and ended up reading his recipe for figgy pudding. That takes skill.

ExplorePAHistory.com

So long as we’re thinking about molding an experience, let’s take a look at ExplorePAHistory.com. One of the best sites I have ever visited, ExplorePAHistory contains numerous examples of great hypertext authoring.

Exploration and Web Experience

So far, we’ve seen sites that organize little islands with airports. Even Wikis segment information into isolated nodes. Ted Nelson, who coined the term “hypertext” (20 years after Vannevar’s Memex), has often criticized the Web for this problem. With links, you don’t always know what you’re getting into, you have no idea what the next page will really be. Even with great sites, there’s still a bit of uncertainty. This uncertainty can sometimes be fun; I have laced this article with numerous incidental links to interesting sites. But it can feel awkward.

ExplorePAHistory has taken a different approach. Remember their “Continue The Story” link? This is one way they lead the reader on while maintaining the exploratory feel. Furthermore, the site enables real research and exploration. Every article contains links to information on historical places to visit. They link to every diary, every letter, every newspaper they use as a source; students can study the topic in more detail by clicking “original documents”. Videos and pictures are also easily accessible.

To make the exploration experience fit their users, they have different categories for teachers and students. If you look closely, you will also notice some icons in out-of-the-way places for those familiar with the site. These methods used by ExplorePAHistory accommodate both experienced Web users and new Web users.

Roadsign Organization

ExplorePAHistory also lets viewers navigate the site by roadsign. Since 1946, the state of Pennsylvania in the USA has been placing historical signs in places where interesting things happened or famous people lived. Since I live in Pennsylvania, I see them all the time.

It’s impossible to travel into Pennsylvania without seeing one of these signs.

Realizing this, the clever people at ExplorePAHistory used the ubiquitous signs as an organizational tool. It’s a perfect example of how hypertext can fit the unique needs of your Website content.
ExplorePAHistory.com contains a number of other interesting techniques, but I’ll let you explore them yourself. It’s time to run away from written text and take a peek at graphical hypertext.

Image Galleries

Now that we’re firmly entrenched in the visual, let’s look at sites that are more image-oriented. Keep your eye out for interesting ideas; some techniques popular in image sites may be useful in more text-oriented sites.

Most image galleries display images like the Google Image Search. They display a simple matrix of clickable thumbnails. Has anyone ever tried a clickable matrix of text content thumbnails?

The people at take a great approach to their photo gallery site. They don’t just throw a bunch of images together or pair a paragraph with each image. Instead, they write an overview of the area they photograph and include profuse links to the photos within the text of the article. I like the site; it provides great photos and interesting information in one nifty package.

Institute of Official Cheer

Looking at the slideshows in the Institute of Official Cheer has given me many laughs over the years. Lileks combines scans of old advertising and cookbooks with extremely funny commentary. Where else would you read the story of bread?

Lileks does a good job of combining text with his images into an online slideshow. He has a fun site which feels natural. This is odd, because he has broken one of the canon rules of Web design: index every page. Instead of creating a large hierarchial index of available content, Lileks forces you to read his content in sequence. It breaks the taboos, but it works very well. Remind me — why do we have those taboos?

For some sites, this might be a good taboo to break, in moderation. By making it so easy to find information, the hierarchial and timeline methods allow the reader to see less of your site. If you’re a business, you may want to take the opportunity to display a little bit about your company or clients before taking your visitors to pricing information. If your site is based on advertising, you might make more money by splitting things up a little more. Hypertext just gives the illusion of reader freedom. As the author of the hypertext, you can ultimately control how the reader goes through your site.

All right! Enough examples already! Tell us The Great Principle of Hypertext(tm)!

A Bucket of Questions and Ideas

While there is no magic solution for everyone, there is a bunch of unique, equally magical hypertext solutions for every individual need. While researching hypertext, I came up with many unanswered questions and interesting ideas. Here are some of them. I hope they get you thinking in a different way about your own site.

Hypertext Is Hard To Write

Hypertext requires more work than a good ‘ol paper document. Aaaarrrgh! To analyze your information, come up with a neat organization method, then write your content can take huge amounts of time. Furthermore, links let people choose their path through your site, and they will likely only see a small percentage of your total work.

Even finding and linking to external sites is difficult. It’s much easier to write a sentence than it is to (1) find a good Website to link to and (2) include it in the sentence. Challenges aside, writing good hypertext brings many rewards. You won’t regret the time you spend.

Remember: when writing on paper, you want the language to flow naturally. Make your Web writing the same way. Think in hypertext; become acquainted and attuned to the hypertext writing style. The payoff is worth the extra time it takes to learn.

The Importance of Context

I can’t stress this enough. It’s important not to have too many little islands of text that get thrown anywhere you need them. Many sites use this technique to save time. However, if you automatically display little blurbs of information in different contexts, the blurbs can feel out of place.

The same goes for pages. The more links that point to a single page, the more isolated the page will seem, because its context is uncertain. You don’t really know what the reader is thinking when they get to that page. For some information, like contact information, this is fine. For other content, it can be disastrous.

Having islands of content can separate sites by an ocean that doesn’t need to be there. Sites like ExplorePAHistory.com solve this problem. Preparing the context and customizing the content takes more time, but the end product turns out much better.

Hiding Information

After thinking about Interactive Fiction, and some other sites I’ve enjoyed, I realized that some sites can be improved by making information difficult to find.

Another popular site, HomestarRunner.com, contains a large number of hidden areas. Is the urge to make things obvious another taboo we can break in certain circumstances?
How about this taboo: “make links make sense.” Why? Is it possible to create a Web document whose primary organizational method is disconnect?

Catalog Hypertext or Hypertext Experience?

There seem to be two philosophies about site organization. Most people organize their site as an index, hierarchy, or timeline. Others try to form a Web experience across multiple pages. Don’t feel pushed into a false dilemma. You don’t have to choose between the two. Hypertext is an open-ended system with infinite possibilities. You can incorporate elements of both strategies. Or you can discard them both and try something new.

Conclusion

Hypertext is really nifty. I hope this article helps you realize the versatility and power it gives you. Now that you’re have some electronic caffeine and plenty of interesting examples, you can leave the limited world of paper.

Write for the Web. Embrace the possibilities of hypertext.