This article pertains to guidelines that should be followed when updating or adding content using the text editor in various products to make sure your content looks professional.
General Guidelines
A What You See Is What You Get (WYSIWYG) editor is a utility built in to many Content Management Systems (CMS) such as ChamberMaster/MemberZone, GrowthZone, SmartCMS or GZCMS to edit and publish rich text. They replicate familiar editing utilities such as those that are found in email clients and word processors such as Microsoft Word. One thing to note is that the appearance of the output of a rich text editor depends largely on the styles built in to the websites or emails where they are published. What you see in the rich text editor will often differ from what displays on your website due to these styles. This is expected but can create confusion if the expectations are to see the same exact output that you see in the editor when publishing content to your website so this should be kept in mind when using the editor to publish content.
Formatting text in the WYSIWYG Editor
Main/Body Text
- Use the “Paragraph” setting (under the format drop-down menu)
- Applies the correct font, color, and line spacing automatically based upon the the preset styles built in to your CMS.
- When possible, apply style formatting once the article is complete. This keeps the underlying HTML clean as opposed to applying styles as you are adding content.
- Designate font names and font sizes sparingly. The styles in your CMS already has built-in font specifications for text unless otherwise overridden by the styles you specify in the editor. Less is more and this will keep your site looking clean!
- Do not copy and paste text from Microsoft Word without using the "Paste From Word" option in the editor.
- Do not copy and paste content from a website into the editor without using the "Paste As Plain Text" option.
Text Alignment
- Default/automatic setting is left-justified
- Use centered and right-aligned text very sparingly
- Avoid full justification of text.
Headings
- Use Headings to help break up text into sections and increase readability.
- Use the heading settings under the format drop-down menu when applying titles to subsections. This will revert to the preset styles built in to your CMS keeping the styling uniform to your website.
- Start with Heading 2
- Page titles are automatically formatted as Heading 1
- Do not use additional Heading 1 tags on the page
- Multiple instances of the other heading tags are okay.
- Use heading tags in numerical order on the page
- H2 should be used first since the page title already utilizes the H1. Any subsections should use the H3 tag.
- Try not to skip heading levels, e.g., placing an H1 then skipping to H3.
- Use the H4 and additional tags sparingly.
Tables
- Used for displaying text in columns
- Use percentages for column widths as opposed to using pixels. Pixels will break the responsiveness of the table and you will find that your content may overlap other content on the website.
Images
- Use percentages for setting image widths to keep your content responsive. Use the same percentage for both the height and width of the image to retain the aspect ratio of the image, e.g., 100% x 100%, 50% x 50%, etc. This prevents image overlap into other content on smaller screens and devices.
- Add alt text whenever possible.
Line Breaks
WYSIWYG editors typically create what is known as an HTML <p> (paragraph) tag when selecting the ENTER key on your keyboard. These are signified by what looks like two lines in the editor's text area and are interpreted by the HTML on your website as a paragraph.
If you are aiming to create a line right below the first line, try using Ctrl+Enter (or Command+Enter in OSX) to insert a single line break. This creates what is known as an HTML <br /> tag which is interpreted on your website as a "line break".