Larry's Thoughts on Web Style

Please realize that I am not a graphics artist and, in fact, consider myself more of a technician than a creative person. Just because you have learned how to do something doesn't mean you should use every technique you know. I urge you to look at many pages and consider what looks good. Pay special attention to some of the lists of sites that are award winning.

I believe that the main consideration of most web page designers should be to make their page effective and not just look good or show off their web programming skills. Most people will use a modem, so avoid things that will download slowly. Simple, clean web pages often are best.

"Rules" dealing with Graphics

1. Use the correct file format. Normally you should use JPG files for photographic images and medical pictures. Use GIF files for illustrations and most other images.

2. Keep your images as small as possible. Most images should not occupy more than about one-fourth or one-third of the screen width. Since the typical user will look at your pages using a 640 dot wide by 480 dot high screen, your images should normally be no more than 150 to 200 dots wide. This means that if you scan 3 by 5 inch photographs, you will only need 75 to 100 dots per inch or less.

3. Keep your file sizes small. Smaller files will load much faster than larger ones. I suggest that you work to keep your image files at less that 10K. I try to never let my images exceed 20K. You can set JPG compression quite high and still have a photograph that will look nice on your web page. If it takes too long to load your web page, many users will simply cancel the load and go on to something else.

4. Avoid animated GIFs. Animated GIFs can add some interest to your web pages, but I recommend that you avoid them because they don't release the connection between the browser and the server. There are some Java applets that will let you accomplish the same effect that are much kinder to the Internet community.

Some other "Rules"

5. Don't use the Blink attribute. Use color, a small icon, or size to draw attention to a portion of your page. I don't know anyone who likes to have something blink on their screen.

6. Learn to use Tables. While the <TABLE> tag is considered advanced HTML, it is very effective for controlling spacing. You can use the <PRE> tag to line up columns of information, but then everything will appear in a fixed pitch font. You can also use the   command or several of them to create space between "columns," but remember that the user can set default fonts and font sizes on their browser. Things will almost certainly appear different on someone else's machine than on the one you use. [This page is an example of how I use tables to make a better looking page.]

7. Use frames sparingly. Later versions of many browsers now support frames. While there are a few examples where I have seen them used effectively, most of the time I find them annoying. Because the Back button of browsers works differently within a frame, special consideration should be given to navigation.

8. Test your links. I recommend that you use relative addressing for your links when you can. That way it is easy to move your pages from one machine to another or from one directory to another. With some html editors, you need to be specially careful that your IMG SRC links are not to your local drive. A reference to an image on your C-drive may work fine when viewed from your machine, but it clearly will not work when viewed from someone else's computer.

This page was last changed on November 27, 2002. If you have any suggestions, additions, or corrections send them to Larry Loos, Helpdesk@showme.net.

Back to the Show-Me Net HTML Page.

"Rules" dealing with Graphics
1.	Use the correct file format. Normally you should use JPG files for photographic images and medical pictures. Use GIF files for illustrations and most other images.
2.	Keep your images as small as possible. Most images should not occupy more than about one-fourth or one-third of the screen width. Since the typical user will look at your pages using a 640 dot wide by 480 dot high screen, your images should normally be no more than 150 to 200 dots wide. This means that if you scan 3 by 5 inch photographs, you will only need 75 to 100 dots per inch or less.
3.	Keep your file sizes small. Smaller files will load much faster than larger ones. I suggest that you work to keep your image files at less that 10K. I try to never let my images exceed 20K. You can set JPG compression quite high and still have a photograph that will look nice on your web page. If it takes too long to load your web page, many users will simply cancel the load and go on to something else.
4.	Avoid animated GIFs. Animated GIFs can add some interest to your web pages, but I recommend that you avoid them because they don't release the connection between the browser and the server. There are some Java applets that will let you accomplish the same effect that are much kinder to the Internet community.

Some other "Rules"
5.	*Don't use the Blink* attribute.** Use color, a small icon, or size to draw attention to a portion of your page. I don't know anyone who likes to have something blink on their screen.
6.	Learn to use Tables. While the <TABLE> tag is considered advanced HTML, it is very effective for controlling spacing. You can use the <PRE> tag to line up columns of information, but then everything will appear in a fixed pitch font. You can also use the   command or several of them to create space between "columns," but remember that the user can set default fonts and font sizes on their browser. Things will almost certainly appear different on someone else's machine than on the one you use. [This page is an example of how I use tables to make a better looking page.]
7.	Use frames sparingly. Later versions of many browsers now support frames. While there are a few examples where I have seen them used effectively, most of the time I find them annoying. Because the Back button of browsers works differently within a frame, special consideration should be given to navigation.
8.	Test your links. I recommend that you use relative addressing for your links when you can. That way it is easy to move your pages from one machine to another or from one directory to another. With some html editors, you need to be specially careful that your IMG SRC links are not to your local drive. A reference to an image on your C-drive may work fine when viewed from your machine, but it clearly will not work when viewed from someone else's computer.