Web Style Guide

• Accessibility

  Web accessibility ensures that all people have equitable access to information and experiences online. All UConn Health web templates are designed to conform to WCAG 2.1 standards. View complete accessibility standards on the Brand Standards website. 

  • Use descriptive Alternative Text tags on all images. The example below shows where to add the alt text in WordPress. The alt text for this photo is: A father sitting at the table working, with daughter sitting on his lap and son watching.
  • PDFs should contain real text, not scanned text or images of text, and be tagged and exported correctly by enabling accessibility.
  • In general, avoid or limit content that moves (e.g., blinks, scrolls, rotates, etc.). Movement on web pages is often distracting. It also decreases readability and accessibility.
  • Exceptions may be made for manually controlled rotating sliders.

  Test for accessibility:

  • WAVE: Web Accessibility Evaluation Tool
  • Other Web Accessibility Evaluation Tools

  Digital Accessibility

• Branding

  • Ensure all web content, including .pdfs, .docs, etc., is brand compliant. The blue banner with the UConn Health logo and the footer are required elements and are included in the UConn Health templates. Visit Brand Standards for more information on brand guidelines.
  • Fonts are predetermined and included in the UConn Health templates. Do not change them or add additional fonts.
  • The font family for body text is “Helvetica, Arial, sans-serif”.
  • The primary UConn Health wordmark is required in the blue banner and is included in the template.
  • When the wordmark or custom wordmarks are used on a web page, wordmark and logo standards must be followed.
  • Color options are preset into the UConn Health templates.

  Brand Standards

• Editorial Style

  • On first reference, spell out the full formal name of the organization (or other entity), followed by the acronym in parentheses. Use the acronym in subsequent references (exceptions include acronyms such as FBI, DNA, CIA, where the acronym is better known than the full title and can be used at first reference without spelling it out). For example: The School of Business has joined the Entrepreneurship Bootcamp for Veterans with Disabilities (EBV).
  • Avoid using acronyms where possible, especially if there are three or fewer references to the organization in the article.
  • Plural forms of acronyms do not require an apostrophe (Example: Ph.D.s, N.G.O.s)
  • When providing an address or contact information, follow this format:
  • Department or Program Name Street Address Farmington, CT 06030-XXXX Phone: 860.679.XXXX Email: emailaddress@uchc.edu
  • Be sure to use official department/office names and titles.
  • Add the mail code after the ZIP code when including it in an address. When referencing in text, use the format: MC XXXX. Don’t use MC-XXXX or MCXXXX.
  • Room number format: AG050. Don’t use AG-050 or AG 050.
  • Use numbers for floors, e.g., 1st Floor, 2nd Floor.
  • Avoid using ampersands and hyphens. The one exception is if it is part of the formal title of a published work or of a department/organization.
  • When writing captions, use “From left” or “left”; no parentheses, and don’t abbreviate “l to r” (Example: “From left, President Radenka Maric, Gov. Ned Lamont” or “President Radenka Maric, left, and Gov. Ned Lamont.”)
  • UConn Health uses the serial comma (also known as the Oxford comma). There is a comma before the conjunction in a list of three or more items. For example: “dermatology, surgery, pediatrics, and dentistry” not “dermatology, surgery, pediatrics and dentistry”.
  • Specific dates should be formatted: month day, year (Example: June 9, 2016).
  • Do not include a comma when only using the month and year (Example: May 2016).
  • Use the word “to” in copy, not a hyphen: “from 11 a.m. to 2 p.m.;” only use an en dash in abbreviated copy, such as a calendar item or an invitation: “11 a.m.-2 p.m.”
  • Use “noon” and “midnight,” not 12 p.m. or 12 a.m.
  • Do not include “:00” for on-the-hour times, even in ranges. (Example: 9 a.m., not 9:00 a.m.)
  • Write a.m. and p.m. in lowercase, with periods between the letters.
  • Email is one word with no hyphen and should only be capitalized if it begins a sentence. Other terms referring to electronic devices or businesses, however, should contain a lowercase “e,” followed by a hyphen and the product being described: email, e-commerce, e-reader, e-books.
  • Email addresses are written in all lowercase letters.
  • Use hyphens in phone numbers, not periods or parentheses.
  • Use only one space between sentences.
  • When used in written format, as opposed to as a wordmark, UConn should appear as UConn, not UCONN. UCONN is only capitalized in the wordmark system.
  • Always use UConn Health, never UCONN Health, UConn Health Center, UCHC, UCH, or University of Connecticut Health.
  • When writing your UConn Health website address in print materials or an advertisement, omit the http:// and/or “www”. (Examples: health.uconn.edu; medicine.uconn.edu)
  • All lowercase for words in URLs (Example: uconnmagazine.uconn.edu); exceptions to this rule are: UConnAlumni.com and UConnHuskies.com

  Guide to Names at UConn Health

• Images

  One component of the UConn Health brand is photography that captures the essence of UConn pride. When selecting photography, use the following guidelines:

  • Photos should be actual size and full quality as captured directly by the camera. Do not crop or adjust in any way. Do not submit photos copied from websites.
  • Avoid the use of flash unless absolutely necessary to provide a clear picture.
  • The subject should be close to the camera so that the photo will require minimal cropping. Avoid distracting backgrounds.
  • The subject should be dressed in a respectful manner. Except for UConn gear, avoid clothing with logos or other branding.
  • Be sure you have permission to use all photos and graphics. Images and text taken from other websites are typically copyrighted and cannot be used without permission. Include photo credits for photographs obtained from external sources.

  Photography

• Web Best Practices

  • Colored text should only be used to indicate a link. Link text and color is built into the UConn Health templates for you.
  • Never use color to highlight text.
  • UConn Health WordPress and Sitecore templates are preset with default heading styles (heading 1, 2, 3, etc.). Page headings are automatically formatted for you and use the Heading 1 style. Use heading styles in order from 2-5 for content headings and subheadings
  • Hyperlinked text should be a noun that specifically describes the content of the page you’re linking to. The words “click here” make the document or webpage you are linking to less usable to readers and should not be used as link text. Example: For more information, see our course schedule. (Not, “Click here to see our course schedule.”)
  • Generally, don’t spell out a URL in page text. Instead, make words into a link that leads to that URL. Example: See our course schedule. (Not, “To see our course schedule, visit http://health.uconn.edu.”)
  • When making text into a link, don’t include the spaces or punctuation before or after a word in the link.
  • If a link is broken, it should be updated or removed. It is never acceptable to use strikethrough to identify a broken link.
  • Proofread all text before making a single page or full website live. See Editorial Style below.
  • Check layout integrity and image quality on multiple screen sizes by either resizing the browser to the desired screen size, or in Google Chrome, select menu > More Tools > Dev Tools, and click on the mobile phone icon in the menu bar. You can then select different mobile screen sizes.
  • Quality assurance test by testing the web form and email delivery, functionality testing, and link checking.
  • Don’t use tables for page layout. Tables should only be used to present data in a structured, tabular format. People with disabilities use alternative browsers such as screen readers and speech output browsers. Using alternative browsers on table-based websites can provide users with a problematic experience. Users of mobile devices (e.g., iPhones, Android phones) also benefit from tableless websites. Please use <DIV> tags as an alternative.
  • Placeholder pages containing nothing but text such as “Page under construction” or “Information to come” will not be published. We will wait to put these pages up until the content is available.
  • Underlining should only be used for links so as not to confuse the reader.
  • Check web pages, Images, and documents for ADA compliance.

  Optimized Web Pages