Intranet Style Guide

Campus websites must be accessible.

• Use plain language.
• Follow accessibility guidance on alternative text for images. Complex images like infographics, charts and diagrams may require a long description.
• Avoid directional language (e.g., right, left, below, following).
• Use meaningful link text and avoid using “click here”, “more” and “read more.”
• Open links to new web pages in the same tab/window.
• Restrict the use of tables to tabular data.
• Use headings properly.
• Avoid linking PDFs and Docs. Users strongly dislike PDFs and they present usability and accessibility issues.
• Convert PDF and Excel forms to Gravity Forms (not for use with non-public data).
• Provide closed captioning and transcripts for videos.
• Ensure that graphics, including icons and infographics, have sufficient color contrast (WebAIM Color Contrast Checker).

More information is available in the UW–Madison Digital Accessibility Policy and the UW accessibility website.

It is critical to make semantic use of heading tags (h1, h2, h3, etc.). These tags define the page structure and screen readers rely on them. Heading tags are not to be used merely for text formatting. An h3 is a child section of an h2, which is a child section of an h1. In other words, if a page has an h3, it must have a parent h2.

The WiscWeb theme’s page title is automatically set to h1, so h1 cannot be used within the page body. Therefore, any first-level subsections will start with an h2.

Per campus accessibility guidelines, links to other web pages must open in the same window. A link within a form can open in a new window so users don’t lose information they may have entered.

Write meaningful link labels. Keep the 4 Ss in mind: link labels should be specific, sincere (accurate), substantial, and succinct. Do not use full URLs as link text. Do not use “click here.”

• Correct: View information about GravityForms.
• Incorrect: View information about GravityForms here: https://kb.wisc.edu/wiscweb/page.php?id=70108.
• Incorrect: Click here to view information about GravityForms.

Do not use a person’s name as the link text if you’re linking to an email address; instead use the email address. Include email before the name to declare that the function of the link is to email the person. If only the person’s name is linked, the link should point to a web page about that person.

• Correct: Contact Samantha Jones at sjones@xyz.edu.
• Correct: Email Samantha Jones.
• Incorrect: Contact Samantha Jones.

If linking to an external file, indicate a file will open by putting the file type in parentheses and including that in the  link.

• Use standard PC file extensions (PDF, PPT, DOCX, etc.)
• Include the file type in the link. Example: View the campus badge policy (PDF) for more information.

Bulleted lists are a great way to make pages more scannable. Follow this format:

• Capitalize the first letter of each list item.
• Don’t use semicolons after each list item. Use periods if each item is a sentence (or completes the opening stem sentence). Don’t use punctuation if the items are fragments.
• Be consistent in verb tense and punctuation.

Correct bulleted list

The capstone project will include:

• A written report
• An oral presentation
• A multimedia project

Incorrect bulleted list

The capstone project will include:

• Writing a report;
• an oral presentation; or
• a complete multimedia project.

For consistency, follow the UW-Madison Editorial Style Guide. Here are some rules of particular note, and some not covered in the guide:

• Avoid acronyms and jargon, especially when abbreviations and terminology aren’t likely to be known outside of your administrative unit or department.
• Ampersands: Do not use unless part of a proper name.
• Capitalization: Avoid excess capitalization, particularly with titles
• Commas: Do not use a serial/Oxford comma with 3 or more items, unless not doing so would cause confusion.
• Dates: Do not abbreviate months. Do not use ordinal numbers (2nd, 3rd).
  • Correct: Submissions are due by July 12
  • Correct: Meeting dates are March 5, 12 and 19
  • Correct: The event takes place October 13-14
  • Correct: The event will be held 8 a.m. August 12 at the Health Sciences Learning Center
  • Incorrect: Submissions are due by July 12th
• Degrees: Do not use periods (MD, PhD, etc.; not M.D., Ph.D.)
• Health care (two words), not healthcare
• Health professions student, not health professional student
• UW–Madison uses an en dash not a hyphen; the same is true for University of Wisconsin–Madison.
• University-wide but no hyphen in other “-wide” words (schoolwide, campuswide, systemwide, statewide, citywide, countywide, nationwide, worldwide)
• Internet terms:
  • email (no hyphen), e-newsletter (hyphenated)
  • login, logon, logoff (nouns); log in, log on, log off (verbs)
  • home page (two words), web page (two words) website (one word), online (one word)
• Percentages: Spell out the word percent. The symbol % is acceptable in lists, tables, and charts, but not in running text except in scientific, mathematical, and highly technical contexts
  • Correct: Enrollment increased by 27 percent
  • Incorrect: Enrollment increased by 27%
• Times:
  • Use a.m. or p.m. (use periods).
  • Use noon or midnight instead of 12 p.m. or 12 a.m.
  • Do not add :00 for times on the hour.
  • In a range of times, include a.m. or p.m. with the later time only, unless the range includes both (8 to 11:30 a.m.; 1:30-5 p.m.; but, 9 a.m.-2 p.m. or 8 a.m. to noon).

Other rules

• Avoid using exclamation points.
• Master of public health is not a master’s degree; it is a health professions degree
• Periods: Use one space following a period.
• Redundancies: You can clean up your copy by avoiding phrases like these:
  • “Advance registration” or “preregistration” (to register for something means to do so in advance).
  • “Is currently” (“is” and “currently” both refer to present time).
  • “Including, but not limited to” (“including” denotes that there could be additional items).
  • “Join together” (“join” means to bring together).
  • “Joint collaboration” (collaborations are joint ventures).
• Text formatting:
  • Avoid excess use of bold and italicized text.
  • Do not underline regular text. On the web, underlining indicates that text is a link.
  • Do not use superscripts and subscripts. Use normal text, e.g., “the 16th annual symposium.”
  • Headers (h2, h3, etc.) are used for page structure. Headings are not used for style alone (to make text bold or larger).

General web writing guidelines

• Underlined text should only be used for links on the web, not for emphasis.
• Web writing should be much less formal than academic writing — use an active voice and a more conversational tone.
• Cut the clutter. Use the inverted pyramid.
• Eliminate platitudes such as “welcome to our website!” and other blah-blah text.
• Avoid jargon. Use plain language.
• Avoid directional language, such as “click the box on the right” or “read below to learn more” — directional language is not relevant to those using screen readers and can change on mobile devices (the “box on the right” might be above or below when viewed on a phone).
• Web copy should be scannable — a few techniques that can help achieve this include:
  • Short paragraphs (similar to news writing)
  • Subheads to break up long pages
  • Bulleted lists

Follow the WiscWeb – Image Sizing Recommendations.

• Images should not be larger than 180k. Use an image compression program (like Photoshop) to optimize images for web.
• Use professional quality images (i.e., shot by professional photographers with UW–Madison or UW Health). Use authentic imagery, and ensure that imagery is not taken out of its original context. Do not use stock photography or videography. Follow best practices described in the UW–Madison Inclusive Communications Guide.
• UW–Madison/University Communications photos can be used within the photo use guidelines.
  • Published photos must include a credit (“photographer’s name/University of Wisconsin–Madison” or “courtesy of …”).
  • UW–Madison photo library photos are available for noncommercial communication pieces about UW–Madison.
  • The images are not available for use unrelated to UW–Madison.
• You must have an authorization form on file to use any photos and videos that show patients and clinical research participants. Consent forms for UW Health patients are available in English and Spanish. Consent forms for clinical research participants at UW–Madison are available through the Office of Compliance.
• Permission must be granted to use photos from other organizations/institutions. Do not use images from websites or Google image search without permission.
• Add alt text for images to comply with accessibility standards.
  • Be accurate and equivalent in representing content and function.
  • Be succinct without sacrificing accuracy. Typically, only a few words are necessary.
  • Do not be redundant or provide the same information as the caption or text near the image.
  • Do not include phrases like “photo of …”, “graphic of …”, or “headshot of …” etc. This is redundant since screen readers already announce “graphic” along with the alt text.

Avoid using

• A resolution higher than 72 dpi
• Images scaled larger than the source file size
• Distorted images
• Stock imagery (research shows that stock photography often harms the user experience)

Hero images

• Should only be used on the home page and section front pages
• Should I use a carousel? Probably not. Most users will not linger on a page long enough to flip through a carousel. If you need convincing, here’s a blunt explanation of why carousels generally are a bad idea. However, the web team recognizes that photo carousels can be a strategic way to address multi-pronged missions. If you must create one, use no more than three images.
• More information: WiscWeb – Using the Hero Content Area

Icons

Icons can be an effective way to visually convey information, but they can also confuse users. Choose icons that are easily recognized and understood. If the concept is esoteric or doesn’t have an obvious visual association, then it’s better not to use an icon. Text should accompany icons, not be included in the image.

Naming images

In addition to the URL, captions, surrounding text and alt text, Google uses the file name to help it understand your images and rank them in image searches. File names give Google clues about the subject matter of the image. For example, HSLC-main-atrium.jpg is better than IMG00023.JPG.

The intranet uses Google Programmable Search. If you recently added a page and need it to show in search ASAP, please contact the web team to have the page submitted for indexing. After submission, indexing is typically done within a few days. If indexing is not requested, it may take a few weeks for Google to index new pages.

Tips for improving searchability:

• Convert pdfs, Word documents and PowerPoints to web content (as a bonus, this also improves user experience).
• Include an introductory paragraph on each page that explains what the page is about and includes keywords.
• Use keywords and phrases your audience will use to search. The official title may be “Policy on Interactions with Industry” but users may search for “conflict of interest policy.”
• Include transcripts with videos.
• Include descriptions of charts and infographics as web content.

Use a post instead of a page when you want to:

• Add a blog-like feature to your content.
• Group related items by category or tag, like “News.”
• Allow comments.

To create a post click Posts > Add New. Note that there are fewer content elements available for posts; you will be limited to text and photos.

Customized news feeds

You can select or add additional categories to create a feed of articles for the area of the intranet you manage. To display a feed on a page, use the Posts Listing element.

See DoIT’s information about creating posts and using the Posts Listing page element for detailed instructions.