Skip to page content

WYSIWYG (editor) and Content Field

Check your work!

Content is visually styled by default, so additional styling code can damage the responsive template functionality, or consistent and professional branding of the website. Make sure you copy content over from Outlook, Word, or another document application by using either

  • copying/pasting into an application that strips the styling (e.g. Notepad) and then pasting into the WYSIWYG editor or
  • using the Paste as Plain Text option inside the WYSIWYG editor.

The editor used in Cascade for providing an almost accurate view of what the content will look like on the actual page, meaning What You See Is What You Get. However, due to the complex nature of responsive design, as well as the numerous features available, this will never be a true representation of the content, and you should always check the Preview of your page before you Publish it.

The Content field provides an area for all kinds of content:

However, not every kind of content is appropriate for any content module. Due to the nature of the variety of content layouts we built, some content must be embedded with approval or assistance from Web Services. Depending on the requested content, Web Services will either embed the content or recommend another option for the requested content:

1 Content in this editor does not turn textual content into a paragraph. This allows you to start, with maybe an unordered list for content instead of assuming you always have a paragraph. If you are only providing one paragraph, press Enter, then press Backspace to remove the empty second paragraph.

2 Images come in two flavors: photography and graphics. Photography is any picture taken by a camera and slightly modified by cropping and resizing to fit correctly in a content module. Graphics can be a combination of photography, artwork, and/or text. Graphics must be made by Web Services. Images can only be embedded directly in the WYSIWYG editor on the old template webpages. Images must comply with accessibility guidelines (e.g. alternative text, color contrast, infographics).

3 Videos will need assistance and approval from Web Services for security, copyright, and accessibility reasons. Videos must comply with accessibility guidelines (e.g. closed captions, transcriptions, flashy animations and visuals).

4 You may edit tabular data currently displayed on your webpage. Tabular data may require assistance from Web Services due to their complexity and common accessibility issues. Depending on the content module, Web Services may determine tables are not appropriate whatsoever and recommend another module for use. 

Styles

Textual content is the most readable content on a webpage. They can be seen by visual users, heard through screen readers by blind and visually impaired users, and felt through Braille readers by blind users. Using proper semantic language first, such as an unordered list instead of a paragraph for a list of items, is essential for a universal understanding of content. However, visual users often need other visual aids to help them perceive emotions, urgency, and importance.

Styles should be used in moderation to keep the information they assist with legible and understandable. Consider this order of operations for determining the use of styles:

  1. Can you fix it by using a particular content module to convey meaning? (e.g. slideshows and photo features stand out more)
  2. Can you fix it by using correct semantic language? (e.g. list items or tabular data instead of paragraphs)
  3. Can you fix it by bolding/italicizing a phrase or keyword convey the importance or emphasis needed?
  4. Can you fix it by rearranging the layout of the content to better convey relevance of the information?
  5. Can you fix it by using a style to convey the purpose better?
    1. instructions: focused importance to a particular set of instructions
    2. warning: more urgency, such as deadlines and risk-related themes
    3. caution: cautionary or advisory
    4. information: informational, providing additional importance to a piece of information
    5. teaser: introductory, providing an overview or summary of what is to follow next

See styles available for the old template. Most of these styles will not transition over to the responsive template.

Web Services can provide content strategy consultation to assist with organization of elements as well as styling on a webpage in order to convey your message in the best possible way.

Paragraph Styles
Heading Styles
List Styles
Table Styles

Exceptions

The WYSIWYG editor allows access to a number of formats that are or will no longer applicable given our transition to the new responsive template or are deemed inaccessible in their usage. The following should not be used:

  • Underline: The style conflicts with the perception of what is a link and is not used in web writing to denote titles or headings.
  • Left, Centered, Right, and Justified Alignment: Text is aligned to the left by default. Other alignments can cause confusion in readability and are removed for accessibility. By not forcing a particular alignment directly on your content, you allow users in other cultures to shift the alignment to what they are used to reading in, such as right alignment.
  • Horizontal Line: Separation of contextual ideas is done with the content modules themselves, via panels, blocks, and other elements. Color can be used in moderation to visually separate ideas. The horizontal line is not part of the style of the responsive template and will be removed.