The Do's and Don'ts of Web Site 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:
- 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.seektemplates.com/">Web
Templates</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.seektemplates.com/articles/index.htm ">Web
Templates</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.seektemplates.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.
