Library Web Design - Hints on Customizing the Templates, Page 2

<a href="">

Hyperlinks

Due to the tempting possibilities of Javascripting, many websites go overboard with the coding of hyperlinks. Blinking fonts, animated images, and odd page transitions are some terrible examples of this.

Links are the tabs in your "reference book" of content. They can be customized to fit within the scheme of your webpage, but care should be taken to make them as clear and useful as possible. There are two types of links: navigational links, which are responsible for moving your patrons through your website, and hypertext links, which offer other resources or services that add to the main content of the page.

Tips: Navigational Links for Menus

• Use standard placement of navigational menus: either along the left side, or along the top
• Use the same typeface and have the same special effects on all your navigation buttons (such as a drop shadow). Your navigation buttons, mastheads, bullet points, and divider lines look best if they are designed using one of the colors in your library's marketing color scheme.
• Choose link text that clearly identifies the page to which it is linking (...and make sure the page's title matches this text)
• Unless your pages are intended to be used only by staff or similarly educated users, avoid acronyms.
• Do not place a link to the homepage on the homepage. Many times, when using templates, web designers forget that "home" is on their homepage....
• ...but DO include a link to the homepage on every other page. This will alleviate the patron having to hit the "Back" button several times in order to get reoriented.
• If possible, include a description in the link coding which will appear on the mouseover event.
  Example: KDLA Catalog (hold mouse over the link for example)
  You do this by putting a "title" tag in the hyperlink coding
  <a href="http://kdla.kyvl.org" title="Search KDLA's Catalog for Books, Documents, and Multimedia.">KDLA Catalog</a>
• Be sure to format links so that patrons know if they have already visited that page. In most browsers, the default color for visited links is purple.

Tips: Hyperlinks within Text

• Choose colors that closely match your text color. Reading text on the screen is hard enough without being distracted by link colors scattered across the page.
• Retain link underlining to distinguish links from regular text. Visually impaired or color-blind patrons may have difficulty discerning colored link text in a long section of content.
  (Do not underline text which is not a hyperlink. Patrons will think it is intended to be a link that is not working.)
• Choose longer strings of text for hyperlinks. Children and elderly patrons may not have the mobility skills needed to aim the mouse at "smaller targets."
  Example:
  Email KDLA's AskLib for homework assistance.
  Email KDLA's AskLib for homework assistance.
• Be judicious in selecting text for hyperlinking. Hyperlinks are the modern equivalent of the footnote. They should be relevant to the topic at hand, and provide more information that the patron would like for further reading. You want to keep your patrons interested in your content, rather than being tempted into visiting other sites.
• Avoid "click here." Most patrons are familiar with the workings of hyperlinks, and do not need direction.
  Example:
  To visit KDLA's website for Certification information, click here.
  See KDLA's Certification page for more information.

<img source: "">

Use of Images

Images are an effective tool in keeping patrons interested in your content. However, they can also make or break your website. Many times, web designers use a plethora of images to supplement weak content, which only adds to the download time of the page, making the patron's disappointment in the page even worse.

Below are some tips on using images:

• Keep the size and number of graphics as low as possible.
  The standard size of a web page shouldn't exceed 75 kilobytes. Always keep this in mind when working with graphics: each navigation button, vendor logo, and divider add significantly to the webpage's size. Unless you are posting a gallery, the patron is there for content rather than visual stimulation.
• Crop photos
  To conserve "virtual" space, it may be best to crop photos. A rule of thumb in cropping photos is to include only the essentials - those things being described in the content surrounding the image.
  Example:
  

  	These four images are about the same file size (4KB). Which are the clearest and have the most impact? If all were enlarged, would these conclusions change?
  	"A Man Wearing a Suit Sitting in a Wicker Chair Holding a Baby, 1905" Linda Neville Papers, Kentuckiana Digital Library "Bookmobile Day," KDLA Communications Team

  
  
• To display large images, use "thumbnail" images which link to the larger file. This way the patron will not have to wait for a page to load when all they are seeking is content.
• Provide "alt text" for images, especially those in the content area.
  Visually impaired patrons use scanners which "read" webpage content to them. When the scanner comes to an image, unless it has alternative text, the scanner skips over it, leaving them with a "diminished" web experience. Also, if images fail to load and the boxed red "x's" appear, a patron will have an idea of what is missing on the page.