In this Issue:
Spells For Making Your LibGuides Boo’tiful
It's Halloween, one of the few times a year you can dress up in a fun and unique costume. The more effort you spend on your look equals more attention. That boo'tifying is time well-spent.
And the same goes for your LibGuides! Dress up your guides and engage users with your tricked out content.
This edition of LibGuides Spells & Potions focuses on ways you can illuminate your guide content, helping to ensure your patrons have a magical user experience.
1. Make an Image Pop with Box-Shadows
Not unlike ghosts, images can sometimes 'blend' into the white space behind it. Making them almost invisible to the eye. It would be so much easier to spot those ghosts if they had a shadow. The same goes for your images!
Using CSS box-shadows, give your images dimension, making them visually 'pop' out of the webpage they're embedded on. Plus, if you add the box-shadow property you won't have to redesign the image over and over again in Photoshop. Simply change the box-shadow properties right inside your LibGuide.
And, if you're not a CSS/HTML-expert, no worries. If you can copy and paste and understand the basic principles of how box-shadows work, you're good to go!
Step One: Understanding Box-Shadow Declarations
If you've ever seen a box-shadow CSS statement, it can be hard to understand which rule effects what.
Here's a quick breakdown of structure:
(Note: There are more attributes you can add, this is just the basic structure)
- Vertical-Shadow : The position/depth of the vertical shadow.
- Horizontal-Shadow : The position/depth of the horizontal shadow.
- Blur: How far you want the blur distance to extend, the larger the value, the bigger and blurrier the shadow.
- Color: The color of the shadow; default is black.
Step Two: Creating Box-Shadow CSS
There are two ways to create box-shadow code:
- Noobie Users: Make use of box-shadow generators that allow you to customize the all the elements and copy/paste the resulting code.
- Experienced Users: Copy/paste the below primer code and experiment with the values!
- Experiment! There are more attributes you can add to your box-shadow declaration.
box-shadow: 10px 10px 55px #888888;Step Three: Adding To Your LibGuides Images
- Navigate to your LibGuide > Rich-Text Asset > Add Image.
- Once the image has been added, click the SOURCE button in the Rich-Text Editor
- Locate the <img> tag and add the box-shadow code, preceded by the style tag.
<img style="box-shadow: 10px 10px 5px #888888;" src="URL-of-Image" alt="Alternative-Image-Text" />2. Make Links Open In a Pop-Up Window
When adding links to your Rich-Text box, you've probably made use of opening links in the same or new window.
But, did you know that can also create a link that opens in a pop-up style window?
But, just like that scary automaton skeleton that pops-up and scares you when you walk past, there's a time and a place for using pop-up links.
Recommendations for Using Pop-Up Windows
Pop-ups can be annoying, and some browsers block certain kinds of advertising and some pop-up windows. But the LibGuides pop-up link type works a bit differently. It's the same as telling the link to open in a new browser window, but the window is a smaller and defined size. Additionally, it's a user-initiated click rather than a time-based or unexpected pop-up. If used correctly, these can not only be highly effective but can also enhance the user experience. Bottom-line, it should not interrupt the user experience. Here are some suggestions for when to use, and not use, pop-up windows.
|
When To Use |
When Not To Use |
|---|---|
- Use LibWizard to create popup sign-up forms! |
|
Notice a trend here? The recommendations for using a pop-up window are centered around information gathering, feedback, or sign-ups...all in the control of the user.
This way, the user is in the driver's seat during the process and isn't detracted from the main reason they're on your LibGuide.
Create a Pop-Up Window
- Navigate to your LibGuide > Rich-Text Asset > Add Hyperlink
- Enter Link Title & Target URL
- Accessibility Tip: To alert users that the link opens in a new pop-window, add "Link Opens in Pop-Up" to the link title.
- Click the Target Tab
- Select <pop-up>
- Enter the Name of your Window
- Recommendations:
- Enable Resizing
- Enable Scroll Bars
- Width: Input width and height dimensions
- Note: Because it doesn't take percentage (%) widths, these pop-ups might display large on mobile device screens. Be sure to use it for small windows and enable resizing.
Example Pop-Up Link:
3. Creative Commons License Your LibGuides
Librarians are sharers.
You love seeing the cool things people are doing and how you can do them too.
And wouldn't it be just so much easier if you knew exactly how/when/why you could reuse other LibGuides?
We agree, so that's why it's a great idea to add Creative Commons licensing to your LibGuides.
This way, you're not only licensing your LibGuides content, but you're also letting other librarians know how they can use it too.
Creative Commons Licensing Options
There are seven CC-licensing options, starting at the least-restrictive and working down to the most-restrictive license type.
Explore the licenses below, and discover which one works for your entire LibGuides system or even individual LibGuides.
What's Creative Commons?
"Creative Commons helps you legally share your knowledge and creativity to build a more equitable, accessible, and innovative world."*
Creative Commons provides:
- Free, easy-to-use copyright licenses;
- Multiple license-types to accommodate your needs;
- Licenses that are legally enforceable.
 |
Public Domain Dedication - CC Zero allows you to dedicate the work to the public domain by waiving all rights to the work worldwide under copyright law. |
 |
Attribution - Lets others distribute, remix, tweak, and build upon your work, as long as they credit you for the original creation. |
 |
Attribution-ShareAlike - Lets others remix, tweak, and build upon your work as long as they credit you and license their new creations under identical terms. |
 |
Attribution-NoDerivs - Allows for redistribution as long as it is passed along unchanged and in whole, with credit to you. |
 |
Attribution-NonCommerical - Lets others remix, tweak, and build upon your work non-commercially, and although their new works must also acknowledge you and be non-commercial, they don’t have to license their derivative works on the same terms. |
 |
Attribution-NonCommercial-ShareAlike - Lets others remix, tweak, and build upon your work non-commercially, as long as they credit you and license their new creations under the identical terms. |
 |
Attribution-NonCommercial-NoDerivs - The most restrictive of the six main licenses, only allowing others to download your works and share them with others as long as they credit you, but they can’t change them in any way or use them commercially. |
| * Content taken directly from the Creative Commons Website | |
Licensing Your LibGuides Content
Start the process at CreativeCommons.Org/share-your-work and walk through the three-step process which helps you identify the right license for you.
Be sure to fill out the attribution section and put in your LibGuides profile URL so others know how to attribute your original work.
Embed In Your LibGuides
The final step provides you with code that you can embed into your LibGuides, letting librarians know how they can reuse your LibGuides content.
- Copy the Creative Commons Embed Code
- Navigate to LibGuides > Add Box > Add Widget/Embed Code
- Embed the Creative Commons Embed Code
- Voila! You're Done!
Apply License System-Wide
If you're a LibGuides admin and you want to apply your CC-license to your entire LibGuides system, here's how!
- Follow the same steps, but license your entire LibGuides system rather than a specific-LibGuide.
- Copy the embed code.
- Navigate to Admin > Look & Feel > Header / Footer / Tabs / Boxes.
- Embed your Creative Commons Licensing Code in your footer! This way, every single page of your LibGuides is covered by your legally-protected license.
- If you're a LibGuides CMS customer, you can provide different licenses to groups of guides with LibGuides CMS groups.
4. The Importance of Fonts
Font choice has a huge impact on your LibGuides website. It can impact readability, mood, perceived page length, user experience, and much more.
The type of font you choose communicates the character and purpose of your website.
Here's an example from tutsplus.com that illustrates how font-type can change the implied meaning of a word.
Which 'might' conveys strength, certainty, confidence? And which one doesn't? Both fonts are the same exact size, yet one seems larger. More impactful.
To Serif or To Sans-Serif
There are many different types of fonts, but most fall into two classes: serif fonts and sans-serif fonts.
- Serif Fonts - Decorative embellishments are added.
- Examples: Times New Roman, Georgia, Courier New.
- San-Serif Fonts - Are without embellishment, and are much easier to read on large bodies of text.
- Examples: Verdana, Tahoma, Lucida Sans
|
Where to Use Serif Fonts |
Where to Use Sans-Serif Fonts |
|
|
General Font Recommendations
- Avoid Using Too Many Fonts: If you have too many web fonts on one page, it can be visually confusing to users. Plus, they can cause significant readability issues as the user's eyes have to keep adjusting.
- We recommend 2-3 fonts per webpage.
- Pay Attention to Line-Spacing: Line-spacing is the amount of spacing between your lines of text. Text that is right on top of each other can be difficult to read.
- Tutsplus recommends that line-spacing be about 0.3em - 0.5em larger than your font size.
Now you know how choosing just the right font can effect the efficacy and delivery of your LibGuides content!
The following Springy Tech Tip Video focuses on how you can add Google Fonts to your LibGuides system and make use of their open-source library of over 800+ font options.
If you don't want to use Google Fonts, simply jump ahead to the 4 minute mark and replace the Google font code with your own CSS font-family choice.
Links Mentioned in Video:
Note: This videos is for Admin-level users, as you'll need access to your LibGuides System-Wide Look & Feel. LibGuides CMS Group-level admins can input Google Fonts into their CMS-Group CSS/JSS code area.