Free Design Tips

   * These tips are the things I have learned
in my experience designing pages.

10


When adding images to your pages, make sure to use height and width dimensions, along with alternate text tags in your <img src>.

Example:

<img src="flower.jpg" width="50" height="60" alt="Icon of a Flower">

This is especially important if you have graphic rich pages. The reason being the Netscape © browser needs to know the dimensions of a graphic, so that it knows how much space to allow the graphic on the page, in regards to the other text and images. If you don't tell it how much space to leave for the graphic, it loads the entire graphic before loading any other text or graphics on the page.

You will recall seeing this happen, if you use a Netscape © browser when you sit and sit and several minutes later you see a page of 10 graphics with text below.

If this person had used the height and width dimensions, you would have seen a box the size of the graphic to be loaded, and the text below it, while waiting for the graphic to load. If the person also used an "Alternate text" tag, you would see whatever they listed as their "alternate text" within the box where the graphic would load, thus you'd know what type of graphic you were waiting for.

Some people don't load graphics automatically, and if you use an "Alternate text" tag, they can see if they might want to manually load it later. Then, there are those with Text browsers. They would only see an [IMAGE] on their screen and have no clue what it was. They still couldn't see it with the "Alternate text" tag, but at least they'd know what was there. This is especially important if your image is a sign of some sort.

9


Unless you are creating a page to be viewed by one specific type of browser, don't use "Netscape ©" or "Internet Explorer ©" ONLY tags. If you would like a reference to which is which, check here.

8

Animated GIFs can make or break a page. LITERALLY. Using Animated GIFs sparingly is the key. A good rule of thumb would be: Do not use more than 3 Animated GIFs per page.

You ask why? Well, overuse of Animated GIFs on a page causes some or all of the GIFs to stop animating. On top of this, if you get too many on a page, you can cause people's browsers to crash. Not a nice thing to happen, and you end up with an unhappy visitor who might not return.

7

Use the <font> tag to alter the size, color or face of your text. Alot of people, use <h#> to alter the size of their text.

The <h#> tag is meant to be used as a Header, not to be used in the middle of paragraphs, and other places. The <font> tag can be used to do many things. For example:

<font size=2 face="comic sans ms" color="#ff0000"> would produce this:
This text is size 2 comic sans, red in color.
Keep in mind that setting face types is fine,
but if a visitor to your page does NOT have that font installed in his/her computer, they will see a default font.

6

If you use graphics for links to things, you might see an colored outline around it. To remove this outline, just use the "border=0" tag within your <img src> tag.

Example without removing the line: Colored Wheel

Example removing the line: Colored Wheel

The code was written like this:

<a href="tips.html"><img src="wheel.gif" width=31 height=31 alt="Colored Wheel" border=0>

Notice the "border=0" at the end of the image tag? That's it. Simple. :)

5

Unless your whole purpose in creating a Web Page is to provide meaningful links to other sites, try to make your page rich in content that doesn't take your visitors AWAY from your site, but makes them want to stay, and return again and again.

Another thing on this same theme would be: Don't have your links page at the very top of your page. A visitor may pick a link and not return to see the rest of what you have to offer. Your very best work might be near the bottom of your page, and they'd never even see it.

4

One of the neatest resources I have found in helping me create my pages has been Doctor HTML. Check out your coding skills by clicking on the "Doctor HTML" link and entering your address. Let me tell you, it was scary to see all the mistakes I made the first time I did.:)

3

People like to see a page that shows the webmaster or webmistress constantly is improving it. Because of this, it is a good idea to list somewhere on your main page when you last updated your site. I list this information in the footer, along with the page URL.

2

Make use of your browsers "View Source" function. If you see a particular background color shade you like, or the way the person designed their links, check out their source and learn. I'm not suggesting you copy someone's page! I am suggesting that if you like that color, copy the RGB#'s and use them on a page of your own. Or if you like how they designed their tables, use a similar format to do your own. I know I have learned things by doing this. I never outright copy anyone's design, but I will use techniques as a base for creating my own design.

1

I can't stress this one enough. Do NOT link to other people's sites for your graphics. If a person has a collection of graphics they are nice enough to display for you to use, DOWNLOAD them and put them in your own directory. Do NOT link to their page, and steal their bandwidth. I suggest you check out Web Prestige and see just WHY it's wrong to do this.

I hope you have found my tips informative, and that
they will help you build a better web page. :)

Back to Free Design Tips

people have visited this page.

Copyright © 1996-2002, Shelly Fabian
http://atouchofsheldesigns.com/tips.htm