Website Guidance

Owned by Margaret Mellinger (Unlicensed)
Last updated: Aug 23, 2024 by Margaret Mellinger
9 min read

The goal of this handbook is to provide OSULP staff with clear guidance on website processes, procedures, and specifications. Also see Frequent Drupal Questions


Website Accounts

All staff are added to OSULP's Drupal account by LIT. This will automatically populate the staff directory.

To request add a new staff member, use the LIT Contact Form.  If a staff member leaves OSULP employment, supervisors can fill out the form to ask for them to be removed from the site.

Staff Directories

  • The main staff directory pulls information directly from the staff account. 
  • The department directory can be edited by anyone, but is the responsibility of each department.
  • The organization chart is the responsibility of Library Administration.
    • Request changes to the org chart via a form


Permissions and Creating Content

All staff have website editing abilities for most of the site and can edit pages or create new ones. 

News and calendar items are the responsibility of Library Administration.

Department web pages are the responsibility of that department.

There are a few areas of the site where only LIT staff have permissions to edit:

  1. Most of front page of the site, excluding news items and calendar items.
  2. The header and footer
  3. The main navigation menu
    1. If you create a page that needs to be linked to the main menu, ask via the LIT Contact Form

Getting Started

  • One place to start is your own staff profile, and we have instructions to help you.
  • If you have questions about creating a new page or need help figuring out the best way to do it, please put a request in through the LIT Contact Form. A Web Developer can set up a training session with you, give advice on setting up new pages or help you design a new page layout.
  • In general, choosing images and writing the content will be the content creator's responsibility.
  • OSU's Digital Experience Department put together a Site-Building Guide that can help, as well.

Requesting Changes to the Website

  • If you have found a mistake on the website, you may make the edit, or you may ask for LIT to fix it by using the LIT Contact Form.
  • Requesting larger changes such as adding new features, building a new web form, or making major changes to the home page will require LIT to schedule the work and to meet with you to gather requirements.  Use the LIT Contact Form to request a Web project. A project manager will work with you to set up a project meeting and define a timeline for the project.

Writing for the Web


Accessibility

OSU's Equal Access and Opportunity has compiled accessibility guidelines to help us comply with the WCAG 2.0 Standard. The OSU IT Accessibility Policy requires conformance with the first two levels of that standard; A and AA. 

Here are a few basic tips:

Headers

  • H2, H3, H4, etc. headings should be used to break up text. Heading 1 is the for the site title and Heading 2 is for the page title. To create a clear visual and semantic hierarchy, only heading 1 and 2 can be used for these titles. 
  • The subhead should relate to the paragraph that follows it and should be a brief descriptive title, not a full sentence.  Headings are meant to be scanned 
  • Subheading numbers must increase in numerical order (H2 is followed by H3, etc.) - this enables screen readers / assistive devices to scan through the page.
  • Subheadings may decrease in any jump. Think indenting outline format:
    • H1 - Site name
      • H2 - Main topic
        • H3 - Topic
        • H3 - Topic
          • H4 - Sub-topic
      • H2 - Main topic #2
        • H3 - Topic
  • Don't use bold text as a way to get the visual effect of a header. Users of assistive devices are able to skip to the next heading while interacting with a page. They are not able to do so with bold text.
  • Don't use a header as a way to get the visual effect of bold text. This can take users skipping by headers out of the flow of the page.

Headings examples

  • Links give users opportunities to find additional information and key messaging in your site. Link text should be descriptive of where the link will take the user
  • In most cases, the proper link text is probably already in your content, and it just needs to be emphasized as the link.
  • Extraneous words used as links such as; "click here" or "more" should be avoided in most situations, although if you dive into the WCAG guidelines on descriptive links you'll learn a lot more.

Use this: Learning what to write as proper link text can be confusing, but you can learn more by visiting Descriptive Links Accessibility.

Instead of: Learning what to write as proper link text can be confusing, but to learn more click here.

Images

  • Use images with no text
  • Use "alt tags" on images you add to the site.
  • Include meaningful information describing each image in the alt text.
  • Use null (empty) alt text when text describing the image is already on the page (alt="").
  • Don’t start the alt text with Image of or Photo of – the screen reader already announces that images are images.
  • If the image is decorative and you don’t want the screen reader to announce it at all, use null (empty) alt text (alt="").

Contrast

  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, with some exceptions This adheres to WCAG 2.0, Level AA
  • Tools for checking contrast:
  • Also make a judgement call on color choice. Some color combinations may pass contrast checker tests but still be difficult for full-vision and low-vision users.
    • A particular case you may encounter is black text on orange buttons. Black text may more easily pass contrast checkers than white text, however a study of normal-vision and color-blind users found white on orange easier to read.
    • Both pure white (#FFF) and pure black (#000) pass 4.5:1 on OSU orange (#D73F09). However, white still falls slightly shorter (4.56 vs 4.6) despite being easier to read.

 Additional Accessibility Tools


Style Guide

OSULP's web sites conform to OSU's Brand Guidelines, for colors, fonts, and most official icons

Colors

  • Orange and Black are the primary colors, but there are secondary colors that can be used sparingly. 
  • For digital projects, the orange we are using is #D73F09.
  • Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. See OSU's IT Accessibility Policy for color and contrast specifications and guidance.

Fonts

  • The OSU fonts are embedded in OSULP's Drupal account, but if you are creating web content in another system, you may wish to request a download.

Graphics and Icons

  • OSU has developed a set of icons and graphicsfor download and also has enabled the use of FontAwesome icons in Drupal.  There are also some OSU Library icons in the CN Shared Drive>Communications and Marketing>OSU and Library Icons
  • Best practice is to use icons from the same set, so that they all have the same look and feel, or the official icons from marketing.

Photography

OSU's Digital Experience group has pulled together some recommendations about images/photos and points to places to find photos, including OSU photos that meet OSU Brand Guidelines

As noted in the Accessibility Section of this guide, use alt tags on your images so that assistive devices can let low-vision users know what the image is about.

For additional photos taken for the OSU Libraries,

  • Navigate to the Library's CN Shared Drive> Communications and Marketing> Photographs, Photo Releases and Photographers 
  • Review photos taken by Hannah O'Leary in a 2016 photoshoot at Valley Library
Highlights on the Valley library home page
  • The highlights section on the home page is a Drupal template called "3 column Paragraph style"
  • Dimensions: 500 x 500 pixels or larger (need to be square for the highlights section).  We recommend 102 PPI. 
  • File type:  png, jpg, or jpeg.   PDF is not acceptable for images.
  • Highlights should be related to the library in some way; such as library announcements, library-backed projects, or featured collections at the library
  • If you use words on the image - use fewer than 10, and repeat important words in the caption description.  Text on images is not accessible to screen readers
  • Contact LIT to submit a new highlight


How to add media to pages

In the editor, click on the 'Media' icon. It looks like two overlapped photos.


Next, click on 'Browse...' to upload a new photo. (if you're using an existing image, click 'Library' instead)

This will open a file browser to select your photo



Once you've selected your photo, click on 'Upload'

Wait for the upload to finish. When the 'Upload' button turns into a 'Remove' button, click 'Next'


Now you're able to edit a few details about the photo for Drupal. Don't worry, you'll be able to change these later, but at least fill out the 'Alt Text' before you hit 'Save'.


Ack! Too big ....


Not to worry – You can scroll! Scroll to the bottom of the image and select a different size from the 'Display as' dropdown. I picked `400 wide`, but there's lots to choose from (and you can change it later!)

That's better (big grin)


This is also where you can select the alignment for the photo. This will impact how words wrap around the image as well as the placement on the page. As always, you can change it later.

Now scroll again! There's more below the fold.

If you didn't give the image a 'alt text' earlier, go ahead and do that now. Also if you want the image to be a link, you can fill out the 'URL redirects' section, but this isn't required.

Once you're done, click 'Submit'



Your editor window might look a little different than the live view, so be sure to save and check the content



Here's how it looks live. The image looks correct, but the image cuts off the text mid word (yikes), so I'll probably want to play with it more. If this happens to you, just return to the editor view, select the image, and click on the 'Media' icon again. It'll take you directly to the final screen so you can adjust the Display and Alignment until it looks right. (smile)