You’re done writing the copy for your latest marketing email in Microsoft Word or a Google Doc. Your boss has reviewed it, and you’re getting ready to send.
So you copy…
…then you paste…
From one WYSIWYG editor to another WYSIWYG editor.
Something about your email now looks a little funky, but you go ahead and send a test to yourself.
Those last minute additions you did appear to be in Helvetica. But the rest of the document is in Verdana.
You delete that new addition, but the cursor keeps getting stuck at the beginning of the line. There’s something else going on here. All you see is a bunch of text that doesn’t look quite right. All you can do is make the text bold, italics or underlined.
Your email looks like crap. You don’t know what’s happening. You don’t know how to fix it.
WYSIWYG editors must be one of the leading causes of hair-loss on the internet. Both the developers who created them are pulling out hair with all the buggy edge cases. People like you and me who use WYSIWYG editors are pulling out hair when the WYSIWYG editor does something unexpected.
Websites with a technical audience often want to move away from WYSIWYG, and websites without a technical audience often try to simplify their editor to the point that you can’t screw it up.
I could go on for hours, no, for days, about the pain WYSIWYG has caused, but rather than that I want to show you a way to do better in a world where WYSIWYG exists.
Focus on the words
Like many nerds, rather than typing in Microsoft Word or a Google Doc, I’ve found that writing in Markdown helps me formulate my thoughts better. It helps separate content from presentation. Every article or email that I write starts in Markdown.
For the uninitiated, writing in Markdown is like writing in plain text with some special formatting syntax. Like two stars to
**bold** the text it surrounds.
Markdown converts to HTML in a predictable way. Whether you’re writing for an email or for the web, you can create HTML from Markdown that works the same way every time.
Wysiwyg editors create ugly, unpredictable HTML
As a quick comparison, let’s look at what happens when you copy and paste from a Google Doc:
Ok, let’s copy this bold word:
When pasted in to a WYSIWYG editor, it ends up creating this code in HTML.
The equivalent in Markdown is
**EXAMPLE** which generated
<strong>EXAMPLE</strong> in html.
In Markdown and in HTML, it’s easy as the writer to see what you just did. WYSIWYG editors try to hide the complexity and often create redundant or broken code.
Tools to get started with Markdown
So, now you want to start writing in Markdown. What do you do?
Learn more about Markdown on the official page by its creator.
Start experimenting with Markdown tools. My favorite ways to write in Markdown are:
- Draft (A brand new, hosted markdown editor with some great reviewing tools)
- iAWriter - A Mac, iPad, and iPhone app
- Advanced Sublime Text markdown plugins
How to get from Markdown to an email?
If you’re writing in Markdown, you’re probably going to want to switch to the HTML mode of your email editor and get ready to copy and paste. Gmail doesn’t do this, but Customer.io, Mailchimp and many others do.
For example, if you’re using iA Writer, you can Edit -> Copy as HTML, and paste the pristine HTML right in to your email editor. Draft and Sublime Text as well as almost all other Markdown editors have a way to export to HTML.
Take a look at the code, and at how it looks in the WYSIWYG editor. The amount of code used is MUCH less than our messy example above. The email is smaller in size and will display faster on the recipients screen.
What tools are part of your process?
You can go a little tool crazy. Like people who buy a Moleskine because it’ll help you write like Hemingway – no joke, it will. This is not that. Writing in Markdown will help you focus on your words and not the crazy, unintended things that happen to your words when you use a WYSIWYG editor.
Do you already write in Markdown? Or have another process to share?
Show the world a better way in the comments:
P.S. Are you interested in workflows? Like how to quickly edit and upload images for use in an email, or how we syndicate our email content to the blog at the same time? Let me know if you’d like to know more about how we do things.
P.P.S. A few people emailed in some more things:
- Lauren G. said Editorially looks like it might help with the problem.
- Nathan M. suggested “A good tip to avoid annoying paste issues: ‘paste and match style’ command + shift + v”