rgb(193,32,51)
#ba0c2f

rgb(234,171,0)
#eaab00

rgb(238,238,238)
#eeeeee

rgb(249,249,249)
#f9F9f9

Heading Tags

Headings are defined with the <h1> to <h6> tags where <h1> defines the most important heading and <h6> defines the least important heading. As there should only be one <h1> per page, our office will add this to ensure our pages are in line with best practices.

Search engines use the headings to index the structure and content of your web pages. Headers visually show the user the content structure. Similarly, assistive technologies like screen readers use headers as a table of contents allowing visitors to quickly navigate page content. To this end, do not use headings solely for visual styling such as making text a larger font.

Example:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A subhead is a way to call out a section of text without defining the page structure using a heading tag. Use this class to distinguish important content areas such as Mission Statement.

To add a subhead highlight the text, go to Formats, and choose Content-Subhead from the Custom menu.

Example:

Mission Statement

Paragraph

The <p> tag defines a paragraph.

To add a paragraph go to the Formats menu and choose paragraph under Blocks.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lead Paragraph

The addition of a lead paragraph class will help call atttention to important body copy on a page. It is recommended to only distinguish one lead paragraph per page, as needed, and limit it to the opening paragraph content.

To add a lead paragraph, go to the Formats menu and select Lead-Paragraph under Custom.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A <blockquote> tag typically specifies a section of copy that is quoted from another source. The copy is indented to distinguish it from regular paragraph text.

To add a blockquote, go to the Formats menu and select Blockquote under Blocks.

Example:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." - Source

Color text can convey meaning on the web. For example, all linked text on our site displays as blue text and becomes a lighter blue when hovered over to indicate to site visitors that the text is clickable.

To add text color, highlight the text and go to the Formats menu and select the color you'd like to use under Custom.

Text Color

Example:

This text is red.

Buttons act as a call to action for site visitors. We recommend keeping the text short and in all caps.

To insert a button:

Highlight the text copy you want to make a button and go to the Formats menu. Under custom, select the type of button you would like to use. To insert the link, highlight the text and choose the link button on the toolbar.

Examples:

LINK TEXT

LINK TEXT

LINK TEXT

Responsive images scale up or down to fit the browser window. You can set images to be responsive entirely from the "Insert/Edit Image" tool in the content editor. Please resize your image to web resolution (72dpi) before uploading.

Example:

In our example, we're setting an image to display at 50% of the width of the content section, aligned right and with a 5 pixel padding on all sides. We've also added a brief description of the image that displays in code as an "alt" tag meaning alternate text.

How To:

To get started, select an image file and fill out the description information. Images should not contain a lot of text information. For those with screen readers, the image description reads the image description to provide context to the user.

Next, set the dimension properties. By default, the pixel width and height of the image will display. If you leave this as-is, the image will display at that fixed width and height across window sizes. For a responsive image, we use percent width to set the size. Simply delete the width and height defaults and type in a percent width only (the first dimension box). 100% will make the image display at the full width of the content section. So, if you're using a two column layout, the image will display at the full width of the column.  Use smaller percentages to make the image display smaller. For example, if you want the image to display at half the size of the content section, insert 50% as the width.

You can set padding - open space to the top/bottom (vertical padding) and left/right (horizontal padding) on the advanced tab. This will ensure you have space between the image and content that may be around it. After you insert the image, you can use the Align left, Align center, or Align right options in the content editor.

Suggested image sizes

• Banner Photo - start with 1250px width by 375px height. For site visitors, the bottom edge of the image will be cropped differently by various screen sizes.

• Group shot - a medium image should be about 600px width by 400px height. A larger image can work, depending on how much space your site has. Please let us know if you have questions about an especially large image, or if you notice an image distorting on mobile devices.

• Headshot - Size can vary, but work best in a 2:3 aspect ratio. For smaller images, this is 100px width by 150px height. Medium is 200px width by 300px height.

• Square images - An image with a 1:1 aspect ratio. Depending on length of accompanying text, a good place to start with square images is 300px width by 300px height. 

• URL structure should be readable, succinct and intuitively communicate the content/subject matter of the page
  • Limit URLS to keywords, phrases using alphanumeric characters and placing a hyphen between words when necessary
  • Limit the use of stop words (and, or, but, of, that, a, etc.)
  • URL cannot contain blank or empty spaces, underscores, or other special characters ( ~ $ < > # % { } [ ] | \ & + , . / : ; = ? @ )
• Heading tags should be used to define page structure
  • Use proper nesting of headings
  • Do not use text formatting (such as font size or bold) to give the visual appearance of headings, nor use headers to achieve visual results only.
• Use list tags to convey hierarchical content
  • Use an unordered list <ul> when there is no order of sequence or important
  • Use an ordered list <ol> when suggesting a progression or sequence
  • Use a definition list <dl> only when presenting a structure for definitions
• Correct classes should be used to style page content
• Assets including images, pdfs, and external links should be organized within the files/ folder structure
• Page structures defined by CMS master templates (header, footer, bread crumbs, etc.) may not be manipulated
• Page footers must include unit contact information
• Page should include relevant metadata
  • Page title (no more than 65 characters in length)
  • Page description (between 150 and 170 characters in length)
  • Keywords (separate with commas)

h2. UMSL heading

h3. UMSL heading

h4. UMSL heading

h5. UMSL heading

h6. UMSL heading

• All links must be active and properly functioning 
• Links directing to pages within the same site should be linked using the "Internal" insert option
• Links directing to pages outside the site should be linked using the "External" insert option
  • You can copy and paste in a URL such as https://www.domain.edu/pagename. Make sure the URL is in an https format.
• Link "Targets" should be set as:
  • Same Window: use when a link directs to a page housed within the umsl.edu domain
  • New Window: This opens a new tab for each link. Only use this option when linking to pages that are not housed within the umsl.edu domain
• Linked text should be a small phrase that uses descriptive words that indicate where the link directs to (do NOT use "click here" or list the full URL)
• Use the same text for links that direct users to the same place
• When linking to file downloads, such as a PDF, include the file extension and size with the linked text

• Individual images should not be larger than 250 kilobytes in size with an image resolution of at least 72 pixels per inch.
  • Image compression support: Smart png and jpeg compression, Open source image editor
• To assist users with visual impairments, images should include "Alternate Text" tags to provide a description and purpose of the image
  • Use a description of 140 characters or less as screen readers will not read longer
• If complex images that include substantial text must be used, text that provides the image information should be included in the page content
• Images should use appropriate padding
• Always strive for a diversity of images and inclusive subject matter
• Image content should be professional and appropriately represent the university
• Avoid flashing media/images for those with photosensitive epilepsy
• Ensure images are responsive
• Follow university Digital Asset Management guidelines
• Banner images should not include text

• Banner Photo - start with 1250px width by 375px height. For site visitors, the bottom edge of the image will be cropped differently by various screen sizes.
• Group shot - a medium image should be about 600px width by 400px height. A larger image can work, depending on how much space your site has. Please let us know if you have questions about an especially large image, or if you notice an image distorting on mobile devices.
• Headshot - Size can vary, but work best in a 2:3 aspect ratio. For smaller images, this is 100px width by 150px height. Medium is 200px width by 300px height.
• Square images - An image with a 1:1 aspect ratio. Depending on length of accompanying text, a good place to start with square images is 300px width by 300px height.

• List topic and length of video in text above an embedded video if the player does not automatically provide this
• Videos should include accurate captioning or full transcripts
• Embedded videos should be linked using https://
• Do not set videos to auto play
• Avoid flashing media/images for those with photosensitive epilepsy
• Ensure videos are responsive
• Follow university Digital Asset Management guidelines

Tables should only be used for displaying data, not for page layout. If you need assistance building a responsive table on your site for data, please contact the web team.

• Background/foreground content must pass a color contrast checker

• Colors should not be used to convey important information that may be indistinguishable for those with visual impairments

• Page content should be accurate and up-to-date and free of spelling errors

• Web content should be concise and easy to skim. Using subheadings and lists are encouraged

• All content should follow UMSL's grammar, usage and style guidelines

The UMSL events calendar is hosted on and runs on the Localist platform, a social calendaring application. Any user with a campus-issued UserID can log in and create an account in the calendar. View calendar information and best practices.

Digital Asset Management refers to the hosting, management, organization, cataloguing, archiving and distribution of digital assets - rich media such as photographs, videos, audio files, graphics, logos, and marketing collateral. A digital asset is any form of content or media that has been formatted into a binary source and includes the right to use it (See DMCA policy). 

Digital assets owned by the university must be managed appropriately. The university maintains several repositories of digital assets including repositories that are stored in local (network attached) file storage systems, cloud file storage systems (Google and Box), and within commercially available systems (PhotoShelter). Contact UMSL Information Technology Services to determine the appropriate university repository for your needs.

Specific to the university's web environment, most all digital assets should be uploaded to the university's server(s) via the Content Management Systems (Cascade, WordPress). However, some assets such as video, may be hosted on a third-party platform such as YouTube or Vimeo, provided that the asset is hosted through an official, university-owned and managed account with multiple admins, and not associated with an individual or non-university account.