A method to edit html email templates easily

Question

I'm designing and developing some html email templates for mass mailings. I was asked to provide an easy solution for a non-technical person to edit them safely and easily.

I'm afraid conventional WYSIWYG editors can replace the "old style" code required for e-mail by more "modern style" code, not compatible with some e-mail clients.

I will test the templates in the main mail clients, but it's not practical to ask this to be done every time they edit them. The person would not know how to fix them anyway.

What do you recommend? I thought about building an html generator that would convert the data from a form into source code, but it seems that is a lot of work.

Note: I can not change the email sending provider. (It's Silverpop.)

Answer 1

If all the users will be editing is the content or fairly simple display options, I'd look at using a basic CMS for this. They're not necessarily just for building "sites." With some creative juggling of categories/tagging, you could just have them create a few entries with the same date, then have a "daily archive" that's based on the mailing template which they'd copy/paste from View Source. Even that might be simplified a bit by producing a straight-to-source-code version of the template or somesuch, but there's not enough detail on yours or Silverpop's needs(I've never used them) to say.

Answer 2

I think the HTML generator idea is the best. That's what I thought of before I got to that paragraph when I read your question. How much work it is depends on your programming experience, and if you have access to a webserver inside your organisation. If it weren't for the images then it would be a few lines of script such as (this isn't a real script):

open(file)
write(htmlheader + formheader1 + inbetweenbit + formtext1 + otherinbetweenbit +
formheader2 + inbetweenbit etc.
close(file)

The fiddly bit is uploading the images as I presume that aren't available on your website currently. However you can find various scripts on the internet which show you how to do that in your favourite scripting language. If the users can manage it they could resize them before they upload, or you could just display them at the right size in the HTML (but that takes up extra bandwidth for your recipients). Alternatively you could use Image Magick to do the resizing as it's available for a number of languages.

Answer 3

I would present a strong business case to change email service

Your client says that they can't move away from the current email provider. So give them a good reason to switch! My experience is that, when presented with clear benefits argued delicately, no company is wedded forever to a single service or piece of software.

As such, I suggest that you build a case for moving their email service to MailChimp, which has rich templating features designed to do exactly what you describe:

You create the original template with editable repeating regions. Users with no knowledge of HTML can then add and edit only those regions (and create multiple ones in the case of your seven headers scenario), then send campaigns without worrying about breaking the master template, which is editable only to admin users.

In my opinion, this would be a faster, cheaper, and less stressful solution than attempting to hack together your own templating service that ties in with Silverpop. It may take you 50 hours to build a good templating engine that works around the weaknesses in their existing software, or to hack together a CMS to kind of do what you require. The result would likely be functional, but not as powerful or polished as more mature software like MailChimp.

When a client constructs a set of limitations, it's worth questioning why they exist in the first place, then attempt to break them down or remove them entirely. Often, I've found that the limitations prove to be artificial. When you actively poke and question why they exist, you often find companies stuck using software that's not fit for purpose because 'it's always been that way' or 'that's what Big Dave set up before he moved to Thailand to open a bar'. (Honestly; someone really told me that!)

Show them that MailChimp (or whatever service you're comfortable recommending to them) is cheaper/more productive/better for templating/easier to use/better documented/trusted by The Economist etc. and see what they say. Show them that that's what their competitors are using because it offers x, y, and z. Remind them that a modest change can bring big benefits.

It's our job as Web consultants to put forward the best solutions we can -- the things we would be happy recommending to our friends and comfortable using in our own businesses. Sometimes that simply means telling clients that their preconceptions about their entrenched software being best are wrong.

Answer 4

I agree with @paulmorriss that the HTML generator is going to be your best solution. You can use AJAX for image uploads and give them the option of a live preview of the form. However, all you're going to be doing in the end is recreating what MailChimp offers out of the box - which sucks because it'd be a much more elegant solution. But since you're stuck with this solution, I'd look at using an online rich text editor and reformatting the data that they "send" before it's actually sent. Here's a few jQuery based ones:

jwysiwyg

markitup

htmlbox <- Looks most like MS Word

CLEditor <- Close to MS Word

You'll need to extend these further than what they currently have to both export the html that you want and to allow for image uploading instead of just image linking to a url (if you're going for the best user experience).