University of Delaware Logo

Web, UX and Accessibility

Student lounging in chair with a laptop
Division of Student Life

Jump to a Section

Student Life Web Design Guidelines and Procedures

The Web, UX and Accessibility team manages all websites for the Division of Student Life. We support the following content management systems:

  • Adobe Experience Manager (AEM)
  • WordPress
  • Google Sites (Henquarters staff intranet)

Most web edits, updates and changes should go through the Web, UX and Accessibility team; however, there may be instances where a unit member may have limited access to the website for specific purposes. Requests for access must go to Sean Diffendall, communications manager for Web, UX and Accessibility for approval and training.

Websites should be kept up to date on a frequent basis—as often as information changes. Each department or unit is responsible for reviewing their content and submitting regular updates through the project request form. The Web, UX and Accessibility team requests a one- to two-day turnaround time for small updates and edits, but these are often completed in less than 24 hours.

Request a web edit or project

Analytics

Standard analytics dashboards are available for the following Student Life websites:

You can change the scope of the data using the date selection dropdown, or review the data for specific pages or groups of pages using the "Filter by page" dropdown.

Page Creation Guidelines

Requests for new web pages will be reviewed by the Web, UX and Accessibility team. In some cases, a full page may not be necessary or recommended, but we will consult with your team to find the solution for including the content.

Pages should have a cohesive theme and topic or a primary call to action.

Text volume should be limited on a page to ensure the content is consumable and user-friendly.

  • Keep in mind that text is compressed on mobile, potentially increasing the perceived volume.

If content is low-volume or related to content on an existing page, adding it to an existing page may be the best solution.

Anchors can provide direct links without separating pages.

Requested Update New Page New Section New Content UD Events and/or Social Media
Additional information about existing program     ✔  
Addition of new program in a series     ✔  
New content unrelated to anything existing on the current pages ✔      
New content related to an existing topic on the current pages   ✔    
Introduction of services not mentioned on existing pages ✔      
Announce new event       ✔
Provide full details of new event       ✔

Menus and Navigation

The Web, UX and Accessibility team encourages a limit on the number of top-level navigation options to seven to 10 items.

Menus can have no more than two sub-levels. This is a web platform restriction and usability best practice.

  • Navigation labels should be concise, familiar and comprehensive.
  • Don't use internal or branded terms as navigation labels. Instead, use broader language to describe the service offered.
  • Avoid vague labels such as “learn,” “explore” and “discover.”
  • Navigation labels should be front loaded with the most important words.

Links

  • Avoid using ambiguous link text (e.g. "Click here" or "Read more").
  • Add links to meaningful text or a call-to-action to indicate where the link will take the user (e.g. UD Undergraduate Admissions).
  • Don’t use a url as link text. (e.g. https://www.udel.edu/apply/undergraduate-admissions/)
  • Avoid repetitive links on a single page.
  • Don’t add an email link to regular text. Users won’t automatically know the link will open an email client. Type out the full email addresses and then link that email address (e.g., Contact johndoe@udel.edu for information).
  • All telephone numbers will be hyperlinked for mobile use.

Text and Readability

The SL Comm will review content for AP style, accessibility, readability and brand guidelines and edit as needed. We are happy to share insight into the changes and aim for consensus, but please be aware the SL Comm team is the final authority on web deliverables.

Try using the Hemingway App to improve the readability of your content.

 

Tips for Content Development

Tips for Content Development

Tip #1 - Kill the welcome mat and cut to the chase. The average user will only read 20–28% of words on a web page. Don’t waste word count on generic, feel good material. — Nielsen Norman: How Users Read on the Web

Tip #2 - Employ scannable text, using:

  • Highlighted keywords (this includes hyperlinks)
  • Meaningful subheadings
  • Bulleted lists
  • One idea per paragraph
  • Half the word count (or less) than conventional writing

Tip #3 - Use the inverted pyramid; present the most important information (or conclusion) first.

Inverted Pyramid Diagram displaying 'Need to know' at the top and 'Nice to know' at the bottomTip #4 - Avoid jargon. Use simple, clear language. Aim for a 8–9 grade reading level.

Tip #5 - Use short sentences. Avoid compound sentences that strain users’ short-term memory. Use chunking to break up content into smaller units of information.

Tip #6 - Use active voice.

Tip #7 - Be brief.

  • Avoid redundancy. Cut words or phrases that reiterate the same idea. (this bullet point is pushing it)
  • Trim expletives or unnecessary modifiers.
  • Remove excess information that isn’t needed for comprehension.
  • Use adjectives rather than noun phrases.

Tip #8 - More on bulleted lists:

  • Write list items to have similar line lengths.
  • Use parallel sentence construction for all list items.
  • Avoid repeating the same word(s) at the beginning of each list item.
  • Keep formatting consistent (i.e. capitalization and punctuation).

Tip #9 - Use appropriate formatting.

  • Avoid the use of ALL CAPS.
  • Use bold if you need to emphasize text.
  • Important text should not be underlined, as it may be confused for a link.
Collapse

Colors

The Web, UX and Accessibility team will use the approved UD color palette and adhere to the UD Color Accessibility Chart and WCAG contrast standards.

  • Colors outside the palette can be added to the page through imagery and photography.
  • Requests for custom colors may be approved depending on need (e.g., diversity or culturally-significant colors or custom branded event series).

Images

The use of stock photographs and images should be avoided.

The use of images of text should be avoided. If there isn't a more suitable option, the text should also be included as image alt text and in the body copy of the page.

Accordions

Accordions can be used to reduce page length and clutter, improve scanability and minimize scrolling.

  • Accordions should be used primarily for information that is less relevant to the user, thereby reducing cognitive load.
  • Avoid using accordions for small bits of information, such as a single link or sentence.

Accordions cannot be nested inside other accordions. This creates an accessibility issue.

Example of an accordion

PDFs and Documents

PDFs will be reviewed by the SL Comm team for AP style and accessibility before being uploaded to the web. In some cases, it may be determined that a PDF is not the most accessible solution. In these instances, the text content will be added directly to an existing web page or build as a new page.

All internally-created PDFs linked from our website must comply with Web Content Accessibility Guidelines 2.1, level A and AA standards. The PDF Accessibility Checker in Adobe Acrobat should be run to fix any accessibility issues. The Web, UX and Accessibility will review and perform final accessibility remediation of PDFs before they are uploaded.

Linking to a Google Doc or Sheet should be avoided. These formats are unreliable. Permissions may change or the documents may be deleted or moved. Documents should be added as html web content.

When a revision of an existing PDF on a website is needed, please note the revision date in the document itself (e.g. in the footer), not in the filename.

The PDF on the website will be replaced. Please note that the Web, UX and Accessibility team is not responsible for maintaining an archive of departmental policy and form documents.

About the Division of Student Life

Student Life Communications and Marketing

Student Life Resources