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:

Most of front page of the site, excluding news items and calendar items.
The header and footer
The main navigation menu
1. If you create a page that needs to be linked to the main menu, ask via the LIT Co ntact 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-Build ing 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 Co ntact 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

Paragraph text should be brief and to the point. The most important information should be placed in the first paragraph on the page.
Usability.gov has guidance o n writing for the Web; you may also wish to consult University Relations & Marketing's Editorial Style.

Accessibility

OSU's Equal Access and Opportunity has compiled acces sibility 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.

Links

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 guideline s on d escriptive 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 clic k 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="").
- See w3c's definition of a decorative image to know when you can use null (empty) alt text.
- See more image type definitions for examples of image usage you may be considering and how to write alt text for them.

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:
- Web AIM contr ast checker
- Checking combinations of OSU's colors for 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

a11y project ch ecklist

Style Guide

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

Colors

Orange and Black are the primary colors, but there are secon dary 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 ico ns an d graphics for 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

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.