Skip to Main Content

Best Practices for LibGuide Design

Adding Images

Follow these guidelines when adding images to guides:
  • ADA Compliance 
    • Include alt text and image descriptions. This allows specialized software to describe images to those that cannot see. 
  • Resizing 
    • ​Make sure to resize mages before uploading
    • If you try to resize once they are in the guide, they will not display correctly
  • Shared Folder
    • ​Keep a shared folder of images (admin only)
  • Copyright compliance
    • ​Make sure to follow copyright laws.
    • Avoid posting PDFs of articles that were obtained from a database (unless you obtained permission). 
    • Feel free to post a citation of an article you used and/or a direct link to the database where current students, faculty, and staff can login with their school credentials.
  • Uploading 
    • When possible, upload a PDF instead of a link, since links can change and not function.
  • Relevance
    • ​Make images relevant to content

Embedding Videos

Embedding videos adds a nice visual touch to a guide. The following are some guidelines for embedding videos:

Size

  • The source code will show the display size. You can edit this by going into the code and changing the numbers. The settings for this video are 560x315.
  • Keep the video within the box borders when resizing.

<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XksP004x_14" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Centering

  • Videos are not automatically centered. You can add a CENTER tag to make sure the video is centered.
  • Here is the code for this video as an example. The tag was added both at the top and a closing tag at the bottom.

<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XksP004x_14" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Mobile Responsiveness

  • Most embed codes should resize for mobile environments. 
  • Embed Responsibly is a site that helps you create responsive content. Enter the video link and it will generate a responsive embed code.

 

Video Example 1: Add video within box with text

In this example:

  • A CENTER division tag was added to center the video
  • The default size in this video size can be edited. This video is set at 563x315. 

This second video was resized to 700x325.

Video Example: Column 2 and 3

This video was added to column 2.

  • The sizing was not changed. It remains at 563x315
  • Columns 2 an 3 are the same size so video would display the same if added to column 3