Website Design Guide
See the this content as a printable Word document.
- Create a list of standard features each page must contain, such as the library’s logo, certain components of the navigation, the color scheme, and the type of font. Use this list when developing new pages. Create an actual template for staff to use for new pages, and apply to any existing “deviant” pages.
- Substitute text links for the logos, unless your patrons will otherwise not be able to locate the link. Look at the pages where you’re using excessive logos – is the page worth looking at without them? It could be possible that the page does not need to exist, or the content could be included within another page.
- Choose a color scheme and logo for a “common look and feel” for your content. Usage of more than two types of fonts in a web document is excessive. Besides the aesthetic issues, there are technology issues: not every computer is going to have the font you opt to use installed. The browser will randomly select a substitute.
- Bold or italicize text to emphasize, rather than using underlining.
- Conduct a “Find and Replace” search within your web folder, looking for “<title>Untitled” or any similar name, such as “Blank,” “Unnamed,” or “New”; and make corrections where needed. Create a checklist of things that must be done each time a new page is created; make sure that assigning the page title is included in this list.
- Unless your numbers are in the six-digit range, displaying hits counter results is not impressive. Investigate online statistical programs like Google Analytics for example.
- Use color, bolding, italicization, increased font size or punctuation to draw attention to text. Redesign as appropriate so the eye is drawn to the important area.
- If you must provide email addresses, do not place them in a “mailto” link. Also, type them with spaces, so the robot has a harder time recognizing it as an address. Example: your. name @ domain. com, coded like this:<p>your. name @domain. com</p> The usage of the characters will confuse the harvester. Learn how to code a simple contact form: Using ASP, Using PHP
- Download various browsers, and change your screen’s resolution settings to determine whether your website is compatible to the various environments in which it will be seen. Opt for a “liquid layout,” one which shrinks or widens based on the screen space available.
- Use an online link validator to find out which links need updating. Create a schedule for when links are checked by staff. Slow times, especially during the holidays, are good for this. Dreamweaver has a built-in link validator tool.
- Do not use javascript to create flashing objects and multi-colored text that distract a visitor’s attention.
- When you can, use straight text, do not place text in images. Search engines, such as Google cannot read text placed in images. If you must use images to display important text, investigate image replacement techniques, which display the image, but have text “behind it” (in the code) for search engines to read.
- Be consistent with library branding. Apply it to everything the library “owns.” When individual webpages are named without referencing the library’s name, there is no point of reference for the visitor as to whether they are within the library website, or have been directed elsewhere. To be sure this essential information is included on every page within the website, use the template you created that includes the library’s name and contact information.
- Make sure pages load quickly. Be judicious in the selection of images, and use thumbnail versions that link to larger versions. Create thumbnails which are less than 10KB in size; “originals” which are less than 35KB in size.
- Place the links in the text. Apply alternate text to images used as links so they can be picked up by screen readers. Phrases, such as “Click Me,” “Click Here,” or “Follow this link” are holdovers from the 1990’s, when internet usage was “new” and not everyone was technologically savvy.
- Design by the 10 second rule: a visitor should be able to find a link to your catalog, your locations, your programs, your resources, or your key personnel in less than 10 seconds from any page on your site.
- Provide clear and consistent navigation throughout the site; include a link to the library homepage on every page.
- Include a site map, and provide a link to it on every page.
- Avoid library jargon, e.g., provide a link to the library catalog, not to the OPAC.
- Avoid pages longer than 2 screens; users will not scroll down to find information.
- Make sure the page is accessible to users with disabilities Libraries meet ADA requirements; websites should have a comparable level of accessibility as specified in the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines and Federal Section 508 Standards for Electronic and Information Technology.
- Library websites should reflect the organization inherent in the library itself.
These pages were adapted from documents created by KDLA and State of Rhode Island Office of Library and Information Services
July 14, 2011