• Learn HyperText Markup Language (HTML). HTML Goodies includes tutorials, primers, and examples for creating web pages. How Do They Do That with HTML includes examples of how to perform some of the HTML tricks. Web Reference and The Web Developer's Virtual Library, and HTML Help include many HTML links including how-to and tools for improving your web pages.

• Put the important information at the top of the page or the viewer may move on before looking any farther.

• Spell-check your pages. Spelling errors look very unprofessional and destroy the credibility of your pages. One way to do this is to use WebSter's Dictionary.

• Check your pages periodically for broken links. Web pages need maintenance just like anything else. Viewers assume that if a link is important enough to put on your page, it’s important enough for you to keep updated. Broken links are another way to destroy your credibility. Dr. HTML, Dr. Watson, and Link Checker are on-line validators that will check your web page for errors. Bobby is another validator that specifically checks your pages accessibility by people with disabilities in addition to checking browser compatibility. There is also a very good freeware/shareware program called InfoLink which will check your pages for broken links.

• Always uniquely title your pages. Have you ever created a bookmark where the title was No Title or Untitled? My Home Page isn’t much better for a bookmark name unless it actually is your home page.

• Always put a back button or home button on your page. I didn’t think this was important, because the user should be able to press the browser’s back button, but what if the user came directly into one of your pages from a search engine or someone else's page? They can’t get to your home page to see what else you’ve got.

• Put a date at the bottom of your page to tell when it was last revised and an e-mail address in case the viewer has comments or questions.

• If you have files for downloading, state the size of the file.

• Don’t <blink>!

• Don’t use large graphics, i.e. over 50K bytes. Not everyone has a fast connection. If you have a large graphics image that you really want to display, put a thumbnail of it on the page and let the viewer click on the thumbnail to get the full image. Most viewers aren’t willing to wait more than 10-15 seconds for a page to load. GIF Wizard is an on-line program that can reduce the size of GIF files.

• If you use gifs for horizontal rules or bullets, try to find a set that you can use consistently throughout your pages. The gifs will then be downloaded once and then just extracted from the cache for succeeding pages.

• Use a light colored background with dark text. Have you ever tried to print white or yellow text from a web page? I printed 4 or 5 pages once of white text and thought there was a problem with my printer until I realized the page designer used white text on a black background.

• Be careful with background files. I personally like background files, but keep the size of the background file small and avoid images as part of the background. How often have you been to a page with background images and had trouble reading part of the page because the words were in the image or the image was distracting?

• There is a default standard for the color of links. Blue is for a link you haven’t visited, purple is for visited links, and red is for active links. Some viewers will get turned off if you change this default color scheme. What’s even worse is if the color scheme changes within your own links. Just about the time a viewer figures out your scheme, you change it.

• Always use the alt= attribute with images to provide text alternatives for those who have graphics shut off or are unfortunate enough to be stuck with a text-only browser.

• Use a border around images you can click on, so the can see the color of the border to determine whether that link has been used. It doesn’t have to be a wide one, border=1 is just fine.

• Use the height= and width= on graphics, which will allow the page to load faster. (If you’re lucky, your web page editor will automatically determine the size.)

• Don’t you hate these under construction symbols? All web pages are usually subject to change. If your page isn’t ready to be viewed, don’t put it out on the Web. It’s like putting your page out there for others to view, then apologizing to them, because your page isn’t worth viewing yet.

• Here's an example of one of the best graphically designed web sites I've seen and they have web development graphics available for download. Be sure to check out Main Street.

• Here's another link to an excellent source of Animations and Graphics for your Website

• Don’t use frames just because you can. Frames can get very tedious, especially if the web page designer doesn’t know how to implement them correctly. Have you ever been on a frames page that had a link to another frames page that only allows the viewing area of the first frames page? Ugh! How about having to back out of a heavily frames-oriented site? Have you ever been to a site with about four different frames in a 640 by 480 screen? Did you stay very long? Have you ever tried to print something from a frames site or bookmark an internal frames page? Always give the user the option for a non-frames version and make sure you know how to properly implement frames if you feel you have to use them. If you must use frames, the FrameShop will help you build the HTML code on-line to do it correctly. Better yet, don’t use frames at all. Why Frames Suck.

If you have come to this page in a frame from another site,
Click here to break free

To set this up, the HTML code looks like this:

• Be careful about fancy things such as midi files, java applets, or activex controls. You won’t make the viewer very happy if they get an illegal operation and have to abort their browser program or worse yet, reboot. The "browser wars" have created problems where some things work well in Netscape, but not in Internet Explorer and vise versa. It's best to test your pages out with both of these browsers and not use anything that can't be handled by both browsers. Some of this fancy stuff can be pretty cool, but give the viewer the option of looking at it.

• MIDI files playing while you view a page can be interesting, but give the viewer the option whether or not they want to hear it. They may not like the same type of music you do and may not want to wait for it to load. (But then, if they don’t maybe you don’t want them to return anyway.) They also may be working in the office or have a family member asleep that won't appreciate the sound. Now I'm going to break one of my own rules, since later versions of Microsoft Internet Explorer and Netscape Navigator have done an excellent job at providing a good way to implement playable MIDI files. The problem is, they have each developed their own way of doing it. The following example is the way I have determined to be the best compromise between the two:
  
<p align="center"><a href="filename.mid"><font size="2">filename.mid</font></a><font size="2"> (filesize bytes)</font></p> <p align="center"><embed src="filename.mid" align="baseline" border="0" width="140" height="60" autostart="false"></p> <p align="center"><font size="1">Press <strong>play</strong> to start</font></p>The words width="140" height="60" is a compromise that seems to work pretty well for both Netscape and Internet Explorer. Ideally for Internet Explorer, it would be not as high, but wider. The autostart="false" statement is what allows the music to wait until the viewer presses "play". Changing it to autostart="true" causes the music to start immediately after loading.

Here's a working example of the results:

timeofmylife.mid (78,244 bytes)

Press play to start

• Some web page critics will tell you to stay away from any movement such as animated gifs or marquees. They detract from the content of the page. My personal opinion is that straight text is boring and a little movement isn’t bad. Again though, watch the size of those gifs. Animated gifs are much larger than a comparable static image.

• Don't use status bar messages! These are the messages that scroll across the bottom of the page. This area is for me to check the status of loading the web page and where a link points, not a place for your message.

• Once you've created your web pages, you may want to make sure others see them. VirtualPROMOTE and WebStep 100 explain ways to promote your web site.

• Web Page Design Tips

• A Guide to HTML Style

• Top Ten Ways to Tell If You Have a Sucky Web Page

• Web Pages that Suck