Student Communication Websites
WEBSITE MAINTENANCE
YOU are in charge of your website updates. Because you know your services, hours, staff, and any changes, we rely on you to let us know what needs to be updated.
REQUEST UPDATES TO YOUR WEBSITE
Request a Website Update
Updates are generally done within two business days, but could take longer depending on update needs and incoming requests.
→HOW TO SEND US CONTENT FOR WEBSITE UPDATES
We will simplify and format all content for the web and double check for accessibility and spelling/grammatical errors, but we are relying on the content you send us to be ready to go.
- All content must be correct and finalized. This includes no spelling or grammatical errors and no asking us to gather or create text for you.
- Text must be in a Word/Google Doc or email with text that can be copied and pasted. We will NOT re-type text.
- If you are sending a document with continuous updates, please highlight any changes to content. We will not search through documents to figure out what has changed.
- If you are sending us photos or graphics that you would like us to add to your website, they must not be copyrighted.
- If sending staff photos, please name the photos the person's name.
- All videos that you request be added to your website must be captioned.
- Any Word Docs that are necessary for the website have been created with accessible layout in Microsoft Word.
- Any PDFs that are necessary for the website have been created correctly via a Word Doc conversion to a PDF.
MAINTAIN YOUR OWN WEBSITE
* Depending on your particular website layout, you may not be able to maintain the whole site yourself.
What you can update: We encourage you to only update text on your website. Please come to us for all graphic needs, new page creation, navigation updates and all major updates.
→ACCESS TO SITE MANAGER
Contact Dani to request Site Manager access daniellemckean@weber.edu
→SITE MANAGER TRAINING
→WSU GUIDELINES
→ACCESSIBILITY
FORMS
Most forms for WSU websites can be built in Qualtrics or Google Forms. It is your responsibility to create and maintain this form. Just send it to Student Communications when you are ready to embed it on your website.
- Qualtrics
- Secure for FERPA related info
- Student Access & Success staff can contact Garin Savage (garinsavage@weber.edu) to create Qualtrics forms.
- Google Form
- Video on how to create Google Form
- Do not use FERPA related info on this form - Google From is not a secure format
- Please send embed code to Student Comm instead of adding it to your website yourself (unless you are familiar with code).
- Custom
- If you need a custom secure form more robust than Qualtrics can offer, contact Dani.
NEW WEBSITE OR REDESIGN PROCESS
Development time for website redesigns may vary. Work with Student Communications to figure out a timeline.
Your website will be reviewed during your program review every five years and redesigns or major updates will be addressed if necessary.
- Student communications sends you a creative brief to complete
- Receive a meeting request from Student Communications to review website sitemap created based on a creative brief
- You create content for your website and share with Student Communications to edit and tweak as needed to fit the medium
- Receive mock-up of website for approval
- Student Communications will test, take website live and fix any broken links
- Student Communications will help you with continued maintenance and tweaks to the website based on analytics and student feedback
STUDENT ACCESS & SUCCESS WEB STANDARDS
Training Video
Watch this hour-long video to get a lot of the standards you will read about below.
-
Design
- Use Adobe Photoshop, InDesign, or Illustrator.
All designs should be created with well-organized layers.
- Save working files for future updates in a shared location that can be accessed by others.
- See images below for more info on exporting files
-
Navigation
- Please use the navigation Site Manager provides, do not make your own.
- No mystery navigation.
- Have an obvious link home – home link should never have drop menu options.
-
Development
- Use the Site Manager pre-created layouts.
If you must create your own, please keep clean code, comment your code, use site-wide settings for CSS, ensure the content is accessible in all browsers and screen sizes, and validate your code.
- Use already defined/branded styles including button and icon classes instead of creating your own.
WSU UI Style Guide
-
Copy
- WSU websites use Trade Gothic and PMN Caecilia.
See WSU Brand Fonts for more font resources.
- Text color must have good contrast with the background color so text can be easily read.
For large bodies of text, the best contrast is black text on a white background. Never use white text on a black background for large bodies of text.
- Do not use the term “click here” for your link. All links need to make sense out of context.
- Many web users skim the page content to find what they are looking for.
- Viewing impaired users with screen readers often pull all links out of context into a link box to search through links.
- Search engines spider through your webpages via page links and use the words in the links as reference.
- Divide content using headers.
Every page has a heading 1 (H1 tag) as a page title to tell the user what the over-all page content will be about. There can only be one H1 on a page and it should be the very first item on the page. The title in Site Manager is an H1. All content after the H1 is organized into sections with H2, H3, H4 …
- Do not use a heading element just for the formatting
If it is not actually a designated heading element, do not make text a heading just to have it automatically format. If you want to highlight text that is not a heading element, use the formatting tools or create a style. See Site Manager font styles for font sizing.
- Do not open links in a new browser window.
Many users use the back button to navigate.
- Exceptions to the rule (when to open a link in a new window):
- Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker.
- The user is logged into a secured site, and following a link to a page outside of the secured scope would terminate the user's login.
- If the link is opening a PDF.
- Do not underline text that is not a link.
Web users expect text that is underlined to be a link.
- Keep content simple and concise.
Get to the point, remove unnecessary jargon, and uncommon vocabulary that may slow the reader down or turn them away. Use short paragraphs and sentences.
- Keep text left-aligned.
It is hard to read large amounts of centered or justified text.
- Correct spelling & grammar.
Please have others review your content before posting. RUN SPELL CHECK!
Site Manager does not auto highlight misspellings.
- The site must have a clear path to the conversion goal.
Whether it is signing up for advising or registering for an event, make sure users know what to do.
- No duplicate content.
Do not copy and paste text from another website or repeat your own copy on your website.
-
Tables
- Tables are just for information display. Do not use them for formatting content.
- Use TH elements to represent table headers.
A screen reader reads tables left to right, top to bottom. This may get confusing to a user who cannot see the table. By changing the header TD row to TH, the screen reader knows to repeat the TH header before reading the corresponding table content. It is also helpful to add a caption and summary that explain the purpose of the table to visually impaired users who cannot view the table as a whole. For more information, visit W3Schools HTML Tables.
- Make tables responsive.
Use the correct class depending on the layout and specific needs of your informational table. More information on responsive tables.
-
Images
- All photos/images added to a website need to be 72dpi and sized.
- Image files that can be uploaded:
- JPG: pictures and image with gradient
- PNG: transparent background
- SVG: transparent background vector
- All images need to have an “Alt Tag” (alternative text).
Alternative text explains what the image is. The Alt text is added through the Image Properties in Site Manager. By default Site Manager adds an empty Alt to all images. The empty Alt tells a screen reader that this image is of no importance so it skips the image. This is preferred for any graphical elements that are purely for design and serve no purpose or for staff photos where the person’s name directly follows the image.
- Delete old images that you are no longer using.
Keep your site clean by removing unused images and files from Site Manager.
-
Video/Audio
- Provide alternative content for all audio/video.
Nothing should be provided purely by audio or video that is not represented by text elsewhere.
- Video needs to be captioned (easy to do on YouTube).
- Audio needs to have a link to a text version.
- Video can be uploaded to YouTube or WSU’s Kaltura and embedded on a webpage.
-
PDFs
- Opt to pull text to HTML instead of using a PDF on the web. Work with Student Communications if you need help.
- If you must use a PDF, it must be accessible:
- All PDFs need to be created from Word Docs – do not scan or create from images.
- Just like HTML, Word allows users to add many accessibility options such as providing Alt tags for images and using headings correctly.
- Do not create the PDF by printing to PDF. The Word Doc has to be saved as a PDF.
- Name PDFs with less than 5 words, no spaces, lower-case, hyphen between words.
- Optimize for the web in Adobe Acrobat Pro before uploading to Site Manager.
- Delete old PDFs in Site Manager because they do come up in search engine results.
-
Page Properties
- Page Name
No more than four or five words, use lower-case letters, no spaces or random characters, use hyphens (not underscores) to separate words
- Page Title
Search engines look for keywords in page titles. In Site Manager, the page title is also used to create the name of the page in the navigation, so it has to be short, but explanatory.
- Page Description
Explains what the content on the page is about in more detail than the title. Under 150 characters (including spaces). Sometimes browsers take the page description to display in search results (more often they take content on the page that better matches the search terms). Facebook displays the page description when you add a link to a website to your wall.
-
DO NOT USE
- Flickering or blinking objects
- Font Tags, Flash or Frames (unless okayed with Dani)
- Color as a means to understand or navigate a site (click on the red button to continue)
- Do not add your department logo in the site-wide settings yourself – contact Student Communications
- Just because you can do something “neat” does not always mean you should! Discuss any “cool” features you found and want to use with Student Communications before implementing them on a website.
