Rich Content Editor (for Dynamic Topic Microsites)- Best practices and tips

[Pooja_Patil]

With the November 2022 Employee Center Pro (Version 27.0.2) , organizations can create rich experiences, using the new Rich Content Widget, on their Employee Center portal to better inform and engage employees. The Rich Content Widget is pre-placed on the Employee Center Topic pages, to create Topic Microsites, and can be placed in any other portal page too. Content admins and content managers can create the rich experiences using a new Rich Content Editor (RCE), which comes with in-built components that can be dragged and dropped on the canvas to build content. Note: this functionality is backwards compatible with Rome and later family releases. 

The Rich Content Editor provides a powerful tool for creating responsive content with an option to preview the content in desktop/tablet/mobile mode. Content creators can create a new layout, add components (containers, images, videos, and links) and adjust the settings of the components with little or no HTML or CSS knowledge.

The Rich Content Editor allows non-technical users to build sections of pages without the help of IT or technical users.

You can do a lot with RCE, but to create the optimal experience we recommend you keep the following best practices in mind when creating content: 

1. Build responsive content - Employee Center is designed to be responsive to various screen sizes and resolutions. To ensure similar responsiveness with the Rich Content published on Topic Microsites, the content authors must follow the below guidelines: 

• Use % width/height over px so the final content is responsive on any device. This is especially important when it comes to images, videos etc.
• Use the preview feature to test the responsiveness of the content inside the widget across different portal viewports/resolutions.
• Minimize the number of nested components to keep the content easy to manage

2. Ensure accessibility support - ServiceNow is focused on accessibility support across all its products. The content produced by the editor supports keyboard navigation and screen reader and is WCAG 2.1 Compliant, but the content creators will need to add certain input to achieve context specific accessibility support, such as

• Provide alt text in the properties to describe the images used in the content. If image is not used to describe the content, avoid adding alt text. For more tips on alt text see Choosing appropriate alt text 
• Provide title in the properties for video component so that the screen reader will announce the video embedded inside an iframe
• Consider color contrasts when designing content, especially if you are planning to customize colors for the component. For more tips see Contrast between foreground and background

3. Be consistent with the Theme support - The Rich Content Editor loads default portal theme and applies it to the content. Content Admins could change the portal theme style that loads in the editor by updating the property Portal Preview (refer  Portal Preview (sn_cd.preview.portal_url_suffix). They must however be careful to not veer too far away from the portal theme, to avoid creating a jarring experience for users. 

4. Be careful while copy pasting content - When using text or text section, avoid using copy pasting content directly to the canvas. First paste the text in notepad as a plain text and then copy paste the plain text on the canvas. This will avoid any copy paste errors or formatting issues. 

To learn more, check out this step by step guide that shows one of the cool use cases - Card Layout with RCE 

Please refer our product documentation for more details -  Employee Center Rich Content  

There are multiple enhancements in the pipeline to improve usability and provide more in-built components to make creating beautiful content even easier. Please comment below for any additional feedback/suggestions.