Top ten things to know/do/not do for your site



To use a gradient like this, you can easily just take a one-pixel sliver of the gradient image and repeat it. It should be about 200 bytes.

The only thing not 3-D on this page is the "Web Design & Photoshop Tutorials" text, and the two lines.


Black/White: With black on white or white on black, which is what the body text of your site should be, the contrast is 100%. (You could even improve it by removing anti-aliasing (not) :)


Green/Red: This is an intentionally bad combination of colours, but one I've seen before.


Green/White/Red: With a bit of an outline, those colours come up very nicely.


Blue/White: The contrast is pretty good here already.


Blue/Black/White: Though putting this black outline in doesn't look bad, it makes the text harder to read, due to the increased complexity of the image. If the image were ten times bigger, the outline would be no problem.

To see some good examples of outlining (or its absence), take a look at most chocolate bar wrappers. Their writing is pretty big, so they often sacrifice part of that size to give it multiple outlines.

On the other hand, newspapers and magazines often have text with no outline, to preserve simplicity, even at the cost of contrast (sometimes also to cater for the printing process).

The next installment of "things" will arrive shortly. :)

Tutorials | Articles | Templates | Website | Help | About