Web Design Secrets

MISCELLANEOUS

part 1 | part 2 | part 3

THE DOS AND DON'TS OF WEB DESIGN - PART 3

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:

<body background="myBackground.gif">

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

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

Once upon a time tiled backgrounds where 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 paragraph 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 PARAGRAPH 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 your 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, italics or in capitals are all ways to bring attention to the particular words, if you're making everything same, it loses it's impact.

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

These tags will make your text smaller than the browsers 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:

<img src='images/pictureWebPage.gif' border="0">

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:

<img src='images/pictureWebPage.gif' alt = "web page graphic - click here to view sample web page." border="0">

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

NOTE FOR MACS:

The ALT doesn't work on the MAC, so instead you can use the 'title' attribute instead:

<img src='images/pictureWebPage.gif' title = "web page graphic - click here to view sample web page." border="0">

There is no reason you can't use both on the same tag.

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 images with bevels or a 3d look to them are typically intended to be buttons and people will naturally try to click them. 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.

What ever 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 to your visitors!

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

Color is a way that people identify things; that is why the Coke label 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.

Part 1 ...

Jump to the top of the page.