WYSIWYG

An acronym for “what you see is what you get”, a WYSIWYG editor is a component that allows you to populate, edit, and format content in a format closely resembling the final layout of the rendered text. It has a number of built-in markup options and a familiar interface—allowing for significant flexibility, including special content types and layouts.

The WYSIWYG editor is capable of styling headlines and paragraphs and allows you to add links, bulleted and numbered lists, tables, block quotes, inline images, and more.

The WYSIWYG block is often the first building block in the content region of a page, but it doesn’t have to be. It’s possible to have more than one WYSIWYG block per page which makes it possible to break up long stories or passages into two or more content areas with other more visual content blocks in between. A varied content layout is easier for your readers to scan and parse.

Within the body of the page, use a progressive disclosure writing style and a clear header hierarchy—focusing on clear, easy to scan and comprehend content, broken up my meaningful headlines.

• Try to limit header use to H2 and H3 styles within the WYSIWYG and take advantage of lists, where appropriate. 
• Limit headlines to 10 words—make sure they clearly communicate content substance and hierarchy.
• Do not use long paragraphs of text—try to limit to three to four sentences.
• Use tables sparingly and only for the content that warrants it. Consider how this content will render on mobile or other smaller viewpoints.
• If embedding images, ensure they are sized properly, optimized for the web, and have alt tags appended.
• Use the dedicated media gallery component for videos and images instead of embedding directly within the WYSIWYG.