Web and UX

Student lounging in chair with a laptop

Student Life Web Design Policies and Guidelines

The Web and UX 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 and UX 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 Communications Manager, Web and UX Sean Diffendall 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 and UX 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

Page Creation Guidelines

Requests for new web pages will be reviewed by the Web and UX 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.

More pages mean more clicking. Minimizing clicks eases users’ experiences.

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 and UX 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

“Users rarely read online, preferring to scan text for the information they need. On the average web page, only about 16 percent of users read word-by-word, and typically only 20 to 28 percent of the words on a page are read." — Nielsen Norman: How Users Read on the Web

The SL Comm team reserves the right to rewrite or reformat provided copy to meet accessibility, readability or AP style requirements.

Text should be understandable to the widest audience possible. Use the clearest and simplest language possible.

  • In general, the SL Comm team aims for a Grade 8–9 reading level.
  • Try using the Hemingway App to improve the readability of your content.

Key information and the call-to-action should always be towards the top of the page.

Avoid walls of text  and long paragraphs.

  • Copy for a website should be brief and action-oriented.
  • Break information into smaller chunks with subheadings for better scanability.
  • Use bulleted lists when appropriate to break up longer text.
     

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

Colors

The Web and UX 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

Documents and PDFs should be reviewed by the SL Comm team for AP style and accessibility before being uploaded to the web.

The PDF Accessibility Checker in Adobe Acrobat should be run to fix any accessibility issues.

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 exported and uploaded as PDFs.

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 and UX team is not responsible for maintaining an archive of departmental policy and form documents.