Media Intent and Usage
Imagery and media provide visual interest to a website and enhance content that is otherwise mostly text. Media can be placed on pages to augment other content, they help convey messages or ideas, and contribute to a warm, engaging feel of a site.
The media element can be placed according to the discretion of the content manager. It is recommended that they be used to break up text that would otherwise be full-width. Examples are shown below.
Media Design Guidelines
- Media elements have minimal design applied to them. There is no navigation or accent applied automatically.
- When images are placed on the site by a content administrator, they generally display with whatever aspect ratio the image files use.
- Use high-fidelity images and videos only.
- Where possible, pull the desired image from the media library of your CMS to avoid uploading duplicate images to the database.
- Edit images outside the system, prior to upload, if they have an unusual aspect ratio or layout, as the site will present them as-is.
Media Editorial Guidelines
- Apply meta tags when uploading new images.
- Include descriptive titles and labels for instructional and interactive content.
- Supply audio with a transcript, and video with captioning for hearing impaired users.
- Don't use images text in images to avoid readability issues.
Media Examples
Single-column Example
Two-column examples
Two-column 33/66 example
The example below shows a two-column section specified as 33/66% layout. In the smaller section on the left, a media element has been added. On the larger section to the right, a text element has been added. Because eye tracking of full-width text can be laborious for the user, this is a valuable way to make the window for text narrower while bringing visual interest.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.