This page is being mirrored! Connect to the mirror sites in Canada, Italy or the USA (NEW!) if that's faster for you.

Contents:

• HTML Authoring Tools
• Gerd's HTML Design Guidelines
• Gerd's HTML Tips & Tricks

HTML Editor : HTML Assistant 1.4

Images :

Painting : Fauve Matisse 1.2.5, Paint Shop Pro 3.11

Transparency : GIFTrans 1.11 for DOS, LView Pro 1B

Tested with : Netscape 1.1 (Windows, X), DosLynx 0.8 Alpha

Recommended system :

Browser : Netscape 1.1 or greater

Screen Resolution : 800 x 600 or bigger

Colors : 32768 or more

[Go to Top]

Gerd's HTML Design Guidelines:

1. Keep it short. Long texts are boring and the typical Internet Surfer doesn't want to read more than three lines of text.
2. If you need to have plenty of text be sure to structure it.
3. Avoid blinking text at all costs.

1. Make them small. Most of my images are 16 color GIFs, therefore each image is only a few KB in size.
2. Use thumbnails for big images. If you want to offer big images, use a small thumbnail as inline image, so the reader can choose if he wants to download the big image.
3. Try to use them consistently. E.g. for all section headings on my Collection page I use the same font (Mead Bold), and for all drawings on that page I use the same 'style' (Charcoal).
4. Use transparency. This feature of Netscape can be used very effectively with minimal effort (e.g. with LView Pro 1B or Paint Shop Pro 3.11).
5. Don't use imagemaps if you can avoid it. Imagemaps are actually an abuse of HTML. Compose several smaller images to one big 'imagemap-lookalike' that still allows the reader to see what is going to happen when he clicks on it. If you use BORDER=0 don' t forget to tell the reader that he can click on the images!

1. Use few and descent colors. Your favourite multicolor texture will probably hurt the reader's eyes.
2. Use strong contrast. Light backgrounds with dark (black) text or dark backrounds with light text.
3. Don't use a white background. Take a light grey instead, it's more comfortable for the eyes.
4. Don't use interlaced GIFs. Interlaced GIFs take longer to load and display. Interlacing is used to give the user a first impression of an image - so he can choose not to wait until it is completely downloaded. Obviously this doesn't make sense for backgrounds.

1. Copy. If you see a nice effect on an HTML page take a look at the source. See how it is done and don't have scruples about doing the same on your own page.
2. Steal. If you see a nice (small) image (icons, list bullets, buttons etc.) download it and use it on your own page. It may be wise to ask before ripping images - some authors don't want to share their work.
3. Learn from the Professionals. There are various Awards for HTML Design, take a look at the winning entries. Or take a look a the various HTML Design Guidelines available (like mine).

1. Seamless composing of images: Don't use Spaces and Line Feeds between the <IMG> and/or <A> tags to avoid gaps between images. See this demonstration.
2. Perfect shadows: Use a 2-color checkerboard pattern as shadow and make one of the colors transparent. See this demonstration.
3. Try to convert GIFs to 16 colors. It often results in a much smaller size without losing too much quality.

1. Use a big capital letter at the beginning of a paragraph. Make big anti-aliased letter (e.g. with Paint Shop Pro 3.x) and use it as inline image with ALIGN=left. The text will flow around the letter giving the paragraph a professional look. See this demonstration.

Original site address: http://stud1.tuwien.ac.at/~e8925292/techinfo.htm
Last modified: February 20th 1996

This page is always under construction. Please report any errors via email.

Visit my Personal Homepage - finally in version 1.0 !!