Keep Up to Date

Would you like a video to begin playing as soon as a viewer clicks on a guide homepage or other page within your guide? Autoplay may be attention getting, but it can also be annoying to viewers, so it should be used sparingly. If you believe a viewer will be returning to this page over and over, they will likely become more annoyed with it over time, so you may only want to use autoplay on pages you think have information that will only be need once. Also consider whether you want the sound to play or for the video to be mute. The movement of the video will get attention in and of itself, and it gives the option to the viewer of whether to turn on the sound. 

First, find the embed URL for a YouTube video by selecting Share. Copy the URL. 

If the embed URL ends with a question mark (?), add the following code to the end of the URL
For autoplay only: autoplay=1
For autoplay + mute: autoplay=1&mute=1

If the embed URL does not end with a question mark (?), add the following code to the end of the URL
For autoplay only: ?autoplay=1
For autoplay + mute: ?autoplay=1&mute=1

Example

<div class="embed-responsive embed-responsive-16by9">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/BYgPi5SFudg?autoplay=1&mute=1" title="YouTube video player"></iframe>
</div>
 

If you would like to make your embedded videos responsive to the screen size your viewers are watching the video on, the code to add is fairly simple, but it is based on the aspect ratio of the video. For YouTube videos, this information can be found under Share >> Embed code. For example, this What Is OER video has a embed code that indicates the video is 560 wide and 315 high has a 16 by 9 aspect ratio. Below is the code for responsive videos of the most common aspect ratios. Below is also an example of code for a video that has additional playing code for a video. To translate and width and height to an aspect ratio, use an aspect ratio calculator. 

<!-- 21:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-21by9"> 
<iframe class="embed-responsive-item" src="..."></iframe>
</div> 

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

<!-- 1:1 aspect ratio --> 
<div class="embed-responsive embed-responsive-1by1"> 
<iframe class="embed-responsive-item" src="..."></iframe> 
</div>

Example

<div class="embed-responsive embed-responsive-16by9">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/VjGflXu6FSk" title="YouTube video player"></iframe>
</div>
 

Adding emphasis to specific text in a LibGuide can draw the user's eye to important information they might otherwise overlook. Using a single-cell table with a colored background or with a colored border can further emphasize and grab attention. Using a single-cell table has the added benefit of being accessible without alt text (as opposed to images).

For example:

Typographers and graphic designers use block quotes to emphasize information within a text. The academic community uses block quotes to indicate a quotation of length. Block quotes can be achieved a couple of ways, as explained below.

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. -- Antoine de Saint-Exupéry, French writer and poet

To achieve the above design, this is the code that was used:

<p style="padding-left: 60px; padding-right: 60px;">
     <span style="font-size:16px;">
          <span style="font-family:georgia,serif;">
               <em>

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine de Saint-Exup&eacute;ry, French writer and poet

               </em>
          </span>
     </span>
</p>

Another option for creating a block quote is to use the HTML blockquote command. The drawback of using this command is that you have less control over the style of the block quote.

In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.    --Robert Bringhurst, The Elements of Typographic Style

To achieve the above design, this is the code that was used:

<blockquote>
     <p>
           <strong>
                <span style="font-size:16px;">
                    <span style="font-family:lucida sans unicode,lucida grande,sans-serif;">

In a badly designed book, the letters mill and stand like starving horses in a field. In a book designed by rote, they sit like stale bread and mutton on the page. In a well-made book, where designer, compositor and printer have all done their jobs, no matter how many thousands of lines and pages, the letters are alive. They dance in their seats. Sometimes they rise and dance in the margins and aisles.&nbsp; &nbsp; --Robert Bringhurst, <em>The Elements of Typographic Style</em>

                    </span>
                </span>
          </strong>
     </p>
</blockquote>

If you would like to create a user-friendly URL for your profile page, this can be done by a system administrator (such as Natasha) creating a friendly redirect.

Decide on what you want the end of your profile URL to be (e.g., Stephanie Wiegand simply added SW on to the LibGuides base URL). Then contact a LibGuide administrator such as Natasha and ask for this change to made:

Create a friendly redirect URL

Admin > Metadata & URLs > Friendly URLs tab > Add Friendly URL button 

For example, the friendly URL to Stephanie's profile page is: http://libguides.unco.edu/sw. It is a handy way to give out a single URL that will get students to all of your guides and your contact information.

Many thanks to Natasha for this suggestion: 

Online Photo Editor (https://www.freeonlinephotoeditor.com/) allows you, with a photo upload or URL for an image, to resize, sharpen and/or rotate images. Several filters and effects are available to enhance your photo: Red Eye Removal, Sepia, Enhance, Sharpen and Polaroid Effect. Afterwards, you can download your photo or save it online. (The maximum size of a picture you upload is about 6MB. Large pictures are automatically resized to 1024x768.)

Photo cropped and 'cartooned' in Online Photo Editor.

LibGuides automatically places a gray background color on any content added. On some monitors this background appears very light, and on other monitors, the gray is much darker. It is possible to remove the gray background from Rich Text/HTML boxes. To do so:

• In the Rich Text/HTML editor, click on source, and paste the following code as the first line of code: <div style="background:#FFFFFF;padding:5px 10px;">
• Paste the following code as the last line of code: </div>

In the edit version of your LibGuide, you will still notice a think gray line around the box, but in the live mode and preview mode, there will be no gray.

"Gray Scale" (CC BY-SA 2.5) by Tomás Castelazo

This LibGuide offers many photo and clip art sources. Always check for Creative Commons and Copyright licenses! 

Looking for UNC Images? Take a look at the UNC Image Library. 

UNC Logo files and UNC Libraries logo files will help you add branding to your LibGuides.

TinyPNG (https://tinypng.com/) is an easy method for compressing images. But do your images need to be compressed? TinyPNG also offers an analysation tool (https://tinypng.com/analyzer), that will analyze a webpage and determine if loading speeds can be increased if images are compressed.

Below is an example report of a LibGuide page that I loaded 3 images to without reducing the size of the image or compressing for a smaller file size.

The larger the image you upload to your LibGuide, the more load time the page will require, which can be a turnoff to users, especially mobile users. If you don’t want to change the size of an image, but need to reduce the file size of the image, you want to compress the image.

Check out these instructions for an easy method to compress PNGs and JPEGs.

Want to try it for yourself? Use this image.