Color schemes

If you are not an artist, you may need assistance in picking the colors for your site. If you are a complete novice or know that you tend to match stripes with plaids, you are probably better off using a predesigned template. If you do have color sense, you will still need to keep a few “rules” in mind when designing your site. Stick to a few key colors: three to five are best. Complementary color schemes work very well, e.g., blue and orange. Monochromatic or analagous color schemes will also work. See Kuler article for more on picking color schemes.

Font schemes

Did you know that you only have a handful of fonts from which to choose if you want your visitors to see the same as you see on your screen? Most of us have dozens of fonts installed on our personal PCs from various software programs. The trouble is that the visitor must have the exact same font installed on their PC in order for it to be displayed in their browser. For this reason, it is important to stick to the following fonts which I have grouped into two main categories: serif (w3c.org definition:  “Glyphs of serif fonts, as the term is used in CSS, have finishing strokes, flared or tapering ends, or have actual serifed endings [including slab serifs]. Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the ‘sans-serif’ generic font family.”) and sans serif (w3c.org definition: “Glyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain — without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the ‘serif’ family.”). Cursive (w3c.org definition: “Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.”), fantasy (w3c.org definition: “Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters [as opposed to Pi or Picture fonts, which do not represent characters].”) and monospace (w3c.org definition:  “The sole criterion of a monospace font is that all glyphs have the same fixed width. [This can make some scripts, such as Arabic, look most peculiar.] The effect is similar to a manual typewriter, and is often used to set samples of computer code.”) are also supported font types.

Page layout

Another design element which will give your web site a unified look and feel is page layout. Page elements (banners, menu bars, navigation bars, pictures, number of columns, footers, etc.) that are located in the same place on every page will achieve this. Again, predesigned templates can assist you greatly in this task.

Browser compatiblity

There are many browsers in use around the world. Here are the statistics for September 2009 for this web site:

Top 10 Browsers

1. 50.4% – Microsoft Internet Explorer (41.5% of the total are still using version 6)
2. 32.1% – Unknown
3. 6.8% – Opera
4. 6.4% – Mozilla
5. 2.3% – Firefox
6. 1.1% – Safari
7. 0.3% – LibWWW
8. 0.1% – Lynx
9. 0% – Netscape (1 hit)
10. 0% – Wget (1 hit)

Based upon these statistics we need to test on a variety of browser versions because different browsers (and their versions) support different web standards.