Skip to Main Content

UD LibGuides Style Guide

Information on LibGuides best design practices and reusable assets.
This is a living document of the practiced and recommended standards for University Libraries' LibGuides. These standards should be viewed as a baseline for what most guides should look like. Of course, there are exceptions to nearly every recommendation (this very guide is guilty of breaking a few of them), but it should be a good starting point for understanding why we make certain design decisions about our guides. This document will change as web accessibility standards change, but it is also open to your feedback! Please use the Feedback discussion board to publicly share comments or questions, or feel free to reach out to the LibGuides Admin directly.

Text

Writing for LibGuides

  • Utilize the default font, font size, and font color.

    • Our stylesheets are designed for continuity, readability, and accessibility! When we make changes to the stylesheet, we want it to apply to all guides uniformly.
    • Using color for emphasis is discouraged, as it is not accessible to colorblind users or screen reading software.
  • Use bold text to denote content of importance, use italics to denote stressed emphasis.

    • LibGuides utilizes <strong> and <em> tags when you click the Bold or Italics button. These tags have semantic meaning, and are processed by screen readers as a change in tone. They should not be used exclusively for design purposes.
  • When pasting text from another source, always paste without formatting using CTRL+Shift+V (PC) or CMD+Shift+V (Mac).

    • Most digital text contains a lot of extra formatting information. The intent is to faithfully reproduce the style of the original text, but ultimately it overwrites LibGuides’ default settings.
  • Use hyperlinks within rich text sparingly: a contextual link-out to a relevant website is fine, a ten-item bullet list of databases is not.

    • LibGuides is feature-rich when it comes to asset management and activity tracking. Links embedded in rich text cannot be monitored for usage and do not show up in the “Link” asset database.
    • Items such as Books and Databases have their own asset type, which are also trackable and prevent data duplication.
      • Which means… Database URLs and subscriptions change. It’s helpful to have a single asset for each database rather than everyone creating their own. Having one centralized list allows us to make changes unilaterally across all guides.
  • Hyperlinked text should be descriptive of the link’s content, and not just “click here” or—worse—a URL.

    • It’s easier to read a document in natural language, and users will actually click the things more often if the link describes what’s within! Users of screen readers, too, will benefit from the clarity.
  • Headings should be used for organization and hierarchy, not for design.

    • As with other HTML tags, the Heading tags are used for more than just how the text appears on screen. Screen readers use these tags to create navigation tools in lengthy blocks of text.

General Design

  • Don’t reinvent the wheel! Seek out reusable content in this style guide or reuse content from your colleagues’ guides.

    • Simple instructional tasks are easy to standardize. If something changes with the way a library resource looks or functions, we can make one change that will roll out to every guide using that content box.
    • Use the templates for Course and Subject guides for consistency.
  • Check to see if a Book, Link, or Widget already exists when adding a new asset by clicking the “Reuse Existing” tab in the “Add (Link, Book, Etc.)” window.

    • As above, someone may have already done the work of formatting a book or link for LibGuides. If a change is necessary, it’s easier to just do it once.
      • But… Don’t feel restricted to reusing an asset that doesn’t meet the needs of your guide. Sometimes it makes more sense to create a bespoke asset that you can customize to your needs.
      • And… If you find a broken link that you can’t edit, a book no longer in circulation, or any strangeness in a reused asset, contact your friendly neighborhood LibGuides admin!
  • Avoid subpages where possible, and instead introduce that content as an additional box on the main page.

    • Realistically, users are not very likely to click past the first level of pages, and adding an extra layer of complexity to the guide structure will make it more difficult to maintain in the long-term.
      • By the way… They might be called “pages” or “tabs” interchangeably, but users call them “pages.”
    • If there is a concern about page length when centralizing content in this way, consider the necessity of the content. Sometimes it’s tempting to include a lengthy list of links when two or three good ones will do just fine (and actually get clicked!)

Images

  • Images that exclusively have text on them: don’t do it.

    • This style guide is deliberately light on the word “don’t,” but this is a big one. If it includes text, make sure that text shows up… as text.
  • Images should be used to directly support guide content.

    • Decorative graphics should be avoided to reduce page clutter and keep content relevant to the topic at hand.
      • So… Seek out relevant, specific images over generic ones.
  • Include descriptive alt-text for all images.

    • Alternative text is used by screen reading software, search engines, and web browsers.
    • This should include information about the destination of any hyperlink that may be attached to the image.

Other Media

  • Mixing up content types is a good thing!

    • A short video, podcast, or other multimedia addition can make a LibGuide more than just a list of links.
  • Create and upload instructional videos to WarpWire.

    • This secure video storage platform can be gated to UD-specific users or made publicly available. It has great analytics tools for tracking viewership, and can generate automatic captions for your videos.
  • Include transcriptions/closed captioning for videos and audio sources.

    • Providing multiple methods of accessing content ensures the widest range of users will be able to access it.
  • Use the Sidebar for supplemental content.

    • Underneath the navigation menu is a great spot for very small pieces of supplemental content. Bigger boxes of information tend to get squished by the page dimensions, and may clutter the page/render it inaccessible.
    • This is a great spot for your Librarian Profile box!
  • Change the profile box depending on guide type.

    • The profile box should display the individual responsible for fielding reference questions related to the content on that page. 
    • For course guides where 2-3 librarians are teaching for a single instructor, include each librarian as a profile box.
    • For "gen ed" course guides or topics without an assigned liaison librarian, use the "Contact Roesch Library" box.
chat loading...