Jump to section: Headings | Special Container | Images | Pasting Copied Text | Box-Level Navigation | Tabbed Boxes
Headings should be used to identify hierarchy on a webpage, not for emphasis. For emphasis, use bold/strong text instead. Heading 1 and Heading 2 will not be used in guide boxes, as they are maintained by the LibGuides template.
Do not use bold/strong or italics on headings.
Headings should be in order, so do not go from h3 to h5 (meaning you would be leaving out h4).
Example: <h3>Section 1</h3>
<h4>Section 1.1</h4>
<h4>Section 1.2</h4>
<h5>Section 1.2.1</h5>
<h4>Section 2.1</h4>
<h3>Section 2</h3>
To see this structure in action, take a look at the Ebook License box on the ProQuest Ebook Central LibGuide. While it can be tempting to assign a header to get an visually pleasing font size, the semantic structure of your document (or LibGuide box) is more important than the font size, which can vary depending on browser, device, accessibility software, etc.
To assign an appropriate heading, highlight the text you want as your heading, and change the paragraph format from "normal" to the correct heading.
You can also add <h3>Heading text</h3> tags to the text in the Source code editor, if you are comfortable with minor edits in HTML.
Special containers are an automatic LibGuides formatting option that can draw attention to specific content. It can be used as a visual call-out, or to separate the box. Special containers work best when you wish to call out content that is text-heavy.
To add a Special Container, highlight the text you want to appear in the container, and select "Special Container" from the Styles drop-down menu.
When naming images, use a descriptive name. Use hyphens for spaces and use lowercase letters.
Example: library-main-floor.jpg
Images should be created larger than needed and cropped using Photoshop or another program prior to being uploaded to the CMS; this will help when images are resized on a responsive device.
Use .jpg or .png formats for images whenever possible. Avoid .gif and .bmp.
When placing images on a page, do not try to be too “creative” with the layout. Keep images centered or left-aligned. Too much movement back and forth of images on a page, as well as text wrapping around images, makes responsive viewing more difficult. On smaller screens, images and text will stack on top of each other anyway.
It's a good idea to upload images into folders on your LibGuides account that correspond to the page they will primarily live on. You can locate your Image Manager under the Content drop-down in the LibGuides menu.
Images should be responsive instead of static width and height attributes, using the style attribute to assign a percentage width to the image. Images should include the alt and title attributes to apply descriptive text for use with screen readers, or if there is a problem loading the image.
Example: <img src=”/library/images/2017/library-main-floor.jpg” alt=”The main floor of the Library” title=”Library Main Floor” style=”width: 50%;”> will display “Library Main Floor” when mousing over an image (title attribute), and if the image does not load, will display “The main floor of the Library” (alt attribute). The alt attribute is what screen readers use to describe an image. The image will also be as wide as 50% of the usable space on the webpage (style attribute).
You may notice when you paste copied text into a Rich Text/HTML Box in Libguides, it carries the formatting from the original document with it. This means that the text you are trying to add to your LibGuide may not match the formatting of the rest of the template. While you can certainly look through the Source code to remove any style tags, an easier way to copy text into your guide is to use an online tool to strip it of any non-standard formatting first:
One feature of the side navigation template style is the use of box-level navigation to help find specific sections of a long, content-filled page. You can see how this functions similar to html anchor tags on the German Studies LibGuide:
Clicking on any of the box titles in the left-nav will take you directly to that box's location on the page. This is helpful if you have a lot of content on one single page, but not enough to split it into sub-page (or it doesn't make sense to move it to a separate page).
To use this feature, click the Guide Navigation Layout option in the top right of the page editor.
Then, select "Show box-level navigation for selected page."
Note: this will ONLY link to boxes in the main column. It will not link to any boxes you have placed in the Side Navigation column, under the navigation links.
As of May 2020, SpringShare uses Bootstrap to power their tabbed boxes on LibGuides. (See their Accessibility Blog post about it.) This allowed tabbed boxes to become WACG 2.0 compliant for accessibility. However, before implementing a tabbed box, consider if that format suits the needs of your information. Tabbed boxes work best for groups of similar content. A good example of a tabbed box lies on our Citation Guide, where information on different citation manuals are grouped into tabs. Information that has a hierarchical structure (i.e. the most important information would be stated first) is best served following a traditional box structure with appropriate headings. You should also be careful of creating too many tabs, which can become overwhelming and just hide content, rather than group content conveniently.
For information on creating tabbed boxes, SpringShare has an excellent how-to guide.
This Spring Share session video highlights recommendations for user friendly guides and best practices to maximize accessibility.
German, E. (2017). LibGuides for instruction: A service design point of view from an academic library. Reference & User Services Quarterly, 56(3), 162-167. Retrieved from http://ezpro.cc.gettysburg.edu:2048/login?url=https://search.proquest.com/docview/1931108371?accountid=2694
Hickner, A. (2019). 4 techniques for better research guides. Online Searcher, 43(5), 10-15. Retrieved from http://ezpro.cc.gettysburg.edu:2048/login?url=https://search.proquest.com/docview/2297098193?accountid=2694
Bergstrom-Lynch, Y. (2019). LibGuides by design: Using instructional design principles and user-centered studies to develop best practices. Public Services Quarterly, 15(3), 205-223. doi:http://dx.doi.org/10.1080/15228959.2019.1632245
Chan, C., Gu, J., & Lei, C. (2019). Redesigning subject guides with usability testing: A case study. Journal of Web Librarianship, 13(3), 260-279. doi:http://dx.doi.org/10.1080/19322909.2019.1638337
Conrad, S., & Stevens, C. (2019). "Am I on the library website?": A LibGuides usability study. Information Technology and Libraries (Online), 38(3), 49-81. Retrieved from http://ezpro.cc.gettysburg.edu:2048/login?url=https://search.proquest.com/docview/2296009418?accountid=2694
Embry, A. (2016). Modern pathfinders: Creating better research guides. Reference & User Services Quarterly, 55(4), 319-320. Retrieved from http://ezpro.cc.gettysburg.edu:2048/login?url=https://search.proquest.com/docview/1803062674?accountid=2694
Fagerheim, B., Lundstrom, K., Davis, E., & Cochran, D. (2017). Extending our reach: Automatic integration of course and subject guides. Reference & User Services Quarterly, 56(3), 180-188. Retrieved from http://ezpro.cc.gettysburg.edu:2048/login?url=https://search.proquest.com/docview/1931134692?accountid=2694