Judi Sohn

Reinventing myself one crisis at a time.

My dream HTML email editor…does it exist?

One of the things I have to do for my job at C3 on a regular basis is produce our monthly e-newsletter. Contrary to what the bloggers want you to believe, email is not dead. Way more folks subscribe to C3’s content via email as compared to Facebook, Twitter and RSS feeds combined. By a very wide margin.

It took a while, but I finally have a template that seems to be working well for us:

enewsletter-1.png

I’ve tested the template in Outlook (2003 and 2007), Gmail, AOL, Yahoo and Apple Mail and it looks just like the screen shot above, or close enough.

We use Convio for our email marketing, and unfortunately their email WYSIWYG editor…well…sucks. For starters, it only works in Internet Explorer. It’s difficult to tweak, the default styles don’t work well for email, and the preview window often doesn’t reflect what the email will look like in the client.

Like many, I build my emails in a separate HTML editor (usually Dreamweaver CS4 because it’s the only editor I have with a decent live preview), copy/paste the code into Convio’s window, add any needed conditionals (personalization and the like), send out tests to see what the email really looks like in an email application, note what’s wrong…rinse, repeat.

Designing an email that looks good requires you to throw out everything you may know about modern web design. Go back to nested tables (but not too many…you have to keep the code light and not get bounced as spam if there’s not enough content vs. code) and only use inline CSS styles.

There are HTML editors of all different shapes and sizes. What I want is an application that has the look & feel of Panic’s Coda, but is specifically designed for email. So in a perfect world it should:

  • Work easily with HTML tables and only nest tables as much as is absolutely necessary, keeping the code as clean and small as possible.
  • Default to inserting inline CSS, allowing you to save styles or email-friendly code snippets for later use. So if you have a line of text and select “bold blue headline” the software would automatically throw in something like <h2 style=”font-style:bold;color:blue;”>Line of text</h2> around the line of text. I’d want it to still respect the cascade, so if I put the same styles in the <td> tag that contains the <h2>, the software should automatically remove the redundant style from the <h2> tag. Less code the better.
  • Automatically insert images with absolute links, uploading as needed (http://domain.com/images/location instead of ../images/location)
  • This is key: preview for the leading email clients. Select “View in Outlook 2007” would simulate what the email would look like in Outlook 2007 without actually loading the email application. I’ve been using Campaign Monitor to test new templates, but there’s a small per-test cost and it’s time consuming. At $5 per test, I certainly don’t want to do multiple tests on every email we send out, although I know I probably should. Otherwise, it’s a royal pain to load 5 different windows and 3 different applications to test emails.

In other words, I need a HTML editor that’s smart enough to be dumb when it needs to be. 😉

Judi Sohn

←
→

13 responses to “My dream HTML email editor…does it exist?”

  1. We’ve signed up for Litmus, which does a very nice job of rendering screen shots from a bunch of different web and desktop clients. It’s a little tricky with Vertical Response because VR sends out two test mails, text and HTML, when you test. So sometimes the text one arrives at the test address second, and that’s obviously a pain, as it only shows you the last message received. You can also upload your HTML directly. It’s a little pricey for an individual organization for ongoing use, but if you’re refining a template on an occasional basis, it’s not too bad. MailChimp has a similar tool, but it looks like you have to be building the e-mail in their system in order to use it.

  2. Thanks, Thomas. That looks very similar to the Campaign Monitor solution we were using, except it’s nice that I don’t have to directly upload the HTML. I may try the free version on our next email to at least get Outlook 2003 testing in. Would love if the free one tested Outlook 2007 as well, as there were huge changes between 2003 and 2007, as you probably know.

    BTW, I’m considering implementing VR for some smaller-scale emails directly from Salesforce. Sometimes doing it all through Convio can be more trouble than its worth.

  3. Email newsletters are a real treat to design… especially since standards are pretty much non-existent. Some tips:

    1. Use only tables

    2. No background images

    3. Inline CSS only

    4. Everything before the tag and after is usually useless

    5. And, make the code super clean

    Here are some useful resources:

    http://www.email-standards.org/

    http://code.dunae.ca/premailer.web/

    for the adventurous:

    http://css-tricks.com/sending-nice-html-email-with-php/

    Please let me know if any genius creates that perfect email html editor you described!!

    Thanks

  4. Hi Judi! Are you aware that this blog entry is the number one (unpaid) result when Googling “HTML email editor”? Surprising, considering that your post is close to 3 years old now. And a little depressing, maybe, because my guess is that you still haven’t found your dream editor. I’m looking, too. I’ve used iContact for about 3 years almost on a daily basis, and it’s a pain in the rear. Nowadays, I have a pretty good stock of templates that I’ve cleaned up to the nth degree so that they display well in all the major email clients. But when I get a new layout from our graphic designer, it’s like starting from scratch to make sure the HTML doesn’t hold any surprises. Even if you haven’t found your dream editor, have you found any tools that work better than what you had 3 years ago? Thanks for posting!

    • Wow, I had absolutely no idea that my post ranked so high. And no, I’m not in any better shape now than 3 years ago. Sad, huh?

  6. Wow. I wonder how many people are out there looking for a brilliant solution to this problem? If this post is the #1 hit, and I’m leaving a comment only a couple days after the last one, there’s gotta’ be a market opening here…

    Hey software designers! We’re here! Please help us! We pay money! Really, we do!

  9. my company is and ESP and we are looking at revamping our editor significantly and all things above are exactly what we hope to do…with time and resources. I would recommend trying inline styling tools like premailer or mailchimp has one as well. I’ve been alerted to MailRox which has been handy. Email on Acid has been great for testing. But what I’m really hoping is that the email clients catch up to wbesites and we can have one set of standards! (and have you tried responsive design for mobile? gets trickier still.) Good luck all.

  11. I am looking for the same thing!, I guess nobody has worked in a plugin for the existing “free” editors. I’ll keep checking this post to see if anyone finds something.
    Thanks