Visual Element
Best Practices
Overview
Visual element is an optional slot at the top of a web page similar to the feature area, except that the visual element can be used with left-navigation pages. Also, whereas the feature area is inserted into individual pages, the visual element can be inserted into multiples pages easily with an SSI. This makes it an ideal content element for “sub-branding” sections of content.
The picture above shows the use of a visual element for indicating the target audience for a content page (public health scientists). Another site section might be for public health policy makers, etc.
The example page uses a responsive image for the visual element so that the embedded text and icon are not too small for mobile users. In spite of its name, the visual element can contain just text and can be created with a Visual Composer module or a basic image.
- tools iconBuilding in the WCMS [PDF, 1.2 MB]See tips and guidelines on working with visual elements in the WCMS.
- alert iconResponsive ImageWhen embedding text in a visual element, use the responsive image.
- photo iconTP4 UX Best Practices ppt icon[PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Usage
Typically the visual element is used to “sub-brand” sections of pages or subsites based on general topic or target audience. It can also be used to add visual interest to pages (such as a pattern or texture), particularly for text-heavy pages like reports.
Do not use as a replacement for the page title or as a site identity logo. For site identity, create a site identity image for the site title bar. (Note that site identity images must be approved. Submit a ticket to WCMS / Template Support to start the approval process.)
Guidelines
- Make certain the visual element doesn’t overwhelm the page. Keep it simple.
- Consider using a responsive image, particularly when using an image with embedded text. See the example page.
- Preview in all viewports.
- When applying the same visual element to both regular pages and wide pages (pages without a left navigation menu), make certain it works for both. You may need to create a custom version of the visual element SSI to handle one or the other.