By: Lori Mann

Let’s face it, we have all had to use a WYSIWYG (What You See Is What You Get) editor at some point in our careers and many of us have a love-hate relationship with them.  If you are not sure what I am talking about, they are those ease-of-use buttons and dropdowns that allow users to change aspects of an email without having to know how to code. Here are a few examples.

Eloqua

Marketo

HubSpot

They may look a bit different, but they all have the same basic edit controls, with each platform having a few additional options specific to their build. For example, Marketo has tokens (I really wish all systems had tokens because they make things so nice to build with), tables and access to HTML for the sections.

Regardless of which platform a company uses, it’s almost certain they employ a WYSIWYG editor for their users.

Most editors have good points like ease of use and basic coding options, some bad points like not applying code correctly, over-writing branding or loss of customization, and some ugly points like code stacking or bloated code and no error checking. Users should be aware of these because what you expect to see is not always what the editor (or published version) displays.  

The Good

The best thing about WYSIWYG editors is the ease of use. WYSIWYG editors make it straightforward for non-coders to make simple edits to emails and landing pages. In fact, that is the whole point of WYSIWYG editors. This is also why many marketing teams are implementing WYSIWYG editors within their CRMs over the good ol’ HTML emails. Because the layout is already built into the templates, marketers don’t have to deal with designing it. What’s more, companies can control the layout, look, and feel of emails and landing pages.

How WYSIWYG Editors Work

After selecting a basic template—either out of the box or custom created for the company, you can populate the general information (From, Reply-to, subject line, pre-header text), and update the email directly on the page, much like you do in Word.

Need to replace the image?

Click on the image, select the new image, and enter any information such as the alt text or a link, if needed. Of course, you’ll still need to upload the image into the system if it isn’t already there. Some WYSIWYG editors even have an upload functionality directly within the editor.

Marketo Image Selection

To update the copy, the Marketer adds or edits the copy by typing or pasting directly into the window without having to locate that bit of copy buried in the HTML file.

That’s it.

Want to bold copy? Highlight the copy and select the bold icon. The code <b></b> is then automatically added to the back end.

Easy peasy right? But wait! There’s more!

Eloqua Text Bolding

The editor provides basic coding options for many common text enhancements like

• Bold
• Italic
• Font family and size
• Text and background color
• And more

You can also align text, add bullets and create links within the editor. Some editors have a hover description of the icons which can be helpful if you’re not familiar with them. If yours doesn’t, it may require a little experimentation to figure out what the non-obvious options allow. No matter what, it’s still easier than digging through code to find the copy and hoping you applied the correct code.

The Bad

Unfortunately, there are a few pain points that occur with all this ease of use. One relates to applying a specific color to links within emails. This can pose a problem with WYSIWYG editors as many WYSIWYG editors do not apply the code correctly resulting in a frustrating two-tone application of color.

Instead of a single step to add the link, color and underline, the platform may require up to three steps that involve adding the link, reselecting the copy to apply the color and then adding the underline. 

While this is not complicated, the A HREF link tag is wrapped with the html codes instead of adding the styles for the color and underline to the A HREF style tag like you might expect. This typically produces text in one color and the underline in the desired color. 

You may need to send a test to see this applied. A word of caution: Do not rely on previews alone. Always test!

Eloqua Link 3 Steps

Eloqua and Hubspot both require the three steps for links, but they also correctly apply the color and underline to the copy. This is a good thing as there is no access to the HTML for editing. 

Marketo Code Duplication

Marketo also requires the above three steps to color a link. However, Marketo doubles up the code upon implementation by wrapping the code with a single SPAN tag and applying the style to the A HREF style tag as can be seen in the image above.

While Marketo does offer an “Advanced” option within the link editor, the user should know the desired 6-digit hex color code and how to apply the color and the underline correctly using CSS.

Please note, when removing a link that has been created using the three steps above, the underline and color code remain and must be removed manually. When using the “Advanced” option to add color and underline, the underline and color are removed when the link is removed.

Marketo Advanced Option

A second pain point with WYSIWYG editors is the ability to override template branding. Basics like fonts, font sizing, colors, bolding and linking are often coded into templates. However, with WYISWYG editors, those items may be overwritten with whatever option the user decides looks good to them, thereby breaking the company-required branding. This can open the company to issues with brand recognition and accessibility, to name a few. Unfortunately, there is not a good way to limit those options for users within the WYSIWYG editor.

Another unexpected and mostly unknown issue that pops up with WYSIWYG editors relates to copying and pasting text from Microsoft Products (Word, PowerPoint, Excel, etc.), which often lead to unexpected results.

Many users have probably experienced this but don’t know why it happens.

The reason behind this issue is Microsoft tries to be helpful when copying text by including any formatting already applied. Unfortunately, when that text is pasted directly into a WYSIWYG editor, it also pastes the formatting into the backend. Below is an example of how code can carry over with a copy and paste. All copy in RED is code that carried over from Microsoft.

Code Paste Examples

There are a few ways to overcome this particular issue.

1. Some systems (Eloqua is one) have an option within the bar that allows users to choose how to paste copy (with or without formatting).
2. Paste the copy into a basic text editor such as Notepad, Notepad++, or any other similar text editor. This removes all formatting from the text. Then copy this text and paste it into the WYSIWYG editor. Note: Word Pad is NOT a text editor as it allows formatting of text.
3. Paste the copy directly into an HTML editor if possible (not possible in Eloqua). This automatically removes all the additional formatting that is hitching a ride with the copy.

The Ugly

One of the worst issues with WYSIWYG editors is the bloated code created or incorrectly applied by the editors themselves. Some editors stack the code creating multiple span tags for each option selected instead of combining the styles into a single style tag and then updating the option when it changes. The biggest culprits of this issue occur when changing fonts and font sizes or pasting multiple sections of text into a single editor window.

In my testing for this post, I discovered that some systems have made the following changes to attempt to correct this issue.

Marketo

Marketo has somewhat corrected this issue and correctly applies multiple basic selections (like bold, italic, color or size) within a single span tag. However, applying a “font-family” style creates a new span tag instead of adding the font style to the current span tag. The addition of a “font-family” style also breaks the single span tag into multiple tags as can be seen below:

Marketo Code Bloat Example

Eloqua

Eloqua has also corrected the multiple span tag issue, but instead applies the code incorrectly. If a bold tag is applied at any time, all additional styles are added to the <strong> tag as a style instead of using a span tag and applying font-weight: bold. While this does work the code is not semantic. If a font-family is added everything is applied within a single span tag style.

Hubspot

HubSpot has corrected this issue as well. However, they double the code within a span tag by applying a style tag and a data-mce-style tag.

Another major issue with WYSIWYG editors is the lack of code verification to confirm that the code is correct, which is likely to negate the issues above. Other times when code verification could be very helpful include when adding a table to an email.

While tables are pretty basic to code, most systems do not provide a table option, which means users have to attempt to code their own tables by hand. Mismatched tags are very typical in this scenario and could also be a great item for a code verification. Hopefully as WYSIWYG editors become more advanced, they’ll get a code verification piece.

After it is all said and done, just about every marketer uses WYSIWYG editors at some point. I expect even wider adoption because more and more marketers don’t want to learn the basic code and WYSIWYG editors make the job easier. However, if more marketers know the good, the bad and the ugly with editors they can overcome the issues that occur and fix any problems they run into—or at least point them in the right direction.

With that in mind here are some articles around the coding to accomplish those basic tasks that WYSIWYG editors take over.

• How to Bold, Italicize & Format Text in HTML https://blog.hubspot.com/website/how-to-bold-in-html
• How to Add & Change Background Color in HTML https://blog.hubspot.com/website/change-background-color-html
• How to Create the Copyright Symbol in HTML https://blog.hubspot.com/website/html-code-copyright
• HTML Mailto: How to Use It https://blog.hubspot.com/website/html-mailto
• CSS Margin vs. Padding: What's the Difference? https://blog.hubspot.com/website/css-margin-vs-padding
• 11 Ways to Center Div or Text in Div in CSS https://blog.hubspot.com/website/center-div-css
• Your Guide to the CSS Line Height Property https://blog.hubspot.com/website/css-line-height
• How to Create and Style Borders in CSS https://blog.hubspot.com/website/css-border

BDO Digital’s team of email marketing professionals is focused on providing consulting support to clients in a wide variety of industries. To learn some of the ways we can support your team, contact us today!