Library Web Design - Hints on Customizing the Templates

<title>

Titles

It is important to choose a title which is as clear and descriptive as possible. This is the phrase that a search engine will display when a patron searches for your site.

Since many counties across the country share the same name - such as Franklin, Jefferson, and Logan, it is important to include your location, too.

Example: Franklin County Public Library, Frankfort, KY

As you design pages other than your homepage, you may wish to include some other sort of identifier which differentiates these pages from the homepage.

Example: Franklin County Public Library, Frankfort, KY - Children's Services

Remember, this is the tagline which will pull patrons into your library via a search engine. Keep titles professional. Remember, too, to avoid the use of library acronyms. Outside of your library, very few people understand these and a search engine will not display enough of a description to provide clarification.

{background-color: white;}

Page Color

When selecting a color, always consider the variety of patrons who will visit your site. Patrons who are color-blind, have a visual impairment, or are elderly will find it difficult to read text on bright or dark colored backgrounds. Keep in mind, too, that your website design is another version of your letterhead stationery. Do not choose colors that you would not select when sending out professional correspondence.

Most primary colors can be listed by their names, however it is best to use the HEX code (# + a six digit code) of the color you wish to use.

(See the WebMonkey Reference http://hotwired.lycos.com/webmonkey/
reference/color_codes/ for a color chart, or KDLA's page on using color for more help with color codes.)

{font-size; color; font-family;}

Formatting Text

As stated earlier, it is important to remember the variety of patrons who will visit your website when selecting the size, style, and color of your text. Your content is what drives patrons to your site; making this content as clear and easy to read as possible will help them find the information they need.

Font size: Use values that can accomodate visually impaired patrons using browser settings to automatically enlarge text. Absolute values, such as "1" or "2," cannot be resized. Instead use relative sizing which can be coded as "em" values such as "2em," or size gradations such as "+1."

Examples:

Font color: Selection of font color can affect the readability of your website's content. Like the colors you would use to write correspondence, opt for dark colors such as black or navy blue. Text displayed in light colors is not only difficult reading for visually impaired patrons, but also not as easily scannable by those with normal vision. Also, staring at bright colors for extensive periods of time tires a patron's eyes, causing them not to retain information.

(For a good example of how bright screen colors affect vision, take Designmore's quick color/eye test at http://www.designmore.com/ctesta.htm.)

Font families: Type on screen and type printed on paper are very different -- the computer screen renders typefaces at a much lower resolution than is found in books, magazines, or even pages made on inexpensive copiers. Complicated fonts - those with decorations such as serifs - are not depicted clearly on screen. These fonts can become crowded as they are condensed to fit in a small screen, or they can become jagged as they are expanded to fit a large screen.

With this in mind, it is best to choose typography from the sans-serif family, such as Arial, Helvetica, Verdana, or Trebuchet, than from a serif family.

Examples of font families:

	sans-serif fonts
	serif fonts

Example: Which of these is easier to read quickly?

Font-spacing: Visual contrast is essential in keeping your patrons reading your content. Visual contrast is highly dependent upon blocks of text surrounded by white space. A web page densely packed with text is seen by your patrons as a wall of gray, and they will instinctively reject the lack of visual contrast. Conversely, a rag tag assortment of fonts, colors, and text blocks creates disarray. This makes it hard for your patron to see repeating patterns and almost impossible to predict where information is on an unfamiliar page.

Ways to organize text:

• Left-align text
  The left margin creates an anchor, a predictable starting point for each line, making the text easy to scan. Unlike justified text, the "ragged" line endings of left-aligned text add variety and interest to the page without straining the eyes.
• Shorter line lengths
  Wide lines of text affect readability because on the long trip back to the left margin the reader may lose track of the next line. Also, your patrons will be highly annoyed if they must vertically scroll back and forth to read your content. It's best to keep spacing no wider than 365 pixels, or roughly 10 to 15 words per line.
• White space
  White space is essential for reading. It provides an occasional visual relief for the eye. Indented paragraphs work especially well for longer blocks of prose, where the indents signal new paragraphs with minimal disruption to the flow of text. Generally, one blank line between paragraphs is sufficient. Always make sure to create a buffer between sections: at least 1.5 lines between the last line and the next section header. This makes it easier for your patron to scan section headers for the content they need.

Continue to links and images >>