As we have developed and worked with web sites created by both professionals and students at LACC, we have found a number of items pertinent to site design that we think should be brought to your attention. Since we have students in CSIT 159 whose skills range from beginner to professional, and everything in between, we would like to share with you these insights and suggest that you consider them as you build your sites.

Probably the first error of site designers, particularly those just getting into the field, is the tendency to make each page of the site overly complicated from a visual perspective. This includes things like many images in a small space, too many links from one page, and cluttered pages that make it difficult for the user to see what to do next. You want to keep the page simple for two main reasons:

1. Complicated pages take longer to load than simple ones. This is due to the large number of files required (for example if many images are used), and the time it takes the browser to convert the incoming data to the page layout.
   
2. Complicated pages are harder to use than simpler ones from the viewer’s aspect. If you have too many links, images, etc., on one page, the viewer will abandon the page before seeing all of the possibilities that you have included.
   

A common error for beginning web site designers is to include too many images on one page. This becomes both confusing to the viewer and takes longer for the page to load. If the purpose of the site is to show images, such as in a page to offer artwork for sale, keep the number of images small per page, and generate more pages. Using the thumbnail/detail page approach is good.

A common pitfall is the use of too many animations on a page. Generally, animations should be considered only for certain types of pages and should be kept to a minimum there as well. An example might be a page designed to offer baby toys and clothes for sale – it would be very easy to get carried away with flying rabbits and hopping toadstools which would detract from the products shown. For a page designed for a business, any animations are probably too many.

It has been shown by research that certain color combinations are disturbing to viewers while others are neutral in viewer response. This is important in things like the background of a page working with the color of the text on that page. A classic example is a red background with purple letters, which would be hard to read at best, or red with white text, which is used sometimes to signal a major error in an program. Exact opposites don’t work well either – green text on red, purple on yellow, and orange on blue tend to glare at the viewer. It is better to use a neutral background with text of the same basic color range, such as darker blue letters on a lighter blue background, to minimize glare. Lighter color backgrounds are better.

Another area to consider is that of background wallpaper made up of repeating graphics that form a backdrop for the page. If the image on the wallpaper is too busy, it will detract from the rest of the page content and may make it difficult for the viewer to understand or read the page. Keep background images subtle and in the same color range.

Probably the number one error made by beginners is the use of the color black as a background. Black will contrast with virtually all other colors, and if the intent is to be dramatic, this will do it. However, black is also the color of choice for adult and pornography sites. It also has evil or demonic connotations for some people. By all means, avoid using it at all except for text on a light page.

What is the intention of your site? Are you intending to sell items, offer services, or show pictures of the family? If you wish to sell something, offer a few images or descriptions on each page, and provide more pages. This will allow the visitor to concentrate more fully on what is being offered visually at one time. If the purpose is to offer services (for instance, web hosting), keep the text to a minimum on the initial pages and include more detailed text on following pages to provide detail. If the user is interested in a particular service, then provide the information on page two. If the user is not interested, she/he should not have to wander around through quantities of text to find out how to get out of the current page.

If you are selling something, make sure that all the information is provided to the site visitor that would enable her/him to understand what is for sale and the conditions under which it is being offered. This should include things like price, materials from which the item is made, size of the item, methods of payment, methods of shipping, taxes and shipping charges, methods of billing and payment, etc. The user should have no big question about the item or its purchase once she/he has looked at the site.

The same approach applies to sites offering services. The nature of the service, what it includes or does not include, costs involved, methods of payments, contracts, etc., should all be addressed. Provide an email link so that customers can ask further questions easily.

Classic examples of overkill on site design for selling are Amazon.com, Yahoo.com, etc. Here, the initial page is covered with links, blinking graphics, colors and images. The intent is to hook the visitor as quickly as possible into some sort of page or item search. Remember, these sites are making money by selling advertising, and they offer a vast number of products for sale as well. This approach would not work, and be very annoying, in sites where a single company is selling a minimal range of products, or where the site is not sales-oriented, such as an educational site or technical site.

Most sites start with a single primary or "home" page which provides links to other pages with more products/details on what is being shown or offered. However, it is a common mistake to link some of these secondary pages to others, thus creating a spider-web of links in which the user quickly looses her/his way. The visitor to your site will prefer to be able to backtrack out of a set of detail pages to the starting point rather than be encouraged to take a shortcut link to an unknown place in the site. A simple tree design where the user must backtrack is easier to use and design.

Consider also whether the pages you are creating are necessary. It is a nuisance to have a site offer you three pages of "are you sure you want to buy this?" text when one would have sufficed. Over-paging is a common error and will cause your visitor to become annoyed quickly.

A classic example of a rat’s nest site is that of Sun Microsystems. It is possible to get lost on that site to the extent that you become frustrated and confused, then quit.

Like it or not, we are caught in a continual browser war between Netscape and Microsoft’s Internet Explorer. In an attempt to be the big fish in the pond, Microsoft has not conformed with Netscape’s earlier standards of display of tags, nor with Sun Microsystem’s Java language format. The folks in other companies or who work in platforms other than Windows have been very slow to adopt the Windows way of doing things. So, the two browsers don’t work the same way, and probably never will.

What can you do to address this issue?

• Consider your audience. If the intent of a site is to serve one browser and ignore the other, then test the site with the chosen browser and don’t worry about all the other people out there who cannot use the site – they wouldn’t buy anything anyway, right?
• Adapt the HTML on the page to work with both browsers. If the page consists of simple HTML with no advanced features, then the problem is minimal. Test the pages with both browsers to ensure compatibility.
• Adapt the page to work with both browsers using a JavaScript or other device for testing which browser the user has. This might require that the site developer build virtually two identical sites, one that works with Netscape and another, showing the same stuff, with IE. This is complicated, but is the only way to ensure that any user will get the most out of the site.
  

A further hassle has recently emerged in the form of Windows XP. Since Microsoft did not win intellectual control of the Java language from Sun (via the several lawsuits), it typically pulled away from many of the plug-ins for its browser that users have come to expect to be included when it issued its XP system. These include the Java Virtual Machine (JVM), which is the agent within a browser that implements the Java language; the RealNetworks streaming media player; the QuickTime media player; and several other features. Users upgrading from Windows 95, 98, NT, or 2000, who have been able to use these browser features from non-Microsoft companies in the past, will find themselves unable to make use of these formats if they implement XP. Most of these features will be available from other sources by download via the Internet, but this will be a major inconvenience to many users who are only marginally computer-literate and will not know how to get around the problem. Naturally, Microsoft's intent is to replace these competitor's products with their own versions of streaming media, and, in the case of Java, with their own C# (C-Sharp) language which is a Java clone. If you build a site that makes use of non-Microsoft protocols or formats, you may need to provide a means by which the average user can easily locate and obtain the needed plug-ins.

Consider the User’s System

While most users gradually replace older computer equipment with newer, you cannot assume that a visitor to your site will have excellent video display ability or a fast machine. This includes things like "millions of colors" and a 1024 x 768 pixel display. A common issue is the use of the minimal screen size to ensure that all users see the whole page. For instance, a 640 x 480 pixel page can be seen on a video adapter for 800 x 600 or 1024 x 768 pixels with no problem. However, showing a 1024 x 768 pixel display on an older computer with only 640 x 480 resolution will require the user to use the scroll bars at the sides or bottom of the screen to see the entire page.

Regarding scroll bars, it is much more aggravating for the user to have to scroll left to right than it is to scroll up or down. Therefore, if you must make the page larger than one screen in size, do so vertically, not horizontally.

Again, sites with lots of images or which require the browser to do a lot of rendering as the page is received will be even slower to display on old equipment. If the user is connected to the network via a slower modem, this becomes a real problem. If the user finds that the loading is too slow, she/he will probably abandon the site and go elsewhere. Remember, humans are typically random, instant response creatures and don’t like to wait for images to appear.

A further aspect is the speed at which the host server can deliver the site content to the viewer. This might be out of your ability to control it. However, some ISP’s are notorious for slow delivery and although the pages might be simple and quickly loaded to a local computer, they are not available at speed over the ISP’s connection with the web. The only solution here is another ISP or a faster line.

Watch Out for Copyrights

It is very tempting to use images and logos from commercial products and sound clips from professional sources in our web sites. However, since the web is "global", and since, generally speaking, there is no way to keep anyone from seeing the site once it has been posted, it may also be necessary to have permission to use these items on a web page. The permission may come from the author/artist her/himself, or from a publisher or authority that has legal control of the document.

Some companies are glad to have you use their logos, and will say so up front. Others do not want you to use their stuff at all, with permission or otherwise. Do not assume that because the source of the image is a public concern, the owners are making it freely available.

Theoretically, it is necessary for you to have permission in writing from the owner/publisher/authority for each image or sound you use. It is the owner’s right to ask you for compensation if you have used something they own without their permission. It is illegal to do this and the owner can take the issue to court if they wish. This applies to, but is certainly not limited to, the following:

• Images from magazines, books, or other printed material.
• Images displayed on the web but which are copyrighted to a certain owner who does not expressly permit you to use them. This includes things like images from museum collections and libraries that may be posted to advertise a showing or display.
• Logos that are not made publicly available for the purpose of web display.
• Photographs from friends or relatives that you might use without their permission.
• Artwork for web site pages that includes particular color schemes or physical shapes or embossed images that might be construed as copyright-able or trademarked.
• Sound clips of any kind created by anyone other than yourself. This includes music from CD’s, tapes, live or radio broadcasts, etc.
• Video clips of any kind created by anyone other than yourself. Theoretically, if you take a video of a street scene or even a family gathering, and then wish to put this on the family web site, you must have the written permission of everyone who appears in the video to display their image on what is essentially a global network.

As a quick guide, you can use the following (check the web for more details):

• Artwork and images you create yourself by drawing.
• Photographs you took yourself, assuming that the people in the picture permit you to do so.
• Sound that you record yourself. If music, the tune must be of your own creation – songs created by others, even if it is you who are playing and singing them, are copyrighted.
• Video that you took yourself, assuming that the people in the picture permit you to do so.
• Any item for which you have written permission from the author/owner/publisher stating that your specific use is permitted.
• Certain logos and graphics made available on the web where the site clearly states that the images contained therein are for public use (and which may have conditions with which you must abide).

To summarize, here are some "do’s" to go with the "don’ts":

• Keep the pages uncluttered; keep images and links per page to a minimum, and create more pages if needed.
• Keep color schemes moderate. Use backgrounds and background colors that support, rather than fight with, the colors of the text or images on these backgrounds. A good idea is to pick a color and stick with it, using variations on that color for the detail. For example, choose a light blue background with darker blue text and artwork in a similar color, rather than combine two different colors such as blue and green or yellow and orange. Generally, neutral colors are best, and lighter backgrounds are less jarring and more neutral than dark or bright backgrounds. Don’t use black as a background color.
• If you wish to use wallpaper as a page background, use one with minimal color differences and contrasts. An "embossed" image of a darker tan on a lighter tan background color is both classy and non-violent, whereas a background of radically different colors will distract from the purpose of the page.
• Keep the design of the site simple, and make it easy for the user to get back to the starting point.
• Test your site thoroughly with both Netscape and IE. Try to create a site that will work well with both browsers. If the site must have complicated stuff in it, make the site compatible with both browsers by testing to see which one is in use, then delivering content as needed.
• Design for a smaller web page size with no horizontal scroll bars.
• Pick up a book on HTML 4 and DHTML (Dynamic HTML). This book or one to go with it should also discuss JavaScript. Simple HTML as we know it is being replaced by more complicated formats that include style sheets and functions. It will be important for the site designer to understand these new tools and to make use of them.
• Learn how to use HTML and the more advanced tools with an editor only at first. If you wish to use a commercial tool for doing pages, you will be much more efficient if you have first developed a thorough understanding of the way in which the page coding works and in how to implement the features manually.
• Watch out for copyrights.
  

RC 3/01