Student Affairs Website Overview
The Student Affairs website is maintained by the Communications & Marketing office. We oversee content editor training and access to the website. You can also request website changes through our office.
Many Student Affairs departments have a content editor. This page provides resources for content editors. If you have a need for a content editor in your unit, please contact the Communications & Marketing Director.
Staff Directory Additions and Updates
To add, remove, or make a change to a staff directory entry, please complete the online Student Affairs Directory form.
New staff must complete the form to be added to the directory and they should receive the form as part of their onboarding process. Please encourage them to check for the email and allow up to 3 weeks for new staff to be added to the directory. For all questions related to the staff directories, email firstname.lastname@example.org.
We hold a staff photoshoot from 1 p.m. - 3 p.m. on the 4th Friday of every month. If you need to have your photo taken for the website directory, please sign up through our online staff photos form.
Web Content Manager Reference Guide
- Content Editor Access and Training
If you have a need for a content editor in your unit, please contact the Communications & Marketing Director.
Website Login Page: studentaffairs.psu.edu/user
Training modules for content editors:
- Image Resources
Image Sizes & Naming Conventions
Web images MUST be sized correctly, cropped before uploading, and named according to the below naming conventions. If you are unsure how to size correctly, please contact our office. We are happy to help upload photos.
- Page Banner – 1366 x 420 pixels
- Text with Image – 208 x 208 pixels
- Call Out – 184 x 184 pixels
- Slideshow – 690 x 460 pixels
Photos should be optimized for the web, downsized to 72 dpi.
Make sure there are no spaces in the name
Other Helpful Tips
- Do not embed text within images. Screen readers cannot read text in an image.
- Ensure all images have a descriptive alt tag. The alt tag should briefly describe what is happening in the photo. You do not need to include words like "photo of" or "image of."
- Content Resources
Penn State uses the Chicago Manual of Style for website content. In addition, Penn State has an editorial style manual that supersedes Chicago style in some cases and contains Penn State-specific style information (such as campus names). Please reference these documents if you have questions about style, spelling, capitalization, dates, numbers, etc.
We have captured some common questions in our Student Affairs website style-guide.
Other Helpful Information
- When copying and pasting content into the website, first copy it into Notepad or TextExit and strip the formatting.
- Use bold sparingly. For headings, us a heading style instead of bold text.
- Use bullets for easy scanning of text or to break up large sections of text.
- Avoid directional language, such as "navigation on the left" because page sections move or disappear on mobile.
- Test your pages on mobile. Especially if you are using tables, it can be helpful to view your page on a cell phone or tablet.
- Use inclusive language. Try to avoid "she/he." It's awkward and can exclude individuals. Use words such as "you," "student," or "they" when possible.
- Accessibility Resources
Accessible content can be understood by everyone, regardless of the browser or adaptive technology a person might be using. Penn State policy requires all web content to be accessible. However, accessible content benefits everyone, even those with no apparent disability.
Visit Penn State's accessibility website for more information and details on making content accessible.
Descriptive Link Text
- Links should be written in conversational text. Do not write out the URL.
- Avoid phrases such as "click here," "read more," or "more information."
- Make sure the linked text describes the information the user will be taken to.
- Do not underline non-linked text as it can look like a broken link.
Image Alt Text
- All images should have Alternative Text or Alt text. Alt text is a required field in our Drupal content management system.
- This is the text that will be read by a screen reader for users with visual impairments. It will also display if the browser has trouble loading an image.
- Alt text should describe what is happening in the photo. Limit Alt text to about 10-20 words.
- Do not include words such as "image of" or "photo of."
Text in Images
- Avoid using text within an image. This text cannot be read by a screen reader, so visually impaired users will not be able to read it. In addition, if the images do not load on your page, this text is not available.
- Text in images often becomes distorted or unreadable when images are resized.
- If you must include text within an image, repeat the text in the Alt text field for that image.
Web content should be organized into small sections separated by visual headings. Heading text must have an HTML tag in order for visually impaired users to navigate a website.
- Every page should have a heading. If there is a large amount of content, the content should be divided into sections with subheads.
- When adding a heading, select heading text, do not use bold font.
- Never use a heading style to format text that is not a section heading.
- Headings should always be used in order from H2-H6. (Heading 1 is not available because it is used for the page title.)
Abbreviations and Acronyms
Avoid using acronyms. In some cases, an acronym may be used on the second reference.
If using an acronym, make sure to spell out the full name at least once on EVERY page where you use the name.
Instead of using an acronym for your office or department, use words such as the center, the institute, the office, etc.
For many standard abbreviations, use periods so that a screen reader can read them. (e.g. U.S., a.m., p.m.)
Page titles should be descriptive and unique to the page. The page title appears in the browser tab as well as in the page header. Page titles are essential for search engine optimization.
Instead of "About," use "About Student Activities."
- File Uploads
PDF, Excel, & Word documents
In general, we do not upload PDF, Word, Excel or other document files to the website. In most cases, we will work with you to find a way to include the information on our website or as an online form. However, there are typically three cases where we'll make an exception.
- The content cannot be displayed in any other way.
- The content must be able to be printed and submitted as a hard copy.
- The content already appears on the website in an accessible format, but you'd like to have it available in another form (usually for the purposes of printing).
If you'd like to upload a file to the website, contact our office for assistance. We will let you know if the file is approved to be posted and assist you in posting.
Any documents that are posted to the website, MUST be made accessible. We will ask you to make the document accessible before sending it to us. Please see the instructions below for how to do this.
Making a Word Document accessible
Word documents are easily made accessible by using the formatting functionality within Microsoft Word and many of the same strategies used for web content. The more complex the document is, the harder it will be to make accessible, so limit formatting, images, etc.
Making an Excel Document accessible
Microsoft Excel files are generally accessible as long as you do not include complex formatting, such as merged cells.
Making a PDF accessible
To ensure that your PDF meets accessibility requirements, you will need to use Adobe Acrobat Pro/DC to check. The most effective way to create an accessible PDF is to make the original document (Word or other) accessible. When you export to a PDF, the features will remain. If you cannot make the original document accessible or if there are some additional remediations you need to make, below are some basic instructions. There are also some tutorials on LinkedIn Learning.
Make Your Accessible PDFs
- Select "Tools > Action Wizard"
- Select "Make Accessible"
- Select "Start" and follow the prompts.
Check for Accessibility Issues
- Select "Tools > Accessibility"
- Select "Full Check" in the new sidebar
- Select the issues that you would like to have checked
- Select "Start Checking"
- Right click on issues to either "Fix", "Explain Rule", or "Check Again"
- Web Forms
When possible, use a web form to collect information instead of a PDF or Word document. We recommend using a Microsoft Form or a Qualtrics form.
- Video & Multimedia Content
If you have video content that you would like to have displayed on your webpage, please send it to the Communications and Marketing Department to upload. The video must meet all requirements below to be included on our website.
- Must be captioned (You can submit a script in Word with the video and we can caption in YouTube).
- Must be uploaded to the Student Affairs YouTube page
- Must contain an end slide with the appropriate Student Affairs wordmark. If you need assistance adding an end slide, contact our office.
Other Multimedia Content
Any audio content, such as podcasts must be transcribed so the content can be accessed by users who are deaf or hard of hearing.