"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

"Colored or textured backgrounds, weirdly colored text or links, and a preoccupation with appearance over content are sure signs of a 'first generation' web site." 
  > Pablo PigCasso

"Although art can be created with a chainsaw, this is hardly  a justification for giving every would-be artist a chainsaw."
  > Vincent van Gui, - commenting on some of the newer "extensions" to HTML

"In a successful advertisement it's the graphics that grab you,  but it's the text that does the selling." 
  > Pablo PigCasso

"Before you put a really dark background on your web page, ask yourself this: 
Why is it so much harder to drive at night than in the daytime?" 
  > Henri de Toulouse-LaTech

"Hyperlinks are the GOTOs of the '90s." 
  > Vincent van Gui

"Use the defaults, Luke. Use the defaults." 
  > Obi-Web Kenobi

 

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 is >not< an opportunity to show off your graphic arts skills. Use the graphical aspect to support and enhance, but don't let it overpower the other aspects of your work. A web page is >not< the same as a magazine page, or a newspaper page, or a TV show, or any other existing form of communication. Compared to them, the web is very limited in what you can show. It would take hours to transmit the equivalent of one high-quality, full color magazine page across the web. And it will be a long time before the web can handle the kind of sound and motion you see on TV. "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." > Henri de Toulouse-LaTech

What are the goals of your site?

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, or provide customer support? How does the design and implementation of your web site support your goals?

For commercial sites

If your site is a commercial site, most of the people who visit it will be there to get some sort of information. They won't be there for "a total web experience," or to be entertained, or for the thrill of visiting a "killer web site." They'll want to know things like:  "What models are available and what do they cost?" "What are the features of your products and services?" "How can I contact your company?" "Where can I buy your products?" "Do you have any new products or services?" "How can I get the widget I bought from your company to work properly?" "I want to see financial reports and other info." "Do you have any employment opportunities?"  A commercial web site will become an important adjunct to your company and, in some cases, it will be the main way in which your customers and others interact with you in the future. When the web was young, many companies wanted to "establish a web presence" so they turned to graphic arts shops, advertising agencies, and the new crop of web design firms that were hanging out their shingles. Although these firms had a good background in graphic arts, most had little experience in the many aspects of creating web sites. They over-emphasized the graphics aspect and tried to entertain in the same way as print ads or TV commercials. However, an effective web site needs a lot more than this. It should start with a requirements definition that evaluates the real needs of the company and how they can best be served through the web. This should be followed by a careful design and planning stage. The next phase is to build and test the site. But, unlike a print ad or a TV commercial, a web site needs constant updating and maintenance to evolve and stay current. A lot of sites are designed in a way that made this difficult. You also have to consider the operations aspects of the site, such as guaranteeing response time and availability. Few recognized the need for web site statistics, so they didn't include them in the original plan, or design them into the site so they would give effective information. If your company is going to go to the trouble, effort, and expense of building a corporate web site, you should consider engaging the services of a systems architect before you contact the graphics companies or hire those Java programmers. An architect will plan your site as a system designed to meet your corporate goals, rather than just a bunch of interconnected HTML pages. But what if you have a small company, like a plumber or an electrician, and most of your business is done locally? In this case, you might get more for your money by investing in a bigger ad in the Yellow pages. "People don't go to the FedEx web site to be entertained any more than they go to a FedEx office to be entertained."  > Henri de Toulouse-LaTech

Intranets (Client/Surfer)

An Intranet is a privately-owned version of the Internet. Big corporations and other organizations create Intranets to do things like distributing information to corporate employees and customers. Access is restricted. Even if an Intranet is connected to the Internet (so that the company's employees can access the web), it's closed to the outside world. (You can see out, but not in.) Since an Intranet is secure from the outside world, there is less danger from hackers, viruses, and rogue applets in Java or Javascript. If you have an Intranet, you may have options that most web designers lack. The reason is that the company that owns a particular Intranet can dictate the hardware, software, and connectivity everywhere in the network. The company that owns an Intranet has total control over the entire web environment -- from the web server, right down to the browser that will be used on the PCs. This control allows a company to enforce a uniformity that can have many benefits. Unlike the traditional web site designer who must contend with a bewildering array of software, hardware, and many other factors from a universe of possible visitors, the designer of an Intranet web site can target a small and precise range, well-defined in advance. This will greatly simplify the design and testing of the web site. For instance, you can use browser-specific features because you know which browser your visitors will be using. Another benefit of Intranets is the freedom to use leading-edge technologies such as Java, ActiveX, "push," and a wide variety of plug-ins that add functionality to the browser. The tightly-controlled environment of an Intranet eliminates many of the problems that would be encountered in deploying these technologies in the widely diverse environment of the Internet. In addition, there may actually be a real need for web-based applications that rely on these new technologies. They can bring Intranet-based applications closer in functionality to those found in a traditional LAN-based client/server environment.

Make your site easy to navigate

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? If someone comes to your site looking for a specific piece of information, how easy is it to locate it? 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.

Some ways to generate repeat visits to 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 your site often. But make it easy for the visitor to figure out what was changed, and when. Make your site a source of reference material - a list, an index, a database. Perhaps allowing the user to search it for a particular topic or item. Make your site the authoritative source on a particular subject.

In the world of the web, every visitor is different

Remember that there are great variations in 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. And the visitors themselves will be different, in every conceivable way. Don't assume that every visitor to your site has the latest hardware and software, a super-speed connection to the Internet, and the eyesight and reflexes of a fifteen year old. 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. As a result of heavy Internet traffic, web pages bloated with gratuitous graphics, older hardware or software, a fair number of folks are surfing the web with the graphics turned off in their browsers. What does your site look like without its graphics? You are going to lose a lot of points if you mention Netscape (or Microsoft), 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. How does your site look with Lynx? Try it and you'll see how your site looks with a text-only viewer. This may be the only viewer that a Unix user will have, especially in foreign countries. If your site is mainly informational, don't deny access to these potential visitors. And you had better prepare yourself for the invasion of the surfers who will reach your site through add-ons to their TV set, cable box, or plug-in for their game playing machine. These new widgets will have limited capabilities, very much like the earlier versions of the more popular browsers. The major online services have well over 10 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. 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 (when they hear the word "upgrade," they most likely think of moving to the First Class section). 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 AOL, Compuserve, and Prodigy.

The user interface

When the Macintosh first came out, Apple published a set of user interface guidelines for software developers. Some developers felt that having to adhere to a standardized interface would hamper their creativity. But others realized that it would actually free them to spend more time applying their creativity to step up to the next level of application design. Consider the signal-to-noise ratio of your interface. How much is useful and interesting, and how much is just noise? Avoid using large or gratuitous graphics that don't add to the content of the page. 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. Don't replace bullets and horizontal rules with images. It eats bandwidth and confuses the user. If you use images as bullets, your visitors may try clicking on them and wonder why nothing happens. Be very careful in using graphic elements as controls (buttons, links, etc). The user has to guess what to do. Try not to have two or more places to click that perform the same action. Don't use the "underline" attribute for text. It makes it look like a clickable link. Find out what your visitors do most often at your site and make that the easiest thing to do. If you're an overnight delivery service and 90% of your visitors are there to track a package, have a big button that says "Track your package." This is a good rule to follow when determining the size and placement of interface elements. For some reason, most browsers default to a background color of gray. The easiest way to fix this is to override the browser's default. Use a white background. Set the background color to white using BODY BGCOLOR="#ffffff". Don't forget that links show up in different colors than regular text, and may change color after a link is viewed. Consider how these links 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. Keep the interface uniform. Have the same controls perform the same action everywhere. Avoid putting too many interface elements on the same page. Some sites present the visitor with a bewildering array of image maps, buttons, text links, and images to click on. The effect can be overwhelming Don't use colored, textured, or graphic backgrounds unless absolutely necessary. They may look fine in your browser, but could end up looking quite different in someone else's browser, or on a computer with different video hardware, color depth, etc. They're distracting, and they really do make text hard to read. Another problem with backgrounds is that they are handled differently by different browsers. On some, your page is first displayed, and then, after some delay, the background suddenly shows up, like a layer of smog descending on the page. With other browsers, you sit and watch a blank page until the background has been downloaded. 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. There's a reason that most museums and most art books display their images against a simple background. Don't blink anything unless it's to indicate an emergency such as a life hazard. It's distracting, and it annoys the hell out of some people. Try to read something over here while something over there is blinking. Don't use tricky (or undocumented) HTML to do dissolves or fades or other special effects. They look different on every machine. And after a while, they can get downright annoying. And they may stop working (or work strangely) on different browsers or on new releases of your current browser. Don't have something that, when clicked on, takes the visitor back to the page they're already on. Disorienting. This is common on sites where every page has links to every page. 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. (But don't forget to include a text alternate.) You can set large (headline) type, normally black, to a shade of gray. But not too light. Don't change any of the type colors -- either for displayed text or for links. It only disorients the user. In general, try and keep the user interface simple and uncluttered. Try and use default values whenever possible. "If you really believe that it's okay to change the meaning of interface elements, then it's a good thing you're designing web pages and not airplane cockpits." > Vincent Van Gui

The little red light

Every web browser has one. It's a little indicator that turns red when the browser starts to load a page. After all the items on the page have been downloaded successfully, the little red light turns off. This is especially useful when the web is slow, or when the page is complex. It lets you know when you actually have everything. A very useful element of the browser's interface. Unfortunately, there are a number of widgets (like animated images) that you can add to your page that keep the red light from working properly. The one most often encountered is the animated GIF. With one of these widgets on your page the little red light never goes out. And, as a result, it looks like your page is still loading, even though it may actually have finished. Now the visitor has lost the use of part of the browser's interface, and has to guess whether the page is complete. Or perhaps wait for the rest of it. Or perhaps give up and move on. Hint: If the little red light doesn't go out after your page has loaded, it's a sign that there's something on your page that will annoy people. This may seem like a triviality ("Hey, my animated mailbox icon is more important than some dinky red light."), but you aren't doing any favors for your visitors. "For those of you who feel that it's all right to change the meaning of that little red indicator: May your car's gas gauge stop working tomorrow." > Vincent Van Gui

Use color wisely

Use color to convey information or to draw attention to where it's really needed. The standard web interface uses this principle by displaying the hypertext links to other pages in colors that stand out from the rest of the text. In addition, different colors are used to show which links have been visited and which haven't. So strong are these clues, that you can look at a web page and tell a lot about it without reading the text. It's also a good reason for leaving the text and links in their default colors. Your visitors will have seen hundreds of pages with the text and links in their default colors and will take advantage of this conditioning by being able to navigate a new site without having to constantly relearn the interface. It's obvious that if you change the color of the links on your site, or use an imagemap, much of the possible information will be lost to the visitor and your site will be more difficult to navigate. Here's another example. If you have a form on one of your pages, there will probably be certain items which are required, and some which are optional. Try putting a red asterisk next to each item that the user must set. This will be a great help in filling out the form since you can instantly tell if it's been completed to the point where it won't produce an error message.  Remember, also, that some of your visitors are color blind. At its worst, colors are varying shades of gray. Colored text against a colored background could show up as a gray smudge. Take this into account when you design your pages. Other visitors, with less-than-perfect vision, may have trouble viewing images and text with strongly contrasting colors (like red text on a blue background). Don't make your page so that it can only be viewed by teenagers.

Imagemaps

Avoid putting imagemaps on your pages unless you have a really good reason for using them. Fancy imagemaps can be far more confusing than a well-formatted text list or a simple set of buttons. In many cases, it's hard to tell just where to click. This is especially true it the map contains both images and words. And since the words are not underlined, it's hard to tell if they're links. Imagemaps take up a lot of bandwidth and, in most cases, add nothing to your page. If you use a large imagemap, your visitors may have to wait for well over a minute before they can begin to navigate your site. Unlike regular text links, which change color after being clicked on, imagemaps give no clue about what's been seen and what hasn't. This makes it more difficult for the user to navigate your site. Imagemaps limit you to a very simple site. It's difficult to include more than a few items in the map, especially if you are including both icons and text in the map. The time and effort it takes to modify both the image and the map make the use of imagemaps a real maintenance headache. It will take far longer to update or change your site if it means modifying the imagemaps as well. This is especially true if you have used imagemaps on many of your pages. If you use an imagemap, make sure that you include a text list with identical items for those who are confused by your map or are using a browser where images are not being loaded. Locate this alternative list as close to the imagemap as possible to avoid confusion. Make sure that the list contains all the items on the map, and that they are in the same order. If your imagemap is a figure that depicts something real, like a map of the United States, don't assume that your visitors will be able to identify things (Which one is Nevada?) solely by their shape or location. Also, make sure that your imagemap gives some sort of a warning if the visitor clicks in an area that doesn't relate to anything or isn't defined in the map's table. (What happens if the visitor clicks in the ocean, next to California?)

Your page's title

Don't forget to put a title on every one of your web pages. The title is what shows up at the top of the browser's window when a page is displayed. If your page doesn't have a title, the browser will display "Untitled," or "No Title, " or simply the URL of the page, or perhaps nothing. The title is important. If someone bookmarks your page, the title is what shows up in their list of bookmarks. Or, if someone puts a link to your site on their page, they'll probably use your page title as the link text. Or, if the page is indexed by a search engine, the title is what shows up in the search results. You get the picture. Even if you do have titles on your pages you still might want to reevaluate the actual wording. Make sure that the title actually says something. Instead of "My Web Page," how about "John Jones -- My Web page?" Imagine viewing the two of them in a bookmark list. If you have a business site, you may want to go even further. For instance, you may want to put the name of your business (or an abbreviation) in the title of every page on your site. You never know which of your pages will be bookmarked, and it will be far easier to pick you out in a list of bookmarks, or any other list that uses the page's title. And don't forget to tell people who you are and what you do. On the main page of your site. Don't make them guess. For example: "TLC Systems is a management consulting firm, specializing in the architecture, design, and implementation of systems involving computers and people."

The width of the browser's window

Imagine you're an art director and you have to design an advertisement that will appear in a lot of different magazines. You've been told that the same ad will be printed one, two, and three columns wide. Sounds crazy? How would you design such an ad? Yet this is one of the biggest problems facing web page designers. The height of the browser's window has very little effect on how your page is displayed -- you just see more or less of it, sort of like a window shade. But as the width of the browser window changes, it can have a spectacular effect on how your page is displayed. This is because the browser will try to rearrange the web page to make maximum use of the available browser width. Two factors determine the width of the browser's window -- the width of the visitor's screen, which determines the maximum width for the browser, and the proportion of the screen that the browser has been set to. The practical width of computer screens varies from about 640 to 1280 pixels. This is determined by hardware, software, and the display settings the user has chosen. Your web page should work properly with the browser window set >anywhere< within this range. There are a number of different elements on your page, but they fall into two groups: those items that can be adjusted in width, and those that can't. Items that can be adjusted in width are text (which can wrap) and tables and cells (if declared as a percentage of the window's width). Items whose width is fixed are images, text given a "NOWRAP" attribute, text within PRE tags, and tables or cells declared as fixed (pixel) width. Say you design your page for the middle of the browser range -- about 800 pixels wide. What happens when your page is viewed at other browser widths? Let's start with a narrower window. If the page is designed with the right mix of fixed and variable elements, the page should still work. You might want to use a table with multiple columns where the leftmost is fixed width and the others variable width. If fixed-width elements are used, the page may end up wider than the browser and a horizontal scrollbar will appear at the bottom of the window. Now the visitor will have to scroll left and right to see your page. If the window is wider than you designed for, a number of things can happen. If you've used an image as a background for your page, and it just fits your medium-sized window, it will repeat as the browser adds another copy to the right in order to fill out the increased width. Tables declared as variable width may be rendered strangely, with elements showing up in unexpected places. In addition, the way a particular browser juggles your page to fit its width will vary greatly with different browsers. And also with different versions of the same browser. Obviously, a certain amount of testing and experimentation will be necessary to make sure that your pages display properly at all browser width settings. "The first browser was too narrow and the page looked all scrunched up. The second browser was too wide and the page was all spread out and funny looking. But the third browser was just wide enough." > From 'Goldilocks and the three browsers'

A Tip

Keep your home/main page small so that it loads quickly -- under 15 seconds is a goal worth aiming for. (Especially important when the web slows down.) This will hook the visitor. Think twice about putting that 90K GIF on your home page. Remember that yours is only one of millions of sites -- websurfers have short attention spans.

Images

Don't present high quality images such as art or photographs against a background that is textured, overly dark, or garishly colored. Stick to white, a light shade of gray or, if you must use a colored background, try one of the earth tones. Visit your local museums and see how they present art. Don't use an image compression technique that isn't supported by all browsers. At the present time, GIF and JPEG formats are universally recognized. A JPEG image may compress to a smaller file than a GIF, taking less time to download, but it may take longer to decompress and display, thus making your effort for naught. This is especially true on older, slower machines. JPEG compression also imposes a loss of image quality, which may (depending on the settings in your image-conversion program, and your visitor's hardware) be quite noticeable. But JPEG compression will probably give the best results with photographs or other images with lots of colors or fine detail. With drawings or line art work, the GIF can actually end up smaller than the JPEG. With line art, a GIF may appear sharper than a JPEG since there is no loss of quality in GIF format.. However, GIF images can only show a limited range of colors, and may not be suitable for images such as color photographs. The best answer is to try both compression techniques for each of your images and see which gives the smallest file size, the best image quality, and the best performance in downloading and viewing. And don't forget to design your pages so that they still are usable if a visitor has the image loading turned off. Use the "Alt" attribute to provide text alternatives for your images.

Interlaced GIFs

Don't use interlaced GIFs. These give the effect of the image being continuously redrawn at a higher and higher resolution. The files for these images are actually larger than for the equivalent GIF, and take longer to load. 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 fine artwork. It's also annoying when the web is slow and the image sits half-rendered for a period of time. You may also find that the intermediate image resembles something very different from the actual image. It's just another special effect that will soon be boring. " I've heard many leading-edge, technical reasons for using interlaced GIFs, but not a single person said they used them because it actually looked better. Another victory of technology over aesthetics." > Henri de Toulouse-LaTech

Animated Images

Please, please, please don't put animated images on your page. They're the closest thing the web has to computer viruses. They make the page load slower -- they use big files, slowing down the loading and viewing of the rest of the page. Your page might just sit there for a considerable time, totally blank, while the first animated image loads. Because they have much larger file sizes than regular images, animated images hog a lot more of the Internet's precious bandwidth. Yet another factor in slowing down the web. Animated images cause the page to load improperly -- the little red light on the browser doesn't go out, so there's no way to tell if the page has finished loading. If the visitor clicks the 'Stop' button, it may turn out that the page hasn't fully loaded, so it has to be loaded again. They can also keep you from being able to scroll the page while it's loading. They're distracting and annoying, making it harder for the visitor to concentrate on the other things on your page. (Try reading something over here while an animated mailbox is flipping open and closed over there.) And although it may look cute the first time you see one, after you've seen it repeat again and again and again and again and again and again and again and again... you want to kill someone. What were they thinking to put something like this on their page? And if you switch to another application, the browser now sits in the background, chewing up processor cycles doing animation. The animation runs at different speeds, depending on the visitor's hardware, and what else it's doing at the same time -- crawling on slower machines, and flickering between images on fast machines. And lastly, a number of folks have reported browser crashes on leaving a page that had an animated image. When the browser crashes, it can mess up things like the browser's history list, tables of cached items, and your bookmarks file. That said, there is a use for these things in providing a simple and affordable form of animation. One site used this to show the progress of a hurricane as it approached land. But give the poor visitor a choice: "Click here to see the hurricane in action." Suggestion for the browser manufacturers: How about adding an option to turn these things off?

Standalone Images

The most common use of standalone images is on a page with a lot of little images where clicking on one of them loads a larger version. If you just link to the image file, it ends up in the upper left corner of the browser window, all by itself. Use an HTML page to hold the image. This will let you center the picture and put in a page title and other information.

Text

If you're presenting text documents on your pages, give some thought to making them easy to read. The viewing area of your browser is much smaller than a normal printed page, so you may have to reformat your documents to fit this new environment, rather than just dropping an existing document into your HTML editor. Don't run text the full width of the screen. This creates long lines of text that are difficult to read. Text also needs air around it, to breathe. That's why most printed documents have margins. You can easily solve these problems by using the "Blockquote'' tag, which gives a margin on both sides of the page. You can nest Blockquotes to vary the width as necessary. You can use tables to create more complex text layouts such as columns. You can use dictionary lists ('DL') as a simple way of formatting text that requires indentation. Don't use long paragraphs of text. It's hard to read these in printed form and, for some reason, even harder on to read on a computer screen. Try to keep paragraphs to four sentences or less. If you specify a text font other than the default, make sure that the font (or its equivalent) is one that is standard on your visitors' computers. And when specifying one of these fonts, don't forget to specify the equivalent font names for other operating systems and hardware platforms as well. And try not to put links in your text, especially in the middle of a sentence or paragraph. If you have links that relate to your text, put them at the end, like footnotes. Give your visitors a chance to read your text before sending them somewhere else.  "Text may be a very rich medium, but it looks boring on the screen. It doesn't flash and hop about, so it had to give way to things that did." > Douglas Adams

Tables

Learn how to use tables and you will be able to tightly control the look of your web pages. Tables let you break your page into precise segments and control the placement of graphics and text. You can use tables to create columns and grids to contain the images and text. You can even use tables within tables to create sub-sections that can be treated as a unit. Table cells can be filled with color to add contrast to parts of the page. Whenever you see a page that looks like a magazine or a newspaper, you can be sure that the structure is based on tables. Tables can be used as templates or style sheets to impose a uniform look on a web site. And tables can give you some of the functionality of frames, but without the headaches. There are several ways to learn how to use tables. The easiest way is by studying table-based sites on the web. You can study the HTML source of a table-based web site that pleases you, or load the page into an editor and experiment with moving the different elements around and studying the effect. There are also a number of tutorials one the use of tables available on the web. Any book that covers page layout theory and technique, such as used in newspaper or magazine, will give you some guidance in understanding the aesthetic issues involved. Go to the "Graphic Arts" section of your local library, book store, or art supply store and look for a book on the subject of page layout. Try to find one that utilizes the "grid" method. Some problems encountered in using tables: If your page is based on tables in may load more slowly than a page without tables. This is because the browser has to do a lot of calculations to figure out how to place all the items that are in the table. In addition, the browser may not display the table until all the text and graphic items have been downloaded. You can speed this up in several ways. If the table is very long (more than several screens high) try breaking it into smaller tables, one above the other. Using tables this way will also make it easier to rearrange the elements on the page. Also, make sure that the height and width is specified for all the images in the table. Doing this will allow the browser to size the table before it gets all the images. Even though tables are part of the earliest HTML standards, there are still differences in the way that they are displayed by different browsers. Getting your tables to display correctly in all the popular browsers can be a challenge. For instance, some browsers won't display a colored cell unless there is text or an image in it. Others may vary in how they display nested tables or tables stacked one above the other. So, as you develop your table-based pages, test them continuously with a variety of browsers. It will save from unpleasant surprises further down the line. Another challenge is determining which parts of the table to make fixed-width (defined in pixels) and which parts to make variable (defined as a percentage of the current browser width). With a variable width table, the horizontal dimensions of the table readjust as you change the browser width. The trade-off is that fixed width guarantees the final appearance more tightly, but the variable width can take better advantage if the browser has a larger width. In some cases, the optimum results are with a combination of fixed and variable width for the different parts of the table. Again, a certain amount of experimentation is required to find the optimum balance. Make sure that you test your table-based page at different browser widths. Tables are one area where most WYSIWYG web page editors have problems. The editor's display can vary greatly from what you see in the browser, especially with complex or nested tables. If you download a trial version of one of these editors, make sure you check the accuracy of how it displays tables. As mentioned in the section on printing, tables will affect how your web pages print out. Tables may also affect how your web page scrolls within the browser. Depending on the particular browser, the page may jump rather than scrolling smoothly. One more element to test during design.

Frames

Don't use frames just to show that you know how to use frames. Your web page is small to begin with, and carving it up with frames can reduce the usable area to a tiny fraction of the screen. Some visitors will have browsers that can't see frames, so you'll have to maintain two versions of your site. Don't build your site around frames. It makes it difficult to navigate and limits you to having a very simple site. The cursor keys don't work unless you click in the frame you want to scroll, and the browser's 'Back' button may produce unexpected results. And there's also a good chance that a visitor's attempt to print out your page will end in failure. And an interesting surprise awaits the visitor who tries to bookmark one of the pages within your site. (They'll just get the URL of your main page.) And you may get unexpected results when a search engine indexes your site. Visitors who come to one of your pages from a search engine won't be entering through the site's front door and won't see the frame that would normally be holding the page. And if your "framed" site has links to other sites, they'll show up within your frame, masking the identity of the other site and confusing visitors, who'll wonder where they really are. And you won't be able to bookmark the linked-to site. In addition, there may be copyright issues involved if another site shows up within the frame of your site. In any case, it's certainly unfair to the other site. And if there's a problem with one of your framed pages, it'll be difficult to report since only the URL of the main page is displayed. Frames also cause problems when the browser is called from another application. Say that you're in your email reader and someone has sent you a message which includes a link to a web site. You double-click on the link and now the browser becomes the front window and begins to load the page. If the last thing you were looking at in the browser was a frame-based site, guess what happens? You can get some of the functionality of frames, without the complexity, by using tables to lay out your pages. One possible use for frames is if you have a report where you want to lock the row or column titles so they don't scroll off the screen. "Friends don't let friends use frames."  > Vincent van Gui

Java and Javascript

Note: The following comments apply to Java, Javascript, Jscript, VBScript, ActiveX, Babbage, and any similar technology. A lot of people are learning how to program in Java and JavaScript. Most of their early efforts seem to be some form of nonstop, repetitive animation that is both annoying and distracting. Some applets keep the page from loading or scrolling properly. One popular applet overwrites the browser's status display at the bottom of the window, keeping you from viewing the destinations of the links as you move the cursor over them. It also keeps you from seeing the status of the current page as it is loading. Another popular use for Java is to open a smaller secondary window above the browser. This may prove to be disorienting if your visitors are not ready for it. If you are developing Java applets, you may wish to wait until you have something more worthwhile before inflicting your early efforts on unsuspecting visitors. If you make your site so that it can only be viewed with Java or Javascript enabled browsers, you're making a big mistake. An even bigger mistake is two make two versions of your site -- one for Java, and one without. What will the visitor whose browser does not support Java see at your site? Perhaps an interesting message that the site requires Java. What about the visitor with a Java-capable browser, but with Java disabled? Perhaps a dialog box with an interesting error message. Some other considerations. Only a fraction of your visitors will have Java-capable browsers. You can test for which browser they're using (and maintain several versions of your site), but some will be using Java-capable browsers with Java turned off due to security concerns. In this case, they may get an interesting error message from the browser's Javascript interpreter. When your pages are indexed by search engines, they also take an excerpt from the beginning of the page. If the first thing on your page is a lump of Javascript code, then this is what the search engine will show as the description of your page. Perhaps not what you had in mind. If, however, you are designing a web-based application to be used on a private Intranet, you may have a valid reason for using one of these new technologies.

Hard Copy

What do the pages on your site look like when they are printed out? Try it. You may be in for a surprise. 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 print out information rather than writing it down. 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 the information on your site for later reference. If you're using tables to control the layout of your page, they will also have an effect on printing. You can add some control to how the pages print. When printing, the browser may begin a new page if a table won't fit on the current page (just as it would with an image). Judicious use of tables can force page breaks when the document prints out. But be sure to test this with different browsers. If your browser has a "Page Preview" option, you can use this to get a preliminary idea of how your pages will print. If your page has a lot of browser-specific code, it may not print out properly if the visitor has a different browser. If your page has a black or colored background, it may not print properly. If your page uses an image for the background, it will probably print without the background. If your page uses frames, it probably won't print correctly. But the biggest surprise awaits those whose ultra-chic pages have black or dark backgrounds with white or light-colored text.

Should you use the latest features?

Each new browser has new HTML tags that it supports. Some are upgrades to the latest HTML standard. Some are proprietary tags for features supported only by this particular browser. For some, the allure of a new technical challenge is too much to resist. So, instantly the web starts to blossom with pages that use these new features. Before you start cranking out your new pages, here are some things to consider: 1. Do you absolutely, positively need this new feature for your site, or are you just using it to show off? 2. Which browsers currently support this feature? 3. What percentage of your visitors will be using these browsers? Is it worth implementing this feature for only a small percentage of your visitors? 4. What happens with browsers that don't support these new tags, or with the right browser, but with the new feature disabled by the user? What will these visitors see? 5. Will you need special versions of your pages with code to handle different browsers? 6. Will you have to maintain several versions of your site in order to support all your visitors? "If Netscape or Microsoft could find a way to make web pages twirl in the browser, the next day the web would be full of twirling pages. No one would ask why. The fact that it's the latest thing would be reason enough." >Pablo PigCasso

About HTML

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. And it will be a very long time until your visitors have upgraded to a browser that supports these features. Avoid using browser-specific "enhancements" that only work with one particular make or version of browser. 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 may 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. But the best way to use HTML is not to use it. The newest WYSIWYG web page editors let you put together web pages without coding directly in HTML. Most of them also have a way of viewing and editing the underlying HTML code so experienced users can still have control over the fine points. It's like advancing from assembly language to a high-level language like BASIC. The WYSIWYG editors take care of the annoying details and free you to work at a higher level. In addition, these editors will automatically take care of a lot of the housekeeping for you, like specifying the height and width of all the images so that your page loads faster. Most of the WYSIWYG web page editors are still in the WYSINQWYG (What You See Is Not Quite What You Get) stage, and some produce more HTML than an optimized, hand-coded page. But the extra text they produce adds little to the download time of a page, and you can be sure that the page won't have any HTML errors in it. (If you're really interested in how fast your page loads, how about dumping one of those animated GIFs?) "If HTML is a standard, how come my page looks different in every browser?" > Vincent Van Gui

Advertising

Advertising has come to the web. Now, someone will pay you to put their advertisement on your web page. What an opportunity. Not only can you make gobs of money, but your page will look "successful." (Otherwise, why would someone bother to advertise on it?) But while other advertising media are aimed at influencing your next purchase, web ads have a completely different goal -- to get a visitor to leave your web page and go to the advertiser's site. (You only get paid if someone leaves your page and goes to the advertiser's page.) You can be sure that the designers of the ads will try their very best to get folks to leave your page (and probably not return). But that's not all. You may not have any say about what the advertisement says or about the subject matter. Or even worse, what the ad does. Imagine, someone else's animated image on your page. Hmm... Wonder why your page doesn't load correctly any more. A large ad at the top of your page may create a certain amount of confusion as to the actual ownership of the site. And since this is probably the first thing that loads, it's probably the first thing a visitor will see. If you have a commercial site, you're going to look pretty silly with an ad for another company on your pages, especially when the goal of that ad is to get visitors to leave your site. Some might wonder why your company can't afford to pay for its own web site. And don't forget the free ads that many sites carry. Sort of like paying extra for clothing that displays the designer's name in large letters. Most of these free ads are for the latest browsers or plug-in components that you absolutely must have to view the site properly. Others have created "awards" that you can use to decorate your page. Remember that they're also links to someone else's site. Is anyone getting rich from letting others put an ad on their page? Only a few of the mega-busy sites. For the rest of us, it's just another Internet get-rich-quick scheme.  "Whose web site is this, anyway?"  > Henri de Toulouse-LaTech, On viewing a page with three animated web ads, two "download me now" browser buttons, and six meaningless web awards.

Web awards

Web awards -- you've seen them. Those little widgets that sites display so proudly. Some sites have so many, they look like a general in the Russian army. And just what is a web award? Turns out that anyone can do it. Here's how: Just make up an interesting little bauble, create a name, such as the "Site for sore eyes award," and start handing them out. Gives you a certain amount of power. And pretty soon, everyone's got one of your little widgets on their page. When someone clicks on the award, guess where they go? That's right. Straight to your site. So what are web awards? Free advertising for someone else. And, in most cases, just another Internet scam.  "It's amazing. According to these awards, 95% of the web sites are in the top 5%."  > Vincent Van Gui

Testing and debugging

In the real world of computer systems development, some consider testing to be the most important phase. In the world of the web, it doesn't seem to have the same importance. Look at the many web pages with glaring errors such as missing images and non-working links. If your web page editor has a spelling checker, use it. If it doesn't, find another way to check the spelling. Test your pages with several different browsers. You will be amazed at the variations in interpreting even the simplest HTML tags. Make sure you try your pages with the browsers provided by major online services such as AOL and Prodigy. You may also want to test with previous versions of the more popular browsers. Statistics might show that the current version accounts for 30%, with most of the remainder split between the two previous versions. You will be amazed at some of the differences between two successive versions of the same browser. Test all your pages after making even trivial changes to your site, just to make sure you haven't broken something. (Programmers know that you're far more likely to introduce an error when making changes than when the original work was done.) During development, you've probably done the testing of your site with all the files on the PC. Make sure you test the site after it's been moved to the server. Make sure that you test your pages in a way that forces the browser to get everything -- both text and images. This means turning off the caching, emptying the cache from within the browser, or deleting all the files in the browser's cache directory. This will force the browser to get everything from scratch. You'll see how long your pages really take to load. And while you're doing this, you can measure your browser's "hang time." This is how long the browser hangs there with a blank screen before something shows up. Now go to your browser's options dialog and make it so that the page always has a white background and the links are their default colors (blue and red). A lot of people will have their browsers set this way to avoid viewing weird backgrounds or strangely-colored links. How does your page look with these settings? If you can get hold of one, test your site with one of those new widgets that turns your TV into an Internet surfboard. Most of these still have just the capabilities of the very early browsers. They have lower resolution than most browsers and they reformat the page so it can be read on a TV screen. Turn on the "don't load images" menu item, or checkbox in your browsers option settings. How does your page look without its images? Is it still possible to find your way around? If your page uses a text font that isn't one of the defaults, be sure that the page looks right with all the different variations mentioned here. If your page is blessed with a Java or JavaScript widget, what happens when you look at it with a browser that doesn't support Java. What about a Java-enabled browser with Java turned off ? If your page needs a special plug-in, or a special helper application, or uses a special file type, test to see what happens if one or more is missing or not supported. It might be enough to make Netscape toss its cookies. As mentioned previously, there are a number of things that you can put on your page that keep the little red "download" indicator from going out after the page has finished loading. If your page has one, see what happens with different browsers. You should consider replacing these widgets with something that doesn't keep the browser from functioning properly. Have other people test your web site. Especially if their computer setup is different form yours. Have other people proofread your text. Test on different platforms. In one case, a page that looked fine on a PC didn't fare as well on a Macintosh. And this was with the same version of the same browser. One source of problems is specifying a text font that's only available on a PC and forgetting to add the Mac equivalent. If you've got a site which has different versions, depending on the browser, you've really upped the ante, testing-wise. Last, but not least, don't forget to check your server's error log. It's the main error reporting and debugging tool for your site. Look for things like missing images, bad links, and errors from CGI scripts. You should check this log on a regular basis, and especially after making changes or additions to your 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.

Maintenance

It's a dirty job, but someone has to do it. The world changes, the web changes, and one day your site will have to be upgraded. Is your site easy to modify? Is it easy to make additions and changes? Some of the things that make a site difficult to change are sloppy formatting of HTML code, imagemaps, and a site where every page links to every other page. Can your site be maintained or modified by someone besides you? In the world of commercial web sites, it's more than likely your site will eventually be inherited by someone else. Have you left them a clear path to follow? If you use browser-dependent features on your site, you will have to have two or more versions of your pages -- a maintenance headache. Format your HTML documents so that they are easy to read. Use blank lines and spaces to separate elements. 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. If you have links to other sites ("My Mondo Cool Link List"), you owe it to your visitors to keep these links up-to-date and accurate. You should check them on a regular basis to change or modify links to sites that have moved, and to remove links that now lead to dead ends. Fortunately, there are a number of shareware tools that can aid in this process. If you move your site to another URL, make sure that you leave a forwarding address at the old URL. And make sure that your pages are current. If you have a sale, or a contest, or an offer that ends on May 25th, make sure that the page gets updated or removed within a few days of the expiration. 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. There are also shareware utilities that let you make global changes to all the pages in a web site at one time. Consider using automated maintenance to build and maintain your HTML pages.

Orphaned pages

Web sites can grow to be complex, and may undergo continuous modification and evolution. As pages become obsolete, you update the links on other pages so that obsolete pages are no longer pointed to. Since nothing on your site points to these old pages, there shouldn't be a problem, right? Would that it were so. Unfortunately, there may still be links to these orphaned pages -- from other people's web sites. Three possibilities: search engines that have indexed the page, visitors who have added the page to their list of personal bookmarks, and visitors who point to your page with a list of favorite links on their site. This can be a problem if the pages contain information that is no longer current, correct, or accurate. One way to see if this is happening is to check your stats to see if orphaned pages are still getting hits. If you have really good stats, they can tell you who has links that point to you. One thing you can do when a page is orphaned is to delete it from the server or rename it. Either way, it will return a "not found" error when someone tries to access it. After this is done, you can re-submit the original URL to the search engines. This will force them to look for the page and, not finding it, remove it from their database. Even if you don't explicitly submit these pages to the search engines, they will eventually look for them and find them missing. Another thing you can do is to replace these orphaned pages with a generalized page that has a link that points to the main page of your site.

Advice

Don't be a web critic. Withhold your criticism until someone actually asks for it. Be positive. Make suggestions, give advice, offer help. Point out problems such as missing images and bad links. Be private. Send your comments (especially the negative ones) by email rather than posting them in public. Put your ego where others can't see it. And don't forget to send praise to the sites you really like. It gives people the energy to keep going.

How to get started -- A 12-step program

1. Buy a WYSIWYG web page editor like Home Page or Visual Page. Most have tutorials and sample pages. 2. Study the web. Look at lots of pages. Learn to tell the wheat from the chaff. 3. Read "Art and the Zen of web sites" at http://www.tlc-systems.com. 4. Find pages that you like and load them into your web page editor for study. 5. Use the web - there are thousands of sites that have tutorials and explanations of every aspect of web site design and implementation. And most have pointers to lots of other sites. Start with Yahoo or Excite or Infoseek. 6. Visit your local bookstore. Look for books on web page and web site design. 7. Work on your site. Set the goals for your site. Develop a style for your site. Play and experiment. Start small and simple - you can always make it wondrous and complex later on. 8. Publish your site. 9. Announce your site - use email, Usenet, search engines. 10. Continuously refine your site. Meditate on your goals. 11. Go back to step 2 12. Turn away from the web and look inside yourself

A final quote:

"I'm more interested in new ideas than I am in new technology."  > Henri de Toulouse-LaTech

A final Zen thought:

Before putting something on a web page, think about its real-world equivalent and use that as a guide. If there is no real-world equivalent, it's a bad sign.

A final word:

Don't take this as being against graphics and creative page design. The intelligent use of graphic elements and design can add greatly to the attractiveness of a web page. But it's like putting on makeup -- you have to know when to stop.

A final hint:

Don't give people special instructions on how to view your site, like:  Change these browser settings Open the browser window |--- this wide ---| Stop right now and download this other browser Best viewed with ... Only viewable with ... Click here if your browser supports frames If you're using a browser that does not auto-refresh Click Here. Download this plug-in Set up this helper application Turn off the underlining on links Download this special font How to print this page (Don't I just say "Print"?) Click here for a tutorial on how to view this site You don't have Java? Go away! If you lived here, you'd be home now.

And a final suggestion from the author:

Try holding your breath for as long as it takes your home page to load.

"When the bandwidth of the web increases by a factor of 10, web page sizes will increase by a factor of 15."
> Henri de Toulouse-LaTech

"What's the difference between the Boy Scouts and the web? The Boy Scouts have adult supervision."
> Vincent Van Gui

"The journey of a thousand sites begins with but a single click."
> Obi-Web Kenobi

 

Visit our web sites

The Techno-Impressionist Museum is a complete art movement on a web site.
- View a museum full of art created especially to be viewed on the web.
- Read a history of 21st century art.
- Learn the differences between real art media and computer-simulated media.
- Art history, art critics, quotes from the artists, and much more.
- And a gift shop where everything is free.

Techno-Impressionist Museum: http://www.techno-impressionist.com

 

The TLC Systems web site
- From the folks who brought you Art and the Zen of web sites
- Dear Webby
- Stupid Web Tricks
- The Tao of Web Sites

TLC Systems: http://www.tlc-systems.com

 

If you're interested in web statistics, visit our Web-Scope site
- Information about visitors and what they looked at.
- The web browsers used by our visitors.
- Where our visitors came from, and much more.

Web-Scope (tm) statistics: http://www.web-scope.com