Training

About Training

Here you will find information and links to training materials, as they become available.

Recorded trainings

+ see more - show less

Training Materials

The following information is supplemental to recorded trainings.

Page Layout Recommendations - April 16, 2020

Basic page items

  • Page titles are being implemented by development and will automatically display in the future, no input needed.
  • Breadcrumbs are being implemented by development to orient the user, no input needed.
  • Table styles will be addressed by development, no adjustment needed. 

Content layout

Intro text

Always enter a brief introductory text that sits directly at top of page. This is valuable for SEO purposes and to create a welcoming, easy experience for the user to understand more about what the page contains.

Example(s):

Headers (H2-H6)

Try to use all the headers available to you, and make sure to work in descending order where the largest / most prominent headers are higher on the page and diminish in size as the user scrolls. 

Example(s):

  • Good use of heading and headers used as text (not ideal) - Order Seedlings 

Lists

When content includes long bulleted lists, consider ways to group or section the list under meaningful headers (alphabetical groupings if possible) and utilize multi-column page layouts.

Example(s):

Text width

When text content fills a page’s full width, the reader is challenged by eye tracking across a wide space. We recommend narrowing the width dedicated to text by adding other visual elements to fill the gap, such as the Link Group, Media, Gallery (slideshow), or Call to Action elementals. This is less of a concern on a page that includes a sidebar menu.

Example(s):

  • The top part of this page uses visual elements to narrow the text space and add interest, but the bottom part is quite wide for the eye to follow across - Bush Honeysuckle

Element usage

Accordions

For lengthy pages, consider accordions to save space and keep the user from being overwhelmed, allowing for them to choose where to drill in further. Accordions should ideally be preceded by a brief introduction.

Example(s):

Component Header

Reserve the Component header style that uses a wide, thin accent line, for single column sections. Ideally these should not be side by side. If you have three side by side that are related to each other, use a single header that can describe all of them.

Example(s):

Links

Use the Link Group or Card elements for groups of links and linked sections to maintain consistency of link style.

Example(s):

Tables

Should be used sparingly as they are not mobile-friendly. They are sometimes appropriate and unavoidable, but wherever you currently have a table, ask yourself if it can use a different format or Element.

Example(s):

  • Tables like this will be styled - Confirmed Mountain Lion Reports
  • This is good place to ask, Is table needed here or could this be replaced with a section titled ‘Mountain Lion Behaviors and Appropriate Responses’ where each behavior is a single accordion, including content within? - Mountain Lion Attacks

Stats Blocks

These elements are not currently being used, but are a good way to enhance page content that is data / stat-related. Maybe a way to replace some table data?

Example(s):

Images

Captions

For images that are not self-explanatory or self-evident, make sure to include a caption. We may revisit the text styling of captions to distinguish them more from body copy text.

Example(s):

With caption, recommended - Bush Honeysuckle Control
Without caption, not recommended - Mountain Lion Tracks

Size on page

A 50% or 33% width image works nicely for augmenting content, and 100% works well for a page intro on Topic pages. Smaller column selections or the Card element is better to use if the image is not high fidelity.

Example(s):

Size in pixels

Many images are being auto migrated and should appear in the image cache. If an image needs to be uploaded, use only high-res versions of the images. If images appear pixelated, replace them with a larger image.

Example(s):

Section Heroes

Reserve the use of the Section Hero component, which is a large image with an orange accent line and the option of overlaid title and descriptive text, for landing pages/gateways to a new section. Instead the Media element behaves very similarly and can be used for small or large imagery as needed, without the added elements of the section hero.

Example(s):

 

+ see more - show less