Art and the Zen of Web Sites

"Everything you know is wrong."
> Inside Macintosh, 1984

"Web publishing is no more about HTML than book publishing is about type fonts."
> Henri de Toulouse-LaTech

"In building your web site, demonstrate your creativity by showing interesting images, saying interesting things, and making it a nice place to visit."
> Vincent van Gui

"Hyperlinks are the GOTOs of the '90s."
> Henri de Toulouse-LaTech

"Where were you when the page was blank?"
> Truman Capote

What is web publishing?

Putting together a web site is a unique blend of publishing, user interface design, and technology.

The three main activities of visiting a web site are reading text, viewing images, and interacting with its interface.

Web publishing is >not< an opportunity to show off your technical prowess. Use the technical aspect to support and enhance, but don't let it overpower the other aspects of your work.

Web publishing depends on an understanding of Internet science, the same way that cooking requires an understanding of food science. But when gourmets meet, they discuss the great chefs, not the great food scientists.

Is the goal to entertain, to provide information or graphics, or to provide some unique service such as an index or database? Or, perhaps, it's something completely new.

If it's for a business, are you trying to attract new customers, give information about products and services, do market research, provide customer support?

How does the design and implementation of your web site support your goals?

Give a lot of thought to the roadmap of your site and how its different elements are linked. How is this navigational information conveyed to the user?

Could someone, after visiting your site, draw a simple diagram showing how the different elements are connected and how you get from one place to another?

How does a visitor figure out all of the things they can see or do at your site?

How does a visitor figure out how to navigate your particular site?

How can the visitor tell if they have seen everything?

How can a visitor tell what they have and have not seen?

Make it easy for a visitor to determine what is new and when things were changed.

A site that is difficult to navigate will also be difficult to maintain.

Complexity will limit the size of your site.

Complexity will make it difficult to test your site.

Make it large enough to require more than one visit to view the entire site. But make it easy to remember what the visitor has already seen.

Change it often. But make it easy for the visitor to figure out what was changed, and when.

Make it a source of reference material - a list, index, database. Perhaps allowing the user to search it for a particular topic or item.

If your site is a commercial site, there are some special considerations. For instance, you may find that 90% of your potential customers are using the Prodigy or the AOL web browser. They are also the ones most likely to print out your pages for later reference.

The people with money to spend do not have time to fool with getting a SLIP or PPP connection running, and they don't have time to get and tune the latest version of Netscape.

They will most likely be using browsers that are integrated into a full-featured online service that provides a single package with news, stock portfolio tracking, and a seamless interface to the Internet and the web.

The real point is that if you have a commercial web site, you can keep Netscape around for testing, but make sure it also works with whatever browser is provided by Prodigy, AOL, and Compuserve.

Remember that there are great variations in the the computer platform, display setup, processor and disk speed, connection speed, and the particular browser software being used by each individual visitor to your web site.

There will be a great variation in how your site looks to different users if you rely on fancy HTML tricks and commands.

There will be a great variation in how your site looks to different users even if you don't use fancy HTML tricks and commands.

You have to decide whether the goal of your site is to impress the 'in crowd' with your technical razzle-dazzle, or to make it a site for the enjoyment of everyone. (Note: the 'in crowd' is usually very small.)

Don't create a site that only a small percentage of your visitors can view properly.

You are going to lose a lot of points if you mention Netscape, in any way, on the first page that your visitors see. (Unless of course, you're a Netscape employee.) This includes describing your site as "Netscape-enhanced," telling your visitors that your site is only presentable if they have the latest version of Netscape, or pointing to a site where they can download the latest version of Netscape. Think of the message that it sends about you and your site.

Remember that the major online services have over 8 million paying customers. Very soon, most of them will have web browsers, but they won't be the very, very latest version of Netscape. Your pages may look very strange to them.

How does your site look with Lynx? Try it to see how your site looks with a text-only viewer. This is the only viewer that the typical Unix user will have. If your site is mainly informational, don't deny access to these potential visitors.

Consider the signal-to-noise ratio of your interface. How much is useful and interesting, and how much is just noise?

Remember that browsers have a lot of user-configurable features -- colors, fonts,etc. These can really mess up your fancy interface.

Don't make the user guess where to click.

Be very careful in using graphic elements as controls. The user has to guess what to do.

Try not to have two or more places to click that perform the same action.

Use a white background. Try to set the background color to white using BODY BGCOLOR="#ffffff".

Don't forget that link tags show up in different colors than regular text, and may change color after a link is viewed. Consider how these tags will show up against a colored background. (And remember that these colors will be different on different browsers and can also be changed by the user.)

You can use a shade of gray as a background if you are not displaying text against it. Use as light a shade as possible.

Avoid imagemaps unless there is a really good reason for using them.

Don't use interlaced GIFs. These give the effect of the image being continuously redrawn at a higher and higher resolution. The effect is annoying and it's hard to tell when the picture is actually ready to be viewed. It's especially annoying when used to render artwork. It's also annoying when the the web is slow and the image sits half-rendered for a period of time. -- It's just another special effect that will soon be boring.

Don't use an image compression technique that isn't supported by all browsers. At the present time, GIF is not the best method, but it is the right one. (Choosy web site builders choose GIF.)

Keep the interface uniform. Have the same controls perform the same action everywhere.

Don't use a colored, textured, or graphic background unless absolutely necessary.

Use color to convey information.

Displaying images against anything but a plain background may cause them to be rendered incorrectly by the browser. And it may make it difficult for a visitor to view them.

Use the "CENTER" command for displaying graphics.

Don't blink anything unless it's to indicate an emergency such as a life hazard. It annoys the hell out of some people.

Don't use tricky (or undocumented) HTML to do dissolves or fades. They look different on every machine. And after a while, they can get downright annoying.

One way to get a precise block of type, such as a name and address, to appear correctly in every browser is to render the type in an art program, then save it as an image (GIF) file. If done properly, a name-and-address block, including email and web addresses, should be about 2K bytes. This can actually be more efficient than using text if the name and address appears on several pages.

Don't change any of the type colors -- either for displayed text or for links. It only disorients the user.

You can set the display type, normally black, to a shade of gray. But not too light.

Don't replace bullets and horizontal rules with images. It eats bandwidth and confuses the user.

Keep your home/main page small so that it loads quickly -- under 15 seconds. (Especially important when the web slows down.) This will hook the visitor. Remember that yours is only one of millions of sites -- websurfers have short attention spans.

What do the pages on your site look like when they are printed out?

You might want hard copy because it makes it easier to design and edit your pages. Just like an advertising layout

It gives co-workers and customers a way to view and comment on your pages.

You can build a portfolio of your work to use in sales presentations or for advertising.

Your visitors can print out a hard copy of information on your site for later reference.

If you have a lot of browser-specific code, such as textured or graphic backgrounds, these may not print out.

If your page has a black or colored background, it may not print properly.

Test your pages with several viewers. You will be amazed at the variation in interpreting even the simplest HTML tags.

Make sure you try your pages with at least one of the viewers provided by a major online service such as Prodigy.

Test all your pages after making even trivial changes to your site to make sure you haven't broken something.

Have other people test your web site.

Pay attention when someone tells you they had trouble viewing your site. For every person who takes the time and trouble to write to you, there are many more who will give up in frustration.

The easiest way to learn HTML is by studying the source from other people's pages. Most browsers will get the HTML source for the page you're looking at. It's also a good way to learn what makes bad pages bad.

Be careful about using new or specialized HTML features. They may not be upward compatible with the newer browsers or new versions of HTML.

Use the absolutely smallest set of HTML that will do the job. Make this something you can brag about, rather than how you mastered the fancy commands.

Don't use undocumented HTML effects to do things such as dissolves or fades. This may stop working in the next release of the particular browser you're designing it for, and my cause some other browsers to function incorrectly.

Never forget that HTML is not a page description language or page formatting language. It is for displaying information and graphics, and for interacting with the user.

Use as many defaults as possible, Override them only when necessary, such as to set the background color to white, or to center an image.

Format your HTML documents so that they are easy to read. Use blank lines and spaces to separate elements.

Consider building high level tools to support and maintain your web site. One example would be a "gallery editor" with a graphical interface that lets you lay out galleries or catalogs by dragging images around, then automatically generates the HTML.

Consider using automated maintenance to build and maintain your HTML pages.

Create a set of uniform formats and styles for your pages so that you can create a new page by copying and modifying an existing page.

Don't be a Netscape bigot. Who knows what tomorrow will bring.

Tony Karp, TLC Systems Corp 
 - tkarp@tlc-systems.com  Send me email
 - tkarp@interport.net

Our web sites:
 Techno-Impressionist gallery: 
                 TLC Systems: 
 FTP site:                     ftp://ftp.tlc-systems.com/pub/tkarp


Last modified December 3, 1995