Tips for Web Design

Abstract: This is a short collection of some of my recommended design strategies for webs. Not all are appropriate for all authors or all webs, but many should help you design better webs. I've tried not to overlap too much with Jakob Nielsen's Top Ten Mistakes of Web Design.

• Basics
• Navigation
• Intermediate Issues
• Layout Issues
• Advanced Techniques

Basics

Learn about HTML, even if you're using a WYSIWYG editor, such as Microsoft FrontPage.

• It helps you understand what is and is not possible.
• It makes it easier to correct or fine-tune pages.
• (Of course, I'd recommend against using a WYSIWYG editor, as they make it hard to follow many of these tips.)

Pick a "style" and stick to it

• It's difficult for readers to extract useful information if they have the cognitive overload of learning a new layout on each page.
• If your pages look similar, people may begin to identify them as yours. If you write/do good work, perhaps they'll even take the look of your pages to mean "this is good work".
• You may find it useful to develop a style guide to remind yourself of how you format your pages, or to help others build pages for your site.

Build small nodes for online viewing

• Experience shows that most readers best digest smaller chunks of information.
• Very few go on to the next screenful, even on long documents.
• Smaller nodes better support the hypertext ideal, as they can be used in many different paths/orders.
• Smaller nodes download more quickly.
• Smaller nodes give better results for search engines.

Provide a context for your pages

• A context describes where the page "resides" (the name and section of your web). It may also provide a next and previous link.
• Contexts help prevent your readers from getting "lost in hyperspace".
• Not everyone enters your pages from one of your links. Some enter through search engines, some through links someone has added to your pages, etc. etc. By providing some context, you help show readers where they are.
• Not everyone likes unguided exploration. You can use your context, along with next and previous links, to guide your readers through the page.

Rely on logical, not physical, design

• By relying on logical design, you best support a wide variety of information consumers, including those with different browsers, different platforms, different abilities, different intent, or different perspectives.

Navigation

Provide multiple paths through your site

• A primary design issue in hypertext is permitting readers to explore on their own.
• If your hypertext is really just a linear text, you've gained nothing by building a hypertext.

Provide a central path through your site so that readers need not wonder where to go next.

• Not all readers like unguided exploration
• Even those that do sometimes need a push in the right direction.

Provide navigational aids, such as a site map

• Many readers only need a particular page, but aren't sure how to find that page.

Provide a search facility

• This allows readers to find information without needing to follow a series of links or understand your site structure.
• It therefore support more general use of your site.
• It also makes it more important that pages show their context.

Intermediate Issues

Use the first few lines of each page to ground your reader

• (This is in addition to the context you already provide.)
• You might describe the intent of the page so that a reader can quickly decide whether or not the page is of interest.
• You might present a table of contents for the page so that the reader can navigate.

Name the principal components of your nodes

• Names allow other authors to link more precisely to pieces of your nodes.
• Names make it easier for you to create navigational aids, like tables of contents.

Always provide alternate text for your images (as well as alternate links for your imagemaps).

• Some of your readers may not be able to load images (or may prefer not to)
  • Some have slow links
  • Some are visually impaired
  • Some use text-only browsers (for example, the new PDA-based browsers are mostly text-based)

Use relative links instead of absolute links

• This will make it much easier to move your site to another machine or place.
• And even if you don't think that you'll have to, you will.

Choose informative and uniform names for pages

• Sometimes a reader will guess that you have a page, without knowing how it's linked into your web.
• If there are similar pages, the reader may be able to guess the name of the page.
• For example, my students know that class outlines are always in an Outlines directory, and are named outline.nn.html, where nn is the number of the class.
• File names based on dates also provide useful context, but may make reuse more difficult.

Layout Issues

Don't be afraid to use physical tags if they help the readability of your page.

• Tables can be used to better align objects (e.g., to put a table of contents at the left, rather than at the top).

Don't use frames unless you have a good reason to.

• Frames make it harder for people to link to your site.
• Frames don't work in all browsers (although that's changing).
• Jakob Nielsen provides more information on this in the December 1996 issue of Alertbox.

Test your page

• Not all browsers display the same page in the same way.
• Load your page in a variety of browsers (and platforms) to make sure it remains readable.
• Remember that not everyone has the same screen width or resolution.
• Try different settings within the same browser, such as different fonts and font sizes.

Use alternative text with your images

• Not everyone can view images.
• Make sure your site is navigable by those who don't use images.

Advanced Techniques

Join small nodes into large pages for offline printing

• It's annoying for your readers to have to print multiple pages when they need hardcopy.
• A number of tools, such as ASML and SiteWeaver, let you join small pages into one large page or format the same set of information in multiple ways.

Don't be afraid to break the rules

• Once you've developed a sense of how to write HTML and design pages, you will need to make your own set of tips.

Learn to Program

• Yes, this is somewhat facitious.
• But knowing a language like Perl or Java or JavaScript can help you automate many of the tasks for building good pages.

Learn Regular Expressions

• You will eventually need to do sophisticated updates to your pages.
• Regular expressions are a powerful language for pattern matching (and, usually, replacment)

Find appropriate tools

• The tools you use will depend on your task.
• I like to have an HTML checker handy.
• I use small programs to automatically generate tables of contents and convert small pieces of text to HTML.
• Even WYSIWYG editors have a place.

Read the hypertext and HTML literature

• Many researchers have documented good and bad design features
• Many educators have reported on successes and failures

This page written by Samuel A. Rebelsky.

This page generated on 57 by SamR's Site Suite.