University LibGuides Administration & Style: Homepage

The following body layout and style elements are required for all University centers and departments using LibGuides, in an effort to offer a user-friendly, consistent, predictable experience to students and faculty.

• Quick-link buttons:

  • Purpose: To highlight a limited number of links to important content within the website.

  • Position:  top-left corner of body

  • Style & Method:  See details below on configuring the quick-link buttons

• Quick Answers:

  • Position: top-right corner of body

  • Style & Method:  Each department has a customized Quick Answers search widget that is already styled. This widget should be used.

• Other content:

  • Additional content boxes may be configured below the quick-link buttons and below the Quick Answers box. Any content may go here, including a slideshow, images, newsfeed, news, social media icons, or other rich text.

  • There is no restriction on the number of boxes or the amount of content that can be added to the homepage; however, best practice is to keep the homepage as tightly curated as possible. Keep in mind that many users do not scroll on a homepage.

 

Configuring the Homepage

When creating a new homepage, copy the guide "University Homepage MASTER." This reusable guide has the "Walden Homepage Template" applied and includes the quick-link buttons, the Quick Answers box with a QA widget placeholder, and a couple of content boxes to start with.

Quick-button requirements

These were developed by the CSS Web Tech group and the rationale is detailed below.

• Quantity:  A maximum of 6 buttons is allowed.

• Font-size:  Font size options are 18px, 20px, and 22px. Font size must be consistent between all buttons on a single homepage. Text must not wrap when the homepage is viewed on a full-size PC monitor (1000px and up). For example, CSS may select 20px for the font size of all its quick-link buttons.

• Style:  The style is enforced through style sheets and does not require any user configuration:

  • Color:  #E5BF56 (hover: F0D17D)

  • Rounded corners

  • Font:  Trebuchet, bold

 

Configuring and updating the buttons

1. Buttons are configured within a customized content box within each homepage guide. Open the top-left box within the homepage guide for editing;

2. Open the source code  (select "Source" button from the WYSIWYG editor);

3. If you're not starting from the "University Homepage MASTER" guide, copy the code below and paste it into the WYSIWYG editor;

4. The default font-size is 20px. To change the font size on all the buttons to one of the other approved font sizes, add "18px" or "22px" to the source code after the "font-size:" tag on each button.  The customized tag will look like:  "font-size:18px";

5. Update code with labels, URLs, and title/hover text on each button:

   • Replace button label placeholder text with the text that should appear on each button (e.g. "Button 1" becomes "Contact Us")

   • Replace the URL placeholders (#) with the chosen URLs

   • If additional information is needed on a button, a title tag can be added. A title tag (e.g. title="additional descriptive text here") displays additional text when a mouse hovers over the button and for some screenreaders that have this enabled. While this option is available, it is best practice that the visible text or label on the button accurately describes the purpose of the button so that a title tag is not necessary. If a title tag is needed, add appropriate descriptive text to the title=" " tag. If a title tag will not be used, leave the tag as-is/blank;

6. Delete any extra lines of code if the homepage will have less then 6 buttons;

7. Save & Close the WYSIWYG editor.

 

HTML source code for quick-link buttons

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 1</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 2</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 3</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 4</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 5</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

<div class="quicklink-button-container"><a href="#" title=" "><span class="quicklink-button-text" style="font-size:;">Button 6</span><img class="quicklink-button-arrow" src="https://libapps.s3.amazonaws.com/customers/1460/images/homepage_button_arrow.png"/></a></div>

Notes from the CSS Web Tech Working Group on Quick-Link Buttons

The CSS Web Tech Group has approved this homepage template and new standards for the quick-link buttons. The rationale behind the new standards for the quick-link buttons was not taken lightly and took several months of discussion and several iterations. Because this is a design change from our current sites, this rationale is detailed below. All centers and departments throughout the University using this LibGuides platform are expected to adopt this homepage and button design standards.

• The purpose of the homepage quick-link buttons is to highlight a limited number of important and/or frequently accessed areas of a website to direct students to that content.

• The quick-link buttons are no longer images. This makes the design more accessible and easier to update.

• A monochromatic palette was adopted for the quick-link buttons for several reasons related to accessibility, usability, purpose, legal, and University standards:

  • Accessibility:  We should design for the broadest possible audience.  This means not relying primarily on color to direct users to content. Users with color-blindness or other visual-impairments may not be able to see differences in colors or understand color-based descriptions of navigation. Web design should follow the Web Content Accessibility Guidelines 2.0 (WCAG) in order to be compliant and make web content accessible to the widest audience.

  • Usability:  Fewer colors on a web page actually make it easier for users to orient themselves, navigate, and consume content due to less visual busyness. For staff using color to direct users without visual impairments, it is easier to direct users to a block of color on a page with a limited color palette. A large block of one color draws a user’s eye to that area of page quicker. Users have more difficulty locating a specific color on a web page if there are many colors to process. This follows the principle of usable design.

  • Walden Colors:  University departments are required to adopt the approved color palette designed by Marketing. The Walden-approved color palette has a number of limitations in this situation:  there are not enough colors to accommodate up to 6 quick-link buttons;  using all of the colors available in the approved palette to not work well together stylistically in this context; the variation in tones of the approved colors (light and dark values) would not produce enough contrast with the font color (white or black) across all colors, which is an accessibility issue; and two of the approve colors—teal and blue—are too similar in value.

  • Branding:  Buttons should not be colored to make an association with another vendor's branding. Our branding should not be influenced by a vendor's branding. Students do not make the connection between the button color and the vendor's branding.