The Dos and Don'ts of web site design

The Dos and Don’ts of Web Site Design: Part 3

Part 1 | Part 2 | Part 3

Also available in SPANISH

1. Don't use busy backgrounds on your pages:

You can create a tiled background on your web page by taking an image (GIF, JPEG, or PNG) and using it in your body tag like this:

This will cause your browser to tile the image across the web page. There are two things wrong with this:

You want to do all your styling in CSS.
Background tiles are usually bad news.

Once upon a time tiled backgrounds were all the rage on the Internet; these days most have understood that it's just a bad idea. It can work if your tile image is not noisy and is a solid color, but if you use tiles that are of, say, a picture of your dog or some other bold image, it will make your page unreadable.

2. Do end your URLs with a forward slash in your links:

Ok, this point is a touch nerdy so bare with me ... this little point will help speed up things a little as far as your user is concerned. If you have a URL (web address) that does not specify an exact page, then you want to trail the URL with a forward slash:

<a href=" http://www.killersites.com/ ">Creating Killer Web Sites</a>

In the above link, you will notice that after the '.com' I placed a forward slash (/).

If the link were pointing to a particular page, I wouldn't add the forward slash at the end of the address:

<a href=" http://www.killersites.com/ articles/index.htm ">Creating Killer Web Sites Articles Page</a>

By adding the forward slash (as in the first example), we remove a step that otherwise the web server and browser would have to take; removing this extra step can give you a speed boost. So to sum it up:

If your link is pointing to a particular file (an html page or a PHP page or an ASP page, etc. ...) you don't want to use the trailing slash. But if you are pointing to a directory like:

<a href=" http://www.killersites.com/ articles/">Articles</a>

then you want the trailing slash.

3. Don't set your type to all capital letters in your body text:

Using ALL CAPS in text is good for emphasize and title elements, but don't create long sentences or paragraphs in all caps ... it's just hard to read.

Just compare this paragraph in all caps:

USING ALL CAPS IN TEXT IS GOOD FOR EMPHASIZE AND TITLE ELEMENTS BUT DON'T CREATE LONG SENTENCES OR PARAGRAPHS IN ALL CAPS; IT'S JUST HARD TO READ. JUST COMPARE THIS PARAGRAPH IN ALL CAPS:

4. Don't have more than a few words in italics:

Italics are one way to draw attention to text, but it makes text harder to read. Using italics for one or two words on occasion is good, but if you go crazy and start using italicized text all over the place, or for long sentences or paragraphs then your looking for trouble!

Just compare this paragraph in just italics:

Italics are one way to draw attention to text, but it makes text harder to read. Used for one or two words on occasion is good, but if you go crazy and start using italicized text all over the place or for long sentences or paragraphs, then you're looking for trouble! Just compare this paragraph in just italics:

5. Don't have more than a few words in a bold case:

Sounds like the last two. Nonetheless it is still valid for the same reasons in that the text is harder to read, and then loses its point. Remember that setting text bold, italic, or in CAPITALS are all ways to bring attention to the particular words, but if you're making everything the same, it loses its impact.

6. Don't use <h5> and <h6> tags:

These tags will make your text smaller than the browser's default size and make it bold. This combination will result in text that is really hard to read.

7. Do turn off the blue borders around linked graphics:

As you know, you can turn graphics into links or, in other words, buttons by wrapping a link tag around an image. By default, browsers will surround the image with an ugly blue border showing us that the image is a link. Your images that are acting as buttons should look like buttons; it should be obvious that the image is something to click on ... so we don't need the blue border.

To get rid of the blue border all you need to do is add this code inside your image tag: border="0"

Check out an image tag:

You may have noticed that I snuck in another tip in this one: making your button images look like something that can be clicked on. That's a 'free of charge' extra for you!

8. Do provide alternate text (using the 'alt' attribute of the image tag) for all your major images:

Alternate text is text that you insert in your image tags (<img ...>) that is used by text only browsers. Text only browsers are used by the blind to surf the web since images won't help them very much ... the alternate text in your image tags is read by the text only browsers in place of displaying the images.

You should put meaningful information in the alternative text that will benefit those who can't see and it will also help you with the search engines. The alternate text is inserted in your image tags like so:

The alternate (alt) text will also be displayed as a tool tip in Internet Explorer.

9. Do make images that look like buttons act like buttons:

I think we saw something like this already! Just as I said above, button graphics should look like buttons ... and on the flip side, don't create graphics that look like buttons that aren't buttons!

What constitutes a 'button-like' image?

Classically, any image with bevels or a 3D look to it is typically intended to be a button and people will naturally try to click it. But the best way to determine what a button looks like (from your visitors' perspective) is to consider your web site; if you find that your links are underlined text then any text that is underlined will be perceived as being a link or button ... a little common sense goes a long way here. Another thing to do is to visit other web sites and pay attention to how they do things.

Whatever you do, remember these two points:

1. Always try and make things as clear as possible to your visitors.

2. What may be obvious to you may not be obvious to your visitors!

10. Don't use too many colors in your web site:

Color is a way for people to identify things; that is why the Coke label is dominantly red and the Pepsi label is dominantly blue. Keep the color scheme of your web site limited to a couple of colors and keep it consistent across your site unless you want to denote some major section.

For example: On www.killersites.com I use black text on white pages (with green for highlights) in the articles section, the purpose the color scheme is to differentiate it from the other parts of the web site.

Stefan Mischook

Top

Killersites.com - The Dos and Don'ts of web site design