Skip to Main Content
UCO Chambers Library logo

Library Website Standards

 

General Style Guidelines

The general look and feel of the Chambers Library website should match the design of the main UCO website. This includes using the same colors, fonts, and certain CSS elements so that branding is consistent. Some differences are necessary since the library's website is hosted by Springshare. These guidelines are specific to the library's website and explain how content should be organized in LibGuides, LibCal, LibAnswers, and LibWizard.


LibGuides Content

  • For general information guides, the library's hours will be shown underneath the guide title.
    • The Special Collections & Archives guide will include the hours for Special Collections.
    • The Innovation Studio guide will include hours for the Innovation Studio.
  • A note on navigating tabbed boxes for keyboard-only users: Tabs inside a box can be selected by using the arrow keys.

Standard Boxes

  • Most pages of the library website use floating boxes, which display the content without a border
    • Boxes located underneath the navigation menu that contain brief pieces of information can sometimes include the border. The built-in headings for these are level 2, so any additional headings within a bordered box should start with level 3.
  • The top box on each page should have a horizontal line <hr> at the top to add a level of separation from the guide title and description. (This is only needed for floating boxes.)
  • Images embedded onto a page must have a margin of at least 5 pixels between the edge of the image and wrapped text.

Gallery Boxes

Click-through carousels and slideshows should be used sparingly. These are typically reserved for collection and exhibit guides that are showcasing various pieces in the library's collections. The Innovation Studio also uses them to showcase projects made with their equipment.

  • All slides should include captions. 
    • Note: Alt text for each image should not repeat information from the caption. If the caption is describing the primary content in an image, then the alt text should focus on the visual elements that would not be perceived by a visually impaired user.
  • Slides should never be set to automatically advance. This kind of animated content is not accessible.
  • Carousels should always be preceded by instructions that tell users how to view content:
    • "Select arrows to view more images." and/or "Select image to view larger version."
  • Carousels should always show the dot navigation indicators.
  • Consider whether a carousel is truly the best option to present the content.

Reusable Content

Boxes and assets should be reused and mapped across guides whenever possible. When information is updated in an original asset or box, all of the mapped versions automatically update, eliminating the need to update the information on multiple pages. Reusable content includes, but is not limited to:

  • Boxes containing general library information, such as ILL instructions or department hours
  • Boxes containing widgets or search boxes
  • Documents, such as handouts and policies
  • Links to commonly used library resources and services
  • Links to web forms

Whenever possible, links that will appear in multiple places should be created as assets instead of embedded in the paragraph text.


Naming Conventions

The title of each LibGuide should efficiently describe the content of that guide, and each page of a guide should efficiently describe the content on that page.

The navigation label for each page should match the title of the page, or a shortened version if the page title is longer than 25 characters.

Friendly URLs

Every LibGuide should have a friendly URL created to replace the automatically assigned numbers that appear after library.uco.edu/

  • URL should match the guide title.
  • Spaces in the title should be hyphens in the URL.
  • Long titles should be shortened, but they must remain readable and logical.
  • Each subpage should also have a friendly URL that matches the page title.
  • Examples:
    • Library Services: /services
    • Innovation Studio: /innovation-studio
    • About the Library > Chambers Library Initiatives: /about/initiatives

Alert Banner

A sitewide alert banner will be added to LibGuides, LibCal, and LibAnswers pages when an important announcement must be shared with the community, such as temporary library closure, changes in hours, and campus-wide announcements.

  • The banner will appear just below the site header and above the main content of each page.
  • The banner should include a button that allows users to dismiss the banner.

Web Forms

Digital forms, surveys, quizzes, and tutorials can be created for the website using LibWizard. Due to the constraints of LibWizard, fonts that appear in web forms may not be an exact match to the fonts used on the website.

Most web forms are embedded on relevant library pages, but some forms may open in a new tab. If a library form is linked on external websites, such as the library's discovery platform or an institutional repository, it should be designed as a standalone form. 

Standalone Forms

  • Use the system settings for the page header
    • This header is a UCO banner image based on the style and color of the library website.
  • Links included as instructions or reference to aid the user's completion of the form should open a new tab. This is to prevent an interruption to the user's progress in completing the form.

Embedded Forms

  • Disable the page header
    • Select "Use a custom page header for this form" and leave all fields blank
  • The form title, description, and instructions should be included in the HTML of the webpage, not in the form itself
    • Headings and instructions for specific sections of a form should still be included within the form's html