Caffeinate Your Hypertext

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.