Best Practices

Consider these tips for writing user-friendly and easy-to-read content that meets the needs of your web audiences.

Do's and Don'ts

Links

Don't label your links with verbs or phrases like "Click Here." When calling the user to action, use brief but meaningful text that:

  • Provides information when read out of context
    • Instead of: Click here to learn more about our program requirements
    • Use: Psychology program requirements are managed by the Behavioral Sciences department and updated yearly.
  • Explains what the link offers
    • Instead of : Photos of our past events are here, here, and here.
    • Use: Photos of our past events: Alumni Day, 30-Minute Mentors, and Homecoming
  • Is not a verb phrase
    • Instead of: Learn more about student leadership events
    • Use: Learn about student leadership events
  • Is not a hyperlink
    • Instead of: https://umdearborn.edu/admissions/transfer
    • Use: Transfer Admissions

Link to existing content rather than recreating it on your pages. This makes for easier content updates and more accurate information, as it eliminates the need to update content in more than one spot on the site. 

Only set links to open in new tabs if they link to a file or an external page (outside of umdearborn.edu). Opening new tabs of the same website is redundant and confusing for your users.

Fix broken links. Update or remove broken links from your web pages. They provide a poor user experience and negatively effect Search Engine Optimization (SEO).

Buttons and Calls To Action

Don't overdo links and buttons. If everything is emphasized, nothing will stand out as important.

Left Navigation

7 is the magic number. Reduce the number of left navigation items to no more than 7. If your site has more than this, consider reorganizing your site into broader categories that is meaningful to your audience to house your content. When navigation menus exceed 7, users have a difficult time locating relevant content.

Lists

Consider using the Links Grid or lists to display content in a concise, easily consumed format.

Images

No larger than 1 MB. Images should be compressed to the smallest format possible without losing resolution. JPG images are more compact than PNG images. Larger images require a longer page load and offer no additional benefits in resolution on the website. Slow loading web pages can cause a negative effect in Search Engine Optimization (SEO). This can causes your pages to rank lower in search results. To reduce image size, please use graphic programs outside of the Drupal Content Management System (CMS).

Style Guide Preferences

Phone number format

  • Do: 313-583-6330
  • Do Not: (313) 583-6330

Reference to UM-Dearborn

  • Do: UM-Dearborn
  • Do Not: UMD, UM Dearborn, UofM Dearborn, U-M Dearborn

Capitalization

Do not capitalize every letter in a word to provide greater emphasis. It is much more difficult to read all capitalized words on electronic devices.

Headings

Headings or header tags provide structure to organize content in an outline format. It allows users to quickly scan the page to locate relevant information. It also sends a strong signal for SEO. Google’s Senior Search Analyst, John Mueller says, “when it comes to text on a page, a heading is a really strong signal telling us this part of the page is about this topic.”

Think of headers like a book:

  1. Heading 1: Title of book
  2. Heading 2: Chapters within the book
  3. Heading 3: Subtopics within a chapter

Heading 1 is used as the page title and only used once per page. 

Headings 2 and 3 should be used in order. Just like a book, you cannot have a Subtopic before introducing the Chapter.

  • Do: Use headings in order to structure and organize content on your web page. This enables visitors to quickly scan the page for important information, assists in accessibility of the site and provides search engines with structure and identifies important information on the page.
  • Do not: Headings should not be used solely to make text larger or bold. Headings must used in their hierarchical order.

Related Resources

If Related Resources are not being used on a page, please remove element from the page.