15 Apr 2003; Dennis G. Jerz
19 Mar 2008 -- minor updates

Reading a list of guidelines will not provide you with nearly as much information as usability testing a prototype; nevertheless, the conventions described on this page will help you write and design useful web pages.

1. Lead with Your Best Stuff.  

Online readers are impatient; they will scan the page quickly and hit "go back" as soon as they get bored. Put your best stuff near the top of the page.

Do everything you can to prevent unimportant things from pushing your best stuff down the page.

• Shrink that huge logo, and put a drop quote or a "What's New" box in the recovered space.
• Cut the mission statement down to a single line -- save the rest of it for a separate "welcome" page. (The fourth or fortieth time your visitor returns to your website, how important will that mission statement be?)
• Begin each page with a summary of the contents. (Instead of "This page offers lots of really cool stuff," post a short list of the contents; let your visitor decide how "cool" it is.)
• If you are building an archive, insert the most recent items at the top of the list -- don't bury your freshest material at the bottom of the page.

2. Inform with Meaningful Links

	To learn about Rainbow Hector, click here.
	Visually impaired web users frequently scan web pages by instructing their computer to read aloud all hyperlinks. Sighted readers assess web pages in much the same way. Since web visitors decide in a matter of seconds whether your page is worth reading, when you choose bland, content-neutral words for your hyperlinks, you miss an important opportunity to communicate.
	Somebody tell me, who is Rainbow Hector?
	In this case, the linked words suggest what will be at the other end of the link, which helps the reader decide whether to click.

Another way to make your links informative is to follow them with a blurb.

Blurbs: Writing Previews of Web Pages
A blurb is a short paragraph that previews what's on the other end of a link. You're reading a blurb now. If it helps you decide whether you should click the link, then it has done its job.

3. Employ Consistent Navigation

• Put a "Home" link in the upper left corner of every page.
• If your site has more than six or eight pages, you probably don't need a link from every page to every other page.
  • Instead, group your pages according to function (an archive, a marketing page, a catalog, a membership directory, etc.).
  • Give each main section its own local table of contents.
• On every page, provide links to the main sections of your site.

See: "Navigation: An often neglected component of web authorship"

4. Prefer Simple Designs

Because I am a writing teacher, not a web designer or programmer, my expertise lies in using words. I often see students who go overboard with fancy typefaces, their favorite garish colors, and whatever distracting little JavaScript menu or Flash slideshow application they're very proud to have figured out.

While a fancy site may look impressive when you present it in class or for your client, the people who will actually use your site (perhaps via a dodgy WiFi connection or an expensive pay-per-byte telephone plan) don't really care about your spinning logos or the sound effects that play when you move your cursor over the buttons.

• Dancing Things Suck. The more blinking and shimmering images on your page, the harder your reader will have to work in order to find anything worthwhile. Many users have trained themselves to ignore blinking and shimmering ads, so they will tune out the content you are trying to emphasize.
• Frames Suck. Frames make it harder for other webmasters to link to specific pages within your site, which means fewer people will recommend your page on their own websites. Don't use frames just because you can.
• Use Multimedia Sparingly. Each graphic or Flash animation you put on your site slows it down -- sometimes a little, sometimes a lot.
  • Don't force your reader to look at a blank screen while a big multimedia file loads. (At least have some plain text links so a reader dialing in on a slow or expensive connection can skip the animation.)
  • Usability expert Jakob Nielsen says: "Every Web usability study I have conducted since 1994 has shown the same thing: users beg us to speed up page downloads. In the beginning, my reaction was along the lines of 'let's just give them better design and they will be happy to wait for it'. I have since become a reformed sinner..."
• Because images download slowly, keep each one no bigger than a playing card.
  • Your visitor can click a link to download the full-sized versions of those images that are really interesting.
  • For large collections of images, use postage-stamp-sized thumbnails.

  (Use a photo editing tool to reduce the number of pixels or increase the compression rate of your thumbnails -- simply dragging its corners to shrinking its appearance in your web editor will not reduce the size of the file.)

If the visitors to your website find the information they're looking for, they won't care that the site can't compete visually with a professionally-designed masterpiece. I have seen many students spend far too much time designing a document in Microsoft Word, and then copy-pasting the text into a web editor, and then wrestling to try to make the web version look exactly like the print version.

Why is it a bad idea to design a web page with Microsoft Word?

A printed document has fixed dimensions, but a web page has to be effective when viewed on multiple different monitors, ranging from huge flatscreen monitors to tiny PDA screens... so arranging a document so that it looks perfect on your own monitor may create a horribly disjointed document for everyone else.

As you may have deduced from the content of my website, I am hopelessly biased in favor of the written word. Still, the dot-com meltdown proved that pouring hundreds of thousands of dollars into fancy design is no replacement for good content.

5. Write Scannable Text

Provide meaningful subheadings, bulleted lists, and bold keywords; write meaningful links.

Conventional print prose is designed for sequential readers who will start at the beginning and move sequentially to the end. Such writing develops extended ideas via a series of good paragraphs joined by transitions. Each sentence helps to build the paragraph; each paragraph supports the chapter; each chapter drives the book towards its conclusion.

Online text, on the other hand, relies upon smaller chunks of text, which the reader may or may not encounter in order. Each page of a website must make sense to a reader who bypassed the home page.

18 Mar 2008 -- minor updates