[The old index page, somewhat more general than this one, is archived here.]
This page anticipates a style of Web design that I hope to see a lot of a few years from now, that I'll call 'content-centered Web design'. I've been working it out using James Joyce as the test topic. [more]
The defining goal of this style is to deliver the best possible response to search-engine queries on a given topic, taking into account the widest range of motives for those searches. So no matter what a person wants to know about a topic, if your page comes up in their search-results you want to give them the best possible answer, or guide them to where they can find it.
The primary strategy for achieving this goal is to exhaustively and continuously scour the Web for available resources on the topic, and link them all.
The most difficult challenge here is to keep those links well-organised and clearly labelled.
The early years of the Web were dominated by 'hotlist' pages consisting solely of lists of links to cool sites, usually sorted into categories, often labelled only with the title each site gave itself.
The content-centered philosophy demands instead that, ideally, such links be to specific pages (instead of whole sites), with clear descriptions of the resource being offered, and most importantly with the links being embedded in a faq-like prose overview of the topic.
Text buttons
Because the number of pages linked will inevitably grow huge, it's important to learn to keep your link-descriptions concise. But since your prose overview will be touching on all important aspects of the topic, you can usually reduce each link to a one-word text button [dummy] that still supplies adequate description.
The first law of linktext is that it needs to provide enough information to allow you to make an intelligent choice, to follow it or not. Anytime you follow a link and are disappointed by what you find, that link has been inadequately labelled. (I call these 'gotcha' links.)
Most often, currently, this disappointment is a simple case of not describing the type of page being linked. How many times have you followed a link, expecting to find the text of an online book, and instead found an advertisement trying to sell the book (or maybe a review of it)?
Text-buttons resolve this by promoting a vocabulary of standard page-types: [etext] [review] [buy] [pix] [map] [links] [download] [RealAudio] [midi] [timeline] [biog] etc
When you've accumulated many links of one type-- eg: "[review] [review] [review] [review] [review]"-- you should ask what differentiates them, and relabel them like: "Reviews: [rave] [pan] [Ebert] [old] [long]" or whatever.
These strategies make possible all-in-one 'portal pages' like these: James Joyce, Thomas Pynchon from which you can jump to any useful page in a single click.
Exhaustive links
Your page should start being useful from the very first draft, so there's no serious penalty in developing it 'live' online.
My recommended starting place, though, is the Copernic search utility, shareware that will automatically sort out 1000 top links for any given search pattern, using multiple online search engines. [more]
Before running Copernic, it's probably good to think out a general plan of what you want to cover, because what Copernic delivers may suggest a very different emphasis, and you shouldn't let its prejudices (that is, the prejudices of Web authors as a group) define your priorities.
You do want to build around what's available, though, so after you've surveyed it you should compare the 'Copernic emphases' with your original ideas, and aim for some compromise.
Because you'll be offering hundreds of links to others' sites, expired links (404s) will be an ongoing problem. My hope is that a service like Atomz.com will eventually offer custom search for individual portal-pages, indexing all and only those pages directly linked from a given page, and checking every few weeks which links have expired.
Prose overview
Organising the prose overview can be very diffcult.
Starting with a timeline is probably easiest. As you go thru Copernic's 1000 hits, sort as many as possible into the timeline structure. Example: Joni Mitchell
Notice where this causes good links to fade into invisibility, and look for ways to duplicate them elsewhere with better emphasis. Don't worry about redundancy! Redundancy is good in this case. Feel free to repeat a link in every category where it might be useful.
When you run across a good quote or other tidbit, 'promote' it onto your own page (with a link to the source, of course).
Besides the simple timeline, other organizing principles include best-first and newest-first. [more]
You'll eventually want at least one page (or subpage) arranged in a newest-first, weblog format, for tracking fresh news items and/or new changes to your site. Again, there's no penalty for starting this right away, or at least planning for it right away.
Breakaway pages
You should also expect that you'll continually be creating new pages to cover specialized subtopics.
You may see these emerge first as heterogeneous clusters of links that need to be given room to expand and discover their own internal order.
Since your domain is really the entire universe of knowledge as seen from the point-of-view of your special topic, you may ultimately expect to have a whole encyclopedia, built page-by-page as required to index all the related-topic links you uncover.
One way to think of this is to picture the index in the back of a large textbook on your topic-- hundreds of index-entries, each with one or more page citations. Then imagine that each index-entry will get a webpage of its own, that integrates all the info from the cited pages. And entries with lots of page-cites should probably be the first to get their own, broken-away pages.
Special-topic pages
Other pages will come into being 'from the bottom up', answering a special need but not immediately related to your main pages on the topic.
News and magazine sites consist entirely of these-- very rarely do you see any effort to integrate separate articles into 'encyclopedic' overviews (though this must happen eventually).
Until you see how they fit into the bigger picture, the simplest way to link them is just on your weblog page.
Page design
How you lay out the page-- especially whitespace and emphasized text-- has a huge influence on readability (and scannability).
This is not about tagging semantic components and letting stylesheets do the rest!
It's about learning to detach from your ego and see the page as others will see it.
Content-centered design should steer clear of anything fancy (tables and graphic elements, especially), because they'll just obscure the real lessons to be learned.
Someday, maybe, your design may be stable enough to 'prettify', but I wouldn't hold my breath.
And by all means avoid tricks that take away the reader's sense of control, that slow down page display, or that reduce readability for users with non-standard browsers. [more]
Headers
The HTML 'title' element has a very different function from the other headings on your page-- it should be optimised to work effectively when buried deep in a bookmarks menu. Very short and to the point, and self-explanatory even if the page has only been visited once, even years back.
The headline/title at the top of the page can be completely obscure, but if you want good search-engine rankings it's wise to include the main keywords in the title. (I spell out 'James Joyce' in most titles instead of abbreviating to 'Joyce' for this reason.)
Because people may arrive at any of your pages via an outside link, you should include your byline so they know who they're dealing with. You should include some indication of when the page was last updated (a drag to maintain, but really important).
At the top of each page you should offer at least one 'up' button that will show the context of the page, from a site-wide point-of-view.
If the page is a continuation from another page, you must link that page with a 'previous' or 'prior' button at the top. (In some cases the prev-button may include a name-anchor #-extension that will load the earlier chapter and then jump to the bottom, eg if you expect people to be scrolling backwards thru the full text.)
If you can anticipate any other sorts of confusion or disappointment visitors will feel when facing your page for the first time, be sure to address them immediately, and offer links if they'll be helpful.
Footers
If someone reads all the way to the bottom of your page, you should be grateful and try to reward them with a handful of related links you think they may also like. You definitely do not want to force them to go back to some menu-page they just came from (though you should include it as one option).
The fact that they've reached the bottom means you can guess quite a lot about their interests and temperament, and if you don't lay out your best followups in an attractive manner, you're wasting a splendid opportunity.
Philip Greenspun magnanimously offers a free service [signup] that allows you to put a feedback box at the bottom of any page. 'View Source' on this page to see the format:
If you don't want to go this route, at least include your email address for feedback.
Pagelength
Jakob Nielsen [qv] is a dangerous narcissist and should be publicly spanked!
He's been saying for years that pages should be kept short-- ideally just one screen-- because people don't scroll. What a moron!
People do scroll, of course, and are much more likely to at least scan the full article if it's all on one page. The limiting factor is how long it takes the page to load, but if you don't use TABLEs in ways that delay rendering, the text at the top should display right away, so pages with 100k of text are not unacceptable. [more]
Color
Black letters on a white background are so safe they're sorry!
Color was necessarily expensive in the world of paper and ink, but in HTML it's free, so we need to learn to use it effectively.
I recommend very light background shades, black text, and carefully-chosen link-colors to look good against your chosen background.
I suspect that colored text will also replace bold and italic in many circumstances, because neither bold nor italic is reliably readable on a wide range of platforms.
Special topics:
surfing-skills :
url-hacking :
open content :
semantics :
pagelength :
linktext :
startpages :
bookmarklets :
weblogging :
colors :
autobiographical pages :
thumbnail-graphics :
web-video :
timeline of hypertext
Anti-XML/W3C/etc:
structure-myth :
page-parsing :
firstcut-parser :
html-history :
semantic web
Design prototypes:
topical portal :
dense-content faq :
annotated lit :
random-access lit-summary :
poetry sampler :
gossipy history :
author-resources :
hyperlinked-timeline :
horizontal-timeslice :
web-dossier
Website-resource pages:
RobotWisdom.com :
Altavista.com :
1911encyclopedia.com :
Google.com :
IMDb.com :
Perseus.org :
Salon.com :
Yahoo.com
Older stuff:
design-lab :
design-checklist :
HyperTerrorist :
design-theory :
design cog-sci
Hosting provided by instinct.org. Content may be copied under Open Web Content License.