Creating a Unified Look and Feel

[UPDATED]

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 unified 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 analogous color schemes will also work. Remember that your color scheme should apply to your entire site and not have different colors on every page. You want your site to have a unified look and feel. See Adobe Color 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 five main categories: serif, sans serif, cursive, fantasy and monospace.*

Many experts recommend that you stick with just two fonts throughout your site if you wish to achieve your goal of a unified look and feel. One popular scheme is to choose a sans serif font for the body copy and a serif font for all headlines. Cursive, fantasy and monospace fonts should only be used for special effects and, if used, used sparingly.

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

[NOTE: Since this article was first published, new ways of including fonts have been introduced. This site, for example uses Montserrat (body text), Raleway (headings) and Sacramento (logo)  from Google fonts. Irregardless of which fonts you decide to use, it is still recommended you stick with two. I recommend one serif and one sans serif with a “fancy font” used sparingly.]

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 compatibility

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)

Compare that to 2017

1. Chrome 55.16%
2. Safari 17.88%
3. Firefox 11.84%
4. Mozilla Compatible Agent 5.16%
5. Internet Explorer 3.65%
6. Safari (in-app) 2.77%
7. Edge 1.89%
8. Android Webview 0.76%
9. Amazon Silk (Kindle) 0.38%
10. Opera 0.25%

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

[NOTE: Since this article was first published, mobile devices have played a much larger role in how people view websites. My policy is to design for the current versions of all of the major devices plus mobile.]

*Definitions: 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.”).