Web editors — also known as WYSIWYG editors or content editors — are ubiquitous in web design and marketing tools, like Wordpress, Joomla, Constant Contact or MailChimp.
WYSIWYG (What You See Is What You Get) editors are the most often used admin feature by website CMS users and email marketers. These visual editing windows allow users to create and format content in a view similar to that in Microsoft Word. The WYSIWYG editor is easy-to-use and becomes a powerful tool for populating emails and developing websites, without having to rely on HTML coding knowledge.
Despite the ease of use of content editors, users can still run into hiccups — here are some tips to avoid common issues.
Paste Content as Plain Text
WYSIWYG editors will often retain the style of the text when pasting content from another webpage, Word or other formatted source. Sometimes, this formatting cannot be changed and/or undesirable HTML is populated to the code.
- To paste the text without formatting, many editors offer a ‘paste as plain text’ option.
- Or, use a plain text editor like Notepad as a middleman (copy the text to your notepad, then cut and paste into the editor.)
- This creates text with clean code, ready to format within the editing window.
Single Space and Double Space
Adjusting line breaks or creating new paragraphs can be frustrating in WYSIWYG editors.
- Pressing the Enter key will generally create a new paragraph with double line spacing.
- By pressing the Shift and Enter keys at the same time, you can create a single space, also called a soft return, a line break or a <br /> tag.
Inline vs. Block Styles
Understanding how a treatment will behave will help you when troubleshooting your content’s presentation.
- Inline elements (bold, underline, italic or hyperlinks) can apply font treatments to a single word.
- However, some types of formatting (e.g. bullets, headings and alignment) fill their entire “block” — they apply to a complete line of text, an entire paragraph or full parent area.
- To begin a fresh block, use the Enter key.
Use Styling When Possible
While selecting a 10pt font size may look nice on your screen, it may appear differently on another device. Using pre-populated font styles, a.k.a. paragraph or CSS styles, that are formatted to match the look of your website will help overcome design inconsistencies.
- Font styles are generally available as a dropdown list in your content editor's toolbar (ex: Heading1 or Paragraph).
- Use font styles to keep your text mobile optimized and responsive, as well as ensure brand conformity across publications.
Size Images Before Upload
Many WYSIWYG editors allow a variety of helpful image formatting options within the content box — proportional photo resizing, image alignment, adding captions, enhancing with borders, and more.
One of the most common errors is uploading large images and using the editor to make them appear small. However, this approach can retain a large file size that creates lags in load time and can negatively impact your SEO efforts.
- Upload images to the editor that are already web optimized, reduced in size and have the proper format (jpg, png, gif, etc.)
Limit the Number of Clones
Cloning an existing web page, template or previously sent email can save time, but if you clone too many times junky HTML can stack up in the background and corrupt your new publication.
- If you’re noticing problems, try creating your email or web page using a new template rather than copying or cloning a past publication.
Test, and Test Again
In some web and emarketing platforms, the preview modes provide a fairly accurate depiction of the finished product.
- Previews will showcase text formatting, alignment and how the recipient will view a publication overall.
- Some platforms also have preview modules to view your email or webpage on a variety of devices.
- It’s a good practice to send an email test to yourself and/or open the new page in your web browser to see exactly what your new content will look like before sending or publishing.
A good marketing partner can assist you with tips and tricks as you learn to create publications in WYSIWYG editors. At Greenleaf Media, we provide full step-by-step training as part of the web development process.
If you’re interested in more information on email marketing, web design, CMS websites or working in content editors, reach out to the team at Greenleaf Media. We’re here to help.