Tel: 01865 242425

Tel: 1-855-835-0471

Tel: 1300 993 579

Is what you see really what you get? Coding email templates for WYSIWYG editors

Email design illustration

As an email developer, I have a long harboured love/hate relationship with the ‘What You See Is What You Get’ (WYSIWYG) editor. Whether we like it or not, they’re here to stay, so how can we make them work for us rather than against us? There is no one short fix, but here are some key things to bear in mind that will help you build robust templates.

Why you can’t live with them, or without them

On one hand, WYSIWYG editors are a fantastic way of giving people the ability to edit and create content with no requirement for them to have any coding knowledge.

On the other, they are unpredictable, limited in scope and far too ‘helpful’ with the tags they will add/remove/change. To use them in the best possible way, a much deeper understanding of what the editor is actually doing is needed – which pretty much defeats the point of the editor in the first place!

Understand your editor and its restrictions

Experiment with some basic templates and then use the editor to update the content. Don’t just change some words; add links, remove links, copy and paste from word, add and delete new rows, pictures – whatever the editor will allow you to do, do it. If the preview still looks good then do some full testing on it. You can do it manually, or using a service like Litmus (which powers the MessageFocus Content and Spam Check).

Then take a look at the source code and see how it’s changed: is it still valid? Remember, WYSIWYG editors are trying to be helpful and flexible which means that, once pushed hard, the code is not guaranteed to be perfect at the end. Knowing what you are dealing with will inform how you approach your end build.

Understand the project’s requirements

It sounds simple but working with WYSIWYG editors means an extra layer of planning. Let’s say you are building a newsletter where the content is going to be manually added in every month. It might look something like this:

Common email template layout

If so, what will the end user change on a monthly basis? It’s a given that they will update copy, images and links. But what if they need four stories one month rather than two? Or three or six?

This is a common situation me and my team deal with. Our solution is to provide a master template that covers different scenarios, and includes HTML comments for quicker editing if needed. Then we create lots of variants to use as templates based on end user needs. This diminishes the chances of using the WYSIWYG editor to update the actual layout of the email. Instead, end users can focus on updating the content.

Test it in the end user’s shoes

At this point, you should know the structure of your email template, and you’ve tested it in Litmus within an inch of its life with superb results. You also have a good idea of the types of things the WYSIWYG editor is going to do when you use it. So it’s time for the next step.

Upload the templates into your ESP’s launch system, get hold of some actual content that will be used in the template, and use only the HTML editor to create the finished email campaign.

This will probably highlight a couple of things you need to update in the template but will almost certainly show you some areas that the editor has been ‘overly helpful’ in.

For example, we tend to avoid using <p> tags in our templates (the way different clients interpret these is not conducive to robust and consistent templates). But the editor offers these tags as an option. So showing users how to avoid them creeping into the template, how to identify and remove them using only the editor is a vital piece of information to pass across.

In conclusion

Unfortunately there are no silver bullets. All editors have their own quirks and methods of dealing with content. You need to experiment and test, rinse and repeat until you have a good idea of what’s likely to happen. Then make sure to instruct others on how to avoid common issues.

If you are interested in learning more about how we can help design, build or train you to create beautiful, robust and scalable email templates contact your account manager today.

Tags: ,

  • Jules Antonio

    Hey Robb

    I’m one of those technical-dumb people :), and I had to rebuild from the ground up our company newsletter. I tried and liked an editor named MailStyler: it’s pretty solid and I can get a template to use then elsewhere very very easily. Sooner or later I’ll learn how to get there all by myself, but for the time being I’m good!