Make your page look good!Just a few easy rules will make your web page look sharp and load fast.
- Don't overdo the graphics. Keep them small and choose graphics that enhance the message you have -- not distract from it.
- Don't use animated graphics or blinking text unless you are absolutely certain they are needed to draw attention to a point you want to make. These can be very distracting to visitors.
- Be sure your background and text colors have sufficient contrast. Remember that others may not see exactly the same colors that you do. Choose colors with legibility in mind.
- Be careful about choosing fussy backgrounds. These are often merely confusing and irritating for visitors to your site.
- Use alt tags when adding graphics to your page so that if the graphic is slow to load visitors will know what to expect. Also be sure that dimensions of the images are listed so they will load more quickly.
- Think about differences in resolution when placing and sizing objects. The goal is to not force visitors to your site to scroll sideways.
- Don't mix too many font styles. Follow the same rules as you would for desktop publishing. Keep to one serif-style font and one sans serif font. Changes in emphasis can be accomplished by varying text size, and with bold and italic tags.
- Don't mix too many font colors. One consistent color scheme is far more effective. Also, the default colors for links are usually the best unless you have a background with poor contrast.
- Clear, strong, vertical margins are effective, clean, and strong-looking. Most pages look best with text and headlines left-aligned. Don't use centering unless you think it is clearly a better visual effect. Mixed alignments (some centering, some left-aligned) are rarely effective.
- Use <BLOCKQUOTE> or a table to bring text away from the far left margin of the screen.
This makes the page easier to read.- Think about your audience and what they would want to see.
- Study other sites to see what works and what doesn't.
- Make sure all your links work.
9th Assignment:
Check to see that your page loads quickly, looks sharp, and is easy to read.
[In order to see the design elements of the example pages, load full-size by clicking the "box" button on the upper right corner of the new window task bar.]If your page has graphics that are very large (such as pictures, for example) use a thumbnail on the page, and give the visitor the option of clicking on that image to see the larger version. Mike's math page, for example, has a very large graphic that could be slow to load and causes the page to scroll left to right. Mike wants the graphic to be large so that students can print it out full-sized, but he could probably save loading time and make the page look cleaner by describing the page or making a thumbnail, and then linking to the larger image. See what I mean.
Note that you can link directly to a graphic with the <A> tag, rather than to another HTML document, like this: <A Href="mathofweek.jpg"><IMG src="lesson9image.gif" border=0></A>. The graphic will appear alone on a new screen and can be printed with the "print" command on your browser. (Note: When placing a graphic inside of <A> tags, be sure to add border=0 to the IMG attributes or you will find you have a blue border around the image.)
To see the difference alignment makes, check out the Webmaster Club Main Page. This page has left alignment. Now look at this: Webmaster Club Main Page with center alignment. Which do you think looks cleaner and is more effective?
Another small addition can be very effective when loading pages with dark or solid background images. Change your BGCOLOR in the BODY tag so that it matches the color in the background image. Adrian did this with his A-9 Classroom page. If he had not done this, the default background color would have been gray (or maybe even white) and the visitor would not have been able to read any of his white text until the background loaded. By making the background the same blue color as the major images, their appearance does not cause the visitor to feel a sudden shock when they do load.
Copyright ©2000, Marilyn Huffman. All rights reserved.