Website Resources

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:

• Role & Responsibility
• Writing for the Web
• Getting Started with Accessibility

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.

Sizing

• 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.

Naming Conventions

Make sure there are no spaces in the name

• PageBanner_Dept.Abbreviation_Description_Month_Year
• TextImage_Dept.Abbreviation_Description_Month_Year
• CallOut_Dept.Abbreviation_Description_Month_Year
• Slideshow_Dept.Abbreviation_Descrption_Month_Year

Examples

• PageBanner_CR_Rockwall_03_17
• SlideShow_SEP_AlternativeBreakHouston_01_18

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." 

Editorial Style 

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. 

Web Accessibility

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. 

Headings

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

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." 

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. 

1. The content cannot be displayed in any other way. 
2. The content must be able to be printed and submitted as a hard copy. 
3. 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. 

• How to make Word documents accessible.
• Test your Word document for accessibility. 

Making an Excel Document accessible

Microsoft Excel files are generally accessible as long as you do not include complex formatting, such as merged cells.  

• How to make Excel documents accessible. 
• Test your Excel document for accessibility. 

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"

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. 

Videos

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.