Creating a Unified Look

May 11th, 2009

When visitors come to your site and go from page to page (hopefully, they will stick around that long!), do they know that all the pages they visit on your site are all part of your domain? Your web site should have a consistent look and feel throughout all your pages.

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.

serif fonts sans serif fonts cursive fantasy monospace
Times New Roman Arial Caflisch Script Alpha Geometrique Courier
Garamond Verdana Adobe Poetica Critter Courier New
Bodoni Tahoma Sanvito Cottonwood Prestige
Minion Web Helvetica Ex Ponto FB Reactor Everson Mono
Stone Serif Avant Garde Gothic Snell Roundhand Studz  
Georgia Univers Zapf-Chancery    
Bitstream Cyberbit Futura      
  Stone Sans      
   Gill Sans      
  Akzidenz Grotesk      
  Trebuchet      

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.

Limiting Your Content

May 5th, 2009

When developing your web site, it is very important to focus on what you know. Keep your content relevant to your anticipated users. When planning your web site, narrow your focus and then stick to it.

Limiting Design

Your web site design should help people find the information they are seeking. This is really two separate categories. First, you will want to make sure that you have a consistent design throughout your site. This can be accomplished through a template or cascading style sheet (more on this in another article). Secondly, you will want to keep your pages short, less than 1,000 words.

Keep vertical scrolling to a minimum — a sales page and blogs seems to be the accepted exceptions. Horizontal scrolling, however, is never acceptable. The “standard” width is currently designed to work on a 1024 x 768 monitor resolution. This amounts to about 960 usable horizontal pixels. Keeping your design narrow is ideal as it is difficult to read across wide columns of information. There’s a reason newspaper columns are so narrow!

Limiting Pages

This doesn’t mean limiting your site to a few pages. Content rich sites make the search engines happy. What this does mean is sticking to your topic and breaking up long pages into several pages. It also means you should combine very short pages that only have a paragraph or two of information. “Perhaps the only thing readers hate more than having to sccan thousands of words onone page is constantly havingto click to a new page, because there are only a few words on each one.” (Martin, 2008)

Limiting Language

Who will be visiting your web site? What language will they use? Do they understand technical terms specific to your topic? You may need to provide a glossary or links to Wikipedia to explain unfamiliar terms. Also be careful not to talk down to your audience.