|
by: Stefan Mischook of www.killersites.com
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:
You want to do all your styling in CSS. 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 URL's 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.
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.
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
www.killersites.com
|
