Related items

Web Design Hints and Tips

You are here: irt.org | Articles | Design | Web Design Hints and Tips [ previous next ]

Published on: Sunday 14th March 1999 By: Paul Rundle, Pankaj Kamthan and Martin Webb

Introduction
Content is King
- Saying it rite (sic!)
Animation
Graphics
Sound
Browser Plug-ins/ActiveX Controls
Java Applets
Authoring
The Bottom Line
References

Introduction

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:

Appropriateness - in application of any technology or standard, its appropriateness should be questioned and determined. Questions like the following should be asked:

Where is a certain technology applicable, and why?
Does it help solve any existing problems?
Does it offer any specific advantages?

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:

Commercial - Advertising that needs to get their message across for public attention. There is a lot to be conveyed but in a limited amount of space (around the 468x60 pixels mark). So a GIF89a-type image is created with appropriate number of frames. Reading habits of people is determined (statistically) to decide colors, fonts and frame-speed.
Educational - A "dynamic" phenomena is to be shown in the class, such as how the stability of a system breaks down when parameters are changed. A movie that corresponds to it has been made but it too long to be shown in whole in the class. So snapshots of representative or key stages are captured and integrated together as an animated GIF for presentation.

Feasibility - the trend of "jump" on a "technology bandwagon" should be avoided. Rigor should be separated from hype. Even if a certain technology looks promising, is it feasible? Are there resources to implement it? If not, what are the costs?
Usability - if implemented, how easy will it be for the users to understand it? Use it? What kind of help should we provide for those who have difficulty using it? What standards or norms should be followed from the user-interface design viewpoint?
Integration - how well does the use of a certain technology integrate with the existing structure? Is the integration seamless, or are there any breakdowns?

The difficulty of dealing with the subject lies due to the integration of art and science. On to the tips...

Content is King

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.

Saying it rite (sic!)

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.

Animation

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:

Navigation - use of Flash (text-based animation) for example at Macromedia's Web site.
Promotion - including an animation that consists of a few frames from a video.
Education -

Physics. Motion of a pendulum.
Mathematics. Illustration of evolution of an ordinary differential equation under change of initial conditions/parameters.
In both the above cases, "time" is an implicit factor. Hence, the justification.

Advertising - such as banner advertising. There are many good examples around.

Animation can be split into several distinct areas:

Animated GIF's

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.

Animated Dynamic HTML

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".

Scrolling Status Text

You've seen them: "Hi, Welcome to my cool site..." scrolling across the bottom of the browser window. This is normally people's first attempt at JavaScript, usually copied from someone else's site, because they were "impressed", and want to impress others. All it does is show that you can "cut 'n paste" someone else's code - resist the temptation at all costs.

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.

Clocks and Timers

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.

Graphics

Browser Logo's

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?

Screen Resolution and Color Depth

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.

Image File Size

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.

Colors

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

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...

Image Height and Width

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.

Sound

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:

Commercial - A record company or a retailer can include sound files as samples of the albums they offer. To avoid interference with the user's settings, an option can be provided to play these files at user's discretion (as opposed to automatic start-up).
Educational - In a class on acoustics, the teacher can supplement a theoretical explanation by playing a sample note of different instruments under study, thus bringing more realism to the session.

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.

Browser Plug-ins/ActiveX Controls

Never go over-the-top with multimedia plug-ins/ActiveX controls. The plug-ins/ActiveX controls can slow down the loading of a page considerably, so first try and achieve what you want in some other way, using JavaScript, CGI or DHTML. If not, then make sure that the multimedia elements are relevant. Is there any need to copy and use the mirror applet or fireworks applet?

Java Applets

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.

Authoring

Blink, and its gone

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:

APPLET
BASEFONT
CENTER
DIR
FONT
ISINDE
MENU
STRIKE

The following have become obsolete elements in HTML 4.0:

LISTING
PLAINTEXT
XMP

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.

Refer to the W3C Web Style Sheets Home Page for all the different aspects to Style Sheets and the W3C HyperText Markup Language Home Page for the latest HTML Recommendations and draft standards.

Page Length

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.

Use of HTML Frames

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).

Guestbooks

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?

Page Counters

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/images

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.

Browsers

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)

The Bottom Line

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:

Content
Ease of use
Speed

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.