Skip to Main Content

CSP Library StyleGuide Standards and Best Practices

CSP Library standards and guidelines for creating LibGuides at the CSP Library.

Using Links

The LibGuides Link checker and Link statistics only work on links explicitly added as Link entries in the LibGuides content type. They do not "see" links in regular text, or even links imbedded in rich text. 

Important: Before creating any link, first, always check the tab "Reuse Existing Link" and verify that the link has not been created already by starting to type the name of the resource: 

Highlighting where to find the tab to "Reuse Existing Links"

For database links, you will need to use the A-Z Databases. If there a database you are wanting to add but is currently not on the A-Z list,  review the database with Jon and see if it's a candidate to add to our A-Z list. 

NOTE: Avoid using "click here" language on your guides. Instead, name the resource you are linking. "Click here" had no context/meaning to a person using screen readers. 

Adding/Editing Link Content

Window Target: Links should always open in the same window even if it is an external site per W3C guidelines: 

For the "Window Target" when adding links leave as "Inherit system setting" and that will open within itself.

Description/Description Display: You do not need to add a description to your links.

Friendly URLS

By default, SpringShare will create a guide and it's pages with a unique ID number attached to the end of the URL. 

The standard moving forward is to change this to a friendly URL on all guide and page URLs. Why? Friendly URLs will make it easier to pass along information in chats, it is user friendly, and it is best practices in web design. For example, /c.php?g=1176273&p=8596719 doesn't mean anything to the user, but /gettting-started does. 

  • The structure of the friendly URL should include dashes between words. No spaces, slashes or underscores should be used.
  • Spell out the word "and" and do not use the ampersand sign "&".
  • Should always be lowercase. 
  • Limit to one to three words, if possible. 

Remember to update both the guide and page URL: 

Highlighting where to edit the page and guide URL

Images

Alternative Text

Be sure images  are accessible by including alternative text (ALT tags) for screen readers. The text should be as long as it needs to be in order to effectively describe the content. You can review best practices for crafting alt text from WebAIM. 

Screenshots

Screenshots can be captured using any tool you wish. However, please follow the guidelines below:

  • Save images as PNG
  • If possible, add a black rectangle box around image to highlight it's a screenshot and not part of the regular text
  • When highlighting an item if using a box to highlight an item, add rectangle box, red, with a 5px size if possible
  • When adding an arrow, make the arrow red and consistent in size

Videos

Whenever possible, make sure that videos include closed caption as an option for users. 

Videos can be embedded into LibGuides through the Media/Widget option in the dropdown menu. Just as with links, images, or other assets, you can add a new Media/Widget or reuse one that already exists on the system. Always check to make sure you are not creating a duplicate video that may already be created.  

If adding a YouTube video, make sure you feel the content is necessary for your page. YouTube videos can often become outdated and broken on a frequent occurrence. 

How to Embed Videos

1.) Copy the URL from YouTube or other site for the video you want to embed.

2.) Paste the URL into the Embed Responsively tool.

3.) Copy the entire embed code created in Embed Responsively

Embed code example

 

4.) Add a Media/Widget asset and paste in the copied embed code. Give the widget a Name.

Media widget screenshot

5.) Your embedded video will be optimized for layout and display regardless of the viewing device: 


Adapted content created by Sara Harrington for the University of Connecticut. Licensed for reuse under the Creative Commons By 4.0 license.

Tables

If you need to represent ideas or contents into a table remember to provide logical column headings. Tables are mainly to display data that fits well into rows and columns that is needed to convey certain information. Avoid using tables for displaying content on a page that is not needed. 

Font

Fonts

Font and font size have been set across the entire site. Do not change the default font.

Text size

Text size has been set across the entire site. Do not change the font size. Do not use headings to force text size changes. Headings should be used exclusively to organize content. See Headings.

Headings

Use headings tags to structure the content of your guide. Heading 1 (H1) is reserved for page titles so you should not use it. Heading 2 (H2) is reserved for box titles so you should not use it. Don’t add heading tags to blocks of texts; headings should be used as short titles to identify specific sections of content. Inappropriately using heading tags has accessibility implications.

Tabbed Boxes

Do not use tabbed boxes on guides.