Search code examples
phphtmlckeditorwysiwygmailing-list

Best WYSIWYG editor for mailing (or best way to use.. for mailing)


for one of my customers I've been developing a mailsystem for his clients. His clients have been collecting e-mailaddresses in their stores and want to start using these for mailings once in a while.

I'm aware of all possible things that can go wrong, but as far as I can see we've got it pretty much covered the best way we can. We're using SMTP (Authenticated) to send the e-mails to the customers, e-mails are signed serverside, we're splitting up the mails with a max of 25 per 5 minutes, sending headers to optout location, etc. I can imaging this is just the tip of the iceberg concerning all things I have to take care off.. but I warned my customer that he might be better of using an existing app like MailChimp but he insisted on doing it ourselfs.

After the development of our beta version was done, we've ran some tests and all things went pretty well in fact. Haven't had any spamfolder problems, all mails are good to read in the different clients, and so on.

However, one thing is being a little hard right now.. the editor! We're creating templates for our clients (1 template, 6 styles). Our clients can load these into their editor and edit the text inside. As far as we (and the client) can see, everything goes pretty good, however - the editor does not create e-mail friendly HTML code (I should have known...)

I've searched the net for some articles/how-to's but there's really less to find about this.

Currently we're using CKEditor (Editor) and KCFinder (Image Plugin). As far as I know, CKEditor is the best free WYSIWYG available... but is it any good for e-mail editing?

I noticed some companies use a custom editor (MailChimp) others used TinyMCE (Enormail.eu).

Anyone has a good recommendation? Or is CKeditor the best option, but do I need to modify some of the settings to get the best possible html code for mailings?

Thanks in advance!


Solution

  • I have done a little research about it, because I'm interested in using CKEditor for E-Mail-based editing too.

    Generally, CKEditor is the best WYSIWYG web editor, but you have to use some techniques that are not used usually in HTML pages.

    Since your'e using templates (I guess CKEdtior's config.templates) most of your optimization will be in your templates, and not no configuration of CKEditor.

    These are the main goals:

    • Don't use the <style> tag - instead, use inline styles (the style attribute). Some webmail readers does not read this tag.

    • Do not use config.fullPage = true; since some readers does not read the <body> tag.

    • Instead of using <body>, <div>, and other tags used for layout, use tables. Yes, this technique is old, but by doing this you can make sure that (almost) all readers will render the page correctly. Instead of applying styles to the <body> tag, use these style to the main <table> tag.

    • Don't use absolute positioning. Tables can also take part in the solution.

    • For all images - Insert the alt attribute, and for all width and height optimizations, don't use CSS-based width and height. I mean - Instead of <img style="width: 100px;" /> use <img width="100px" />.

    In addition, one of the important things, is to customize and optimize output formatting. I personally change at least breakAfterOpen : true inside writer.setRules('p').

    CKEditor is the most popular WYSIWYG web-based HTML editor, and I guess there is no other web-based editor for Email.

    One more thing that I can think of, is that after your client is finished writing his message, there will be an option for him to preview the message in some popular mail clients. There are many Email testing and preview tools out there, but unfortunately I didn't find anything free.

    I really hope that it helped someone!