Published on: Sunday 14th March 1999 By:
Who are our users? How will the use of a certain technology help them? How will it help us?
This article is designed as a list of "errors" to avoid when creating pages for the Web. Some of these typical mistakes can be found on professional as well as non-professional Web sites. This article will also refer to sites and software that could help resolve some of the more obvious errors.
Many of the suggestions and opinions expressed in this article are from the collective conciousness of the authors at irt.org - although there are bound to be differences of opinions amongst the authors and readers of this article as to the relative importance of the tips.
When placing information and applications on the Web, first consider its:
The approach should be "need/requirement" => "use of a technology" and not the other way round. We could take the use of animation as an example. Where is the animation really useful? Some instances can be:
The difficulty of dealing with the subject lies due to the integration of art and science. On to the tips...
That's the motto here at irt.org. No matter what the long term aims of the team here at irt.org, the bottom line is always "Content is King".
People return because the site is constantly updated with new and relevant information. People do not visit irt.org to see flashy graphics, pages of adverts, or amazing active pages. They visit because they want to learn.
Most of the information on irt.org is conveyed using the written word and a sprinkling of pertinent images. Visitors would soon start looking elsewhere if we forget or ignore our motto.
Visual impact is always useful in making that "first impression". But after that, the functionality of the site takes over. As an analogy, there is only so much one can appreciate a software's attractive GUI if it doesn't have the relevant features expected of it.
Once you've completed writing the content, run a spell checker over the text. This will take care of "syntactical" errors, if any. You should still carefully (re)read the document before publishing it for "semantics." First impressions count. Spelling mistakes and grammatical errors give the impression of unprofessionalism. That being said, there may be times when you will have deadlines to meet. Spending too much time looking for errors will only delay the publishing schedule. Also, at the end of the day, getting the message across is more important than checking that it is authored correctly.
Placing any animation on a Web page can distract attention from the rest of the material on the page. Does the animation deserve that much attention?
The Web Accessibility Initiative at the World Wide Web Consortium (W3C) suggests that there should always be a means whereby the visitor can stop the animation themselves.
Perhaps, the most important question of putting anything on a document, including multimedia, is the need, relevance and the context. Why is it needed? Why is it needed here? Will the users have appropriate tools to view it (for example, GIF89a is but Flash is not natively supported in current browsers)? If not, are there any instructions to obtain them?
Again using the software analogy, how many times do we see software with buttons all over like a Boeing 747 cockpit, which are there just for the aesthetics?
There are various contexts where use of an animation can be useful:
In both the above cases, "time" is an implicit factor. Hence, the justification.
Animation can be split into several distinct areas:
Consider why your site needs to display animated GIF's. The larger the image and the more frames the animation has, then the longer the download will take. Will your visitors stay on the page long enough to see the whole animation?
Placing too many animated GIF's (to some people one animated image is considered as one animation too many) should be avoided. It is likely that the animations will be out of sync with one another, and give the impression of animation overload.
Avoid using an animated GIF from a graphics library. There are several tools available that you can use to create your own. Creating your own animated GIF that blends with the rest of your sites look and feel will be more acceptable to your visitors than one that clashes.
There are two major types of uses of animation with Dynamic HTML (DHTML): moving images and text around the screen for the sake of it; and presenting an interesting interface to condense or hide information until it is required.
Obviously the former is to be condemned and the latter condoned.
An good example of the practical use of DHTML is the hidden article synopsis on the main index pages here at irt.org. When people are looking for an article they are presented with list of headings and dates - when they hover their mouse pointer over a heading then a brief synopsis of the article is revealed - giving the visitor the opportunity to decide whether the article is of interest to them before deciding to view it. Displaying all the text for each article would generate information overload and would make it much harder for people to quickly identify the items of interest.
An bad example of DHTML use, would be if your home page takes a while to load all the images and text, and it is invisible whilst it is all loading. Your potential visitors might feel that there is something wrong with your site and then go elsewhere.
If your visitor does hang around long enough for all to be revealed, will they then return later to your page, to again be presented with your masterpiece? Possibly not. They may instead bookmark a page within your site that they feel more appropriate for their later return, almost certainly avoiding your front door.
If your site doesn't have an appropriate page, perhaps the whole site is animated, and no matter where the visitor enters it, it still takes a while to get upto speed, then your visitor might not bookmark your site, and might never return. Most people regard an individual who bookmarks their site as a success. Bored people often revisit their bookmarks!
Revisits all depend on how useful your visitor finds the site, and how often they return. If the pages are still held in the browsers cache, then the download delay will not be as long. If your pages and images have been cleared from the cache over time, or because of the lack of space, then the download delay will be as long as the initial visit. This may give the impression to visitors that your site, or the host that is situated on, is "slow".
The status bar is for status messages, for example: the location of the link beneath the mouse pointer, the progress of a page download. People do read these messages. It's unprofessional to hijack this area of the browser for a gimmicky scrolling message.
If the message is that important, place it in bold at the top of the page, or consider using a Java ticker tape, or a scrolling text box.
Unless your site is time related, or needs to highlight the time of a deadline, then consider whether there is a need to tell your visitors their own local time.
Most people who can afford a computer can also afford a wristwatch. Most operating systems provide their own internal clock, and a GUI clock application, some even provide a clock on a toolbar.
Telling people how long they've been on your site is only likely to remind them that they've spent too long on your site, and that they should be doing something else.
There is one, and only one reason, to have them - put one on your page and you either get access to Microsoft's Site Builder Network Web site, or to Netscape's Developer Web site, and access to info and free CD-ROMs.
But, do these browser logo's have to be on the most important page of your site - your home page? Why not place them on a banner or logo page that people don't visit very often. That way you still achieve the criteria for entry into browser vendors' Web sites, but you don't cause every visitor to your page to download yet another useless version of the same animated logo they've download from every other site they've visited - and you don't perpetuate the incessant "This page is best viewed with XYZ" myth.
It has been recently reported that people do not actually download newer versions of browsers over the net - so what purpose do these logo's serve?
Proclaiming that your site is 'Best viewed at 1280x1024 with 16.7 million colors' serves no purpose. Consider this: have you ever reset your machine to view a Web page at the recommended settings? You are likely to be a Web developer, most people who surf the net aren't - and probably wouldn't know how to reset their machine even if they knew they had to.
The range of equipment used to view Web pages ranges from hand held computers with LCD displays, to 80x40 black and white text character terminals to, high resolution, high color displays. By requesting that people view your page the way you designed it is restricting the access to your page to only those with the same setup as you.
For more information on Web accessibility issues, see the article Introduction to Web Accessibility.
Try and keep your file sizes as low as possible. Not everyone has free access to the Internet. For these people, time is money, they do not want to sit there waiting for big images to load up. Try using a graphics package (something like Macromedia Fireworks or Paint Shop Pro) to compress GIFs and JPGs, or use GifLube on the Web.
If you must have large images, don't place them inline within the main page - include either a text link, or a smaller version of the image as a link to the larger image. Don't be fooled into thinking that adjusting the width and height attributes makes the image smaller - it doesn't - it just makes the visible representation smaller, the image still takes up the same file size, and bandwidth.
If you are linking to large files, always give an indication of the file size and the time it should take on various modems.
Make sure your page is easy to read. Navy blue text on a black background is very hard on the eye, and garish backgrounds make text impossible to read while making the page look bad. Also be aware that many people suffer from red-green or yellow-blue color blindness.
There are several color pickers available on the Web that you can use to play around with colors - however be aware that when using displays set to 256 colors, that there are only 216 colors that can be displayed without the colors becoming dithered. See 216 colors of Netscape that do not dither for further comprehensive information.
Use the Web Palette while creating images for distribution on the Web. Such a palette is found in image manipulation programs such as Photoshop 5.0. More information about Web Palette can be found on Lynda Weinman's Web site.
Low source images can be used when you have an image with a high file size, but do not want to slow down the loading of the rest of the page. Save the file with a very low quality setting then add a LOWSRC attribute which refers to the low source image. The low file size image will load first, then once the rest of the page is finished loading the higher file size image will be downloaded and replace the low quality image:
<IMG SRC="big.gif" LOWSRC="small.gif">
Make sure that both images are exactly the same size, and make sure to specify the...
Find out the height and width of your images in pixels and specify the width and height attributes in the IMG tag:
<IMG SRC="image.gif" WIDTH="43" HEIGHT="123">
This will allow the browser to lay out your page correctly, instead of shuffling the text around the image when it finally realises the size of the images.
By making sound available on the Web, we can take advantage of one of our basic senses. However, once again, appropriateness of its use should be justified and determined. Some examples are:
Avoid the use background sound unless you really need it to enhance your page. Many computers have a CD-ROM built-in. People do use these to play music whilst they surf the Web. It can be most distracting when you are listening to Claude Debussy's Claire de Lune to suddenly have it overlaid with a poor Midi rendition of Meatloaf. Without any means to turn off Meatloaf, the easiest option is to press the back button, never to return.
Java can take a while to start up in a browser. If your site is the first that a person has visited in a session that uses Java, then your site will cause a reasonable delay to the visitors visit to your site. Once loaded, is the applet useful, does it serve a purpose, or will it instantly be unloaded when linking to another page - perhaps one with information on it, as opposed to a Java applet - is clicked?
For good applications of Java Applets see the article Java Applets in Education.
Proprietary or deprecated HTML tags should only be used where they do not cause errors in other browsers. Proprietary tags, or HTML extensions, are by definition supported only by one browser, for example Netscape's <BLINK>, <LAYER>, <ILAYER> tags.
We would stongly recommend never using the <BLINK> tag. It distracts attention away from the rest of the page, it can't be turned off, and can become annoying after only a short while.
As HTML evolves the standards constantly move HTML away from a language used to add style to a Web page, and more and more towards a language that marks up and structures the content of a Web page. For example, all of the following HTML tags have become deprecated in the HTML 4.0 Recommendation:
The following have become obsolete elements in HTML 4.0:
Instead the <PRE> tag should be used.
Almost all of these tags were used to specify the presentation of text on a Web page - Style Sheets should be used instead. This then separates the contents from the style of a Web page, and allows client Web browsers to render the Web page based on the users preferences and not the Web page designer's preferences.
Try and keep pages under 2 scroll lengths long. Nobody wants to read all the way down a huge page to find what they're looking for. This applies mainly to the first page of your site. Break the page down and link to these pages, so visitors can just click the link they want and then view that page.
HTML Frames, that were introduced by Netscape as an extension to HTML 2.0, are now part of HTML 4.0 specification. However, Frames break the unified model of the Web and introduce a way of looking at data that has not been well integrated into the other aspects of the Web. For example, with Frames, the user's view of information on the screen is determined by a sequence of navigation actions rather than a single navigation action. Therefore, they should either be used with caution, or not used at all. For more information on problems with using Frames, see Why Frames Suck (Most of the Time).
Why give people the opportunity to air in public what they don't like about you, your company, and your site. Unprofessional. Use a feedback form instead. You can react, or not, to bad and good feedback without affecting your reputation, or the professionalism of your site.
Consider, when was the last time you saw a guestbook on an established mainstream Web site?
Like guestbooks, hit counters aren't always appropriate. A Web counter is only there for the owner of the page to know roughly how many visitors are reading the page. The information is of no importance to the visitor. If you must have a counter, hide it by adding HEIGHT="1" WIDTH="1" to the counter IMG tag.
If you are really serious about finding out about the traffic to your Web site, then examine the server logs.
Broken links and images are an instant turn off. There's nothing more irritating than finding a link to a page that sounds great, only to get a file not found error. Images are just as bad. Use link checking software which you can find on shareware sites, or use a one off free check at the Web Site Garage.
You will be amazed how bad your site looks in Netscape if you designed it with Internet Explorer. Be sure to check every page in the most popular browsers. You can get a list of the most common browsers from browserwatch.internet.com (updated monthly), and a detailed synopsis and analysis of browserwatch.internet.com's data.
Don't forget our very own irt.org agents page (updated weekly)
When designing a page it is very important to think about what you are trying to achieve with the site, what is it that visitors want from it. You need to consider your audience when designing pages for the Web. Make sure your visitors can navigate the site quickly and easily, and make sure they can find what they want. Use feedback to make sure you are meeting targets and be sure that you consider the following issues again in order of importance:
Make sure anything that goes against any one of these issues does so for a reason, i.e., is a Flash navigation bar necessary? If it is, fine, but if not don't use it.
Content is King
The Web Site Garage - http://www.websitegarage.com/
Bandwidth Conservation Society - GIF Tips & Tricks - http://www.infohiway.com/faster/gif.html
W3C Web Style Sheets Home Page - http://www.w3.org/Style/
W3C HyperText Markup Language Home Page - http://www.w3.org/MarkUp/MarkUp.html
W3C Web Accessibility Initiative - http://w3c.org/WAI/
Color Blindness - http://www.geocities.com/Heartland/8833/coloreye.html
The 216 colors of Netscape that do not dither - http://www.connect.hawaii.com/hc/webmasters/Netscape.colors.html
Why Frames Suck (Most of the Time) - http://www.useit.com/alertbox/9612.html
Web Wonk - Tips for Writers and Designers, By David Siegel - http://www.dsiegel.com/tips/index.html
Creating Killer Web Sites, By David Siegel, Hayden Books, 1997 - http://www.killersites.com/
Web Usability - useit.com: Jakob Nielsen's Website http://www.useit.com/
Web Graphics - Lynda Weinman's Web Site http://www.lynda.com/