Main Page  HTML  Style  Promotion  Links       Web Rings       Credits  Feedback       Critique       Sign In       Guestbook Get your FREE web site!		| Rules for Great Sites | Speeding up Graphics Downloads | Text Layout Rules | | Status Bar Messages | Align text and graphics | Single Pixel GIF Trick |   Rules for Great Sites    Anti-alias your text and graphics.  Jagged graphic edges are like stubble.  YUCK!    Use good fonts.  Use something fresh.  Those old fonts are functional but really boring!      Avoid clip art.  We're all sick and tired of the same old clip art and stock photos.  Create your own graphics.   I even created my own Sponsored by GeoCities logo so that my site would look more original.  Go to Calla's Spot for inspiration.    Drop those plug ins!  Show some restraint, and lay off of the shiny texture mapped spheres and psychedelic backgrounds.   KPT is like Web Designer Crack.  People find it hard to kick the habit.  The fact is those graphics take so long to load that most people will leave your site before it's finished downloading.    Halos are bad.  Avoid the dithering that creates a halo of artifacts (little speckles from the JPEG lossy compression technique) around your graphics.  Check out your graphics on different monitors (some will dither, others won't).  If your see the artifacts, save JPEGs at the highest quality possible or use the color safe pallette, reduce the number of colors in the graphic and save it as a GIF.   GIFs have lossless compression and are best for graphics. JPEGS on the other hand are best for photographs.    Handle animation with care.   They can quickly pump up your page size, and are generally annoying.   If you must use animation try subtle color shifts or small movements only.   While were talking about annoying stuff, avoid the <BLINK> tag.    Fast pages are good pages.  A great way to get people to stay at your page is to have the content load before the visitors social security kicks in.   Use HEIGHT and WIDTH attributes in all of your <IMG> tags so that people can read your text while waiting for the graphics to load.   Try to keep your pages total file size to less than 35Kb. Back to top. Speeding Up Graphics Downloads    One of the easiest ways to shorten the download time of a web page is to reduce the size of the graphics on it.  Each pixel in a 16M color graphic requires 24 bits to save the color information.  Now, do you really need 16M colors in that graphic?   You might, but you probably don't. Try to reduce the number of colors in your graphics.   Most clip art style graphics only use 16 colors.  That's only 4 bits per pixel or 6 times less bandwidth.    Some graphics programs have a function that reduces the number of colors for you and lets you view the graphic to see if it has degraded.   Go check out these sites for more information. Back to top. Rules for text spacing This tip comes from Internet World. June 1997. Rule #1 - Keep your text in columns that are 400 pixels wide or less. A person can't read more than one or two sentances that are stretched beyond that.   Have you ever seen a newspaper or a magazine that had text all of the way across the page?  I didn't think so.  They know good design. Rule #2 - Don't rely on browsers to set the width of your columns. Use an invisible table with a fixed width attribute to set your column width. Rule #3 - Leave about 50 pixels of empty space around all blocks of text and graphics. There is room for variation on this rule but in general it will improve your page layout. Back to top. Put Your Own Text on the Status Bar You can put your own text in the status bar at the bottom of your browser using the onMouseover JavaScript event handlers. <A HREF="dummy.html" onMouseover="self.status='The Mouse is over the Link!!!'; return true" onMouseout="self.status=' '; return true">Put the mouse over this link.</A> Gives us this: Put the mouse over this link. Back to top. Align Text and Graphics With Transparent Tables This trick comes from Tabatha Holtz Home page. Use tables with the borders turned off to align your text or graphics pretty much anywhere you want.A good example of this is on Tabatha's Home page.She's used an invisible table to make a ring of images around a center image.Check it out it's cool! Back to top. Single Pixel GIF Trick This tip comes from Creating Killer Web Sites. HTML, as it currently is written, does not support indentation for paragraphs or double spaces between sentences.To get around this limitation you can use a transparent single pixel GIF with the HSPACE attribute.The HSPACE attribute sets the number of pixels between the graphic and text . Since the graphic is only one pixel and it is transparent we essentially get a tab.The syntax for it is: <img hspace=5 src="pixel.gif" alt="Transparent Single Pixel GIF"> Here are some examples with the BORDER attribute set to 1 so you can see the GIF. HSPACE set to 5. HSPACE set to 10. HSPACE set to 15. HSPACE set to 25. If you want to make a copy of any of them then right click on it and save it. You can also add the VSPACE attribute if you want a vertical offset. Another method to do the same thing is to change the width and height attributes in the <IMG> tag. This single pixel gif has width and height set to 10 pixels and it's easier to right click on. Back to top.   Copyright © 1997, 1998 by Jim Meeker E-Mail: jim314@oocities.com    ICQ: 724480 Last Updated:  12/28/97  05:18:30 CST