Read a good HTML tutorial (see Resources page)
and/or have a look at the FAQ and other messages in the
help forum before asking a question.
Respect your visitors. Imagine you were a supplier, and the visitor your
customer: Don't demand, offer. What might a customer be looking for in your
product, the webpage? What might turn them away? Would a car manufacturer be
successful if they required customers to be at least 180cm tall, weigh not more
than 60kg and are at least 50 years old? Or if the delivery time was half a year?
Or if the car only functioned with safety belt unfastened?
The rest of these rules more or less follows from this consideration.
Remember that your page is only one among millions. If it is to attract
attention, interesting content is not enough: When a page takes too long to load,
is hard to read, understand and navigate, people will turn away.
An interesting, well-designed page doesn't need any whistles and bells to impress people.
Don't let a WYSIWYG editor do all the coding without checking what it did.
Especially if the editor is made by a browser company, it's highly probable that
you've been led to use features only that one browser (latest version, of course)
can understand. Moreover, they often produce trash code that only slows down loading.
Your best bet is a text-based editor where tags can be inserted using buttons and
menu commands, but you see the inserted code - a good way to learn HTML.
Make your images small (less than 20KB) to ensure fast loading. Browsers
display only 256 colours, so reduce colour depth. Reduce the height and width
dimensions and use compression to minimize the file size. (In case of JPG,
a compression rate of 38-40 is the best compromise of quality and file size.)
Animated GIFs basically consist of any number of single GIFs displayed one after
another, so the file size is often huge.
If it's essential that the image be of high quality, consider linking it
normally (a href=xy.jpg), and tell users about the file size.
Reducing the image display size using the "height" and "width" statements
of the image tag does not increase loading speed.
Make your page usable for people who don't load images because e.g. their internet
connection is slow. This includes using the "height" and "width" statements so that the
layout will be the same with or without images, the "alt" statement to tell users what
they'd see if they did load the image (especially important if the image is also a link),
and defining a background colour similar to that of the background image to ensure that
text is still readable.
Remember that there are tags that not all browsers understand. You don't really have
to step down to the oldest Netscape version of all, but browser versions that are merely a
year old are still frequently used. A good HTML tutorial will tell you which tag is supported
by which browser (version).
Be kind to your visitors' eyes: Don't use too garish colours. There should be as much
contrast between text and background as possible. Background images that are part fair, part
dark and use more than two different colours are unsuitable.
Java Applets can take extremely long to load and should not be used for purely
decorative effects. Security-aware people disable Java when surfing the web,
so they won't see the applet anyway. Same goes for JavaScript, so don't use
JavaScript for navigation. Test every page with Script on it before publishing it:
JavaScript error popups are annoying and can crash browsers.
No way that visitor ever comes back!
Some people still have to make do with 14" screens and 1MB graphics boards.
When making the layout, don't assume that the visitor's browser will be
maximized. Large images, tables and frames can look awful when viewed in a
small browser window.
Use animations with care. Blinking text is very hard to read, and
constant movement can be annyoing if the page is viewed for some time.
Music that plays automatically can be likewise annoying to some people
and slows down loading, especially if the music file is large. WAV files are
usually huge - if you feel the need to offer them, make a normal link (a href=)
and inform your visitors of the file size.
Tables may be nice for formatting pages, but the content isn't shown
until the whole table is loaded. The larger the table, the longer it takes.
It is therefore not a good idea to put the whole page into one table. Use
a number of small tables or, better yet, make do without them wherever possible.
Do not overload your index page. It is your calling card, so all the rules
for good HTML are especially important for it. A short summary of the contents of the
site and clearly visible links to the other pages are ideal. Make people
curious, but don't promise anything you can't keep.
The larger a site gets (in terms of number of HTML files), the more attention
should be paid to navigation. "Zig-zag" navigation that requires constant use
of the "back" button is tiring and slow. Consider splitting the site into
multiple areas and possibly sub-areas, creating a tree structure of navigation.
Be careful, though, that the visitor doesn't get lost!
And finally: Test your own pages. It's a good idea to create them offline
because it's a) cheaper in case of a dialup connection, b) you'll always have a
backup in case the webserver crashes, and c) you spare yourself the embarrassment
of being caught with errors in public. ;)
Ideally, you should test your once page with a browser version older than your own
and once with the "auto load images" feature and JavaScript disabled. It doesn't
have to look as beautiful, but it must still be readable and navigable.
If you use subdirectories, create the same directory structure on your harddisk.
Now if you use relative rather than absolute links (see
Subdirectory Tutorial), you'll be able to surf the whole site offline
before uploading it.
