A long time ago, I created an HTML email and all I remember was it was an unpleasant experience. If you are new to this, the problem is that there are many email clients and not much standardization on how they render HTML.
Recently my wife asked me to make a responsive, HTML email. She provided me with a design. In the hope that things had gotten better since my last attempts, I dove in.
My first inclination was to find an existing template and modify that. I found some drag and drop builders online. I do not recall which ones I tried. But none were flexible enough for my needs.
Next I tried some specialized markup languages. I wanted to try MJML, but could not get it to run on my Ubuntu 14.04 box. That seemed like a bad omen, so I moved on to Foundation (Zurb) for Email. The CSS version that I used involved using nested tables that were several layers deep. Not the most pleasant, but it worked well in my HTML editor and I could view the results in a browser. Eventually I got a markup that I liked. Time to view it in some email clients.
My approach was to send it to myself and make sure it works in the clients I used. There are services for testing in many clients (e.g. Litmus), but there was no budget for this, so back to testing in my clients.
You would think sending the email would be easy. Open your favorite email client, switch to HTML mode, copy, paste and send. Not so fast. Gmail, Yahoo and Thunderbird do not allow this. There are some hacks to try to get around this, but they were too hacky for me.
What to do? Django has send-mail. Turns out that’s the answer. I have several Django sites. I just put a form on one of them to get the email data and was able to send it. As-is Django wants you to send a plain text version of your email along with the HTML version. This post shows how to get around that requirement. I should also mention that the email had a few images in it. I used the Django site to serve those as well.
And now for the moment we (I) have been waiting for; what does the email look like in the clients… Not great. To start off, I was testing it in Gmail and Yahoo. The really frustrating part was I could get it looking great in one, but it would break in the other. This seemed like a very bad sign. I would have been more comfortable if the results were more similar between clients. Time to move on.
Back to MJML. Following this post, I was able to get it working. I like the MJML markup language much better. It’s simple and the docs are pretty good. There also are some sample templates to learn from. One annoyance was my editor; MJML is not much like HTML. However, when I switched to XML mode, things worked pretty well.
The other annoyance is the time it takes to run mjml, copy and paste the results, send the email and open it in the clients. Luckily the folks who developed MJML provided a web-based editor/renderer that renders the email as you type! This is a great feature.
One way MJML differs from Zurb is how it makes an email responsive. With Zurb, you can use classes to tell the renderer how to render an element based on screen size. Currently MJML does not give you that control. However, it can be accomplished with media queries (e.g. the style sheet used depends on the size of the device). A straight forward way of implementing this is not currently available, but is promised to be in version 3.3.
The last issue I encountered involved inserting a YouTube video into the email. According to the MJML developers, too many email clients do not support video, so MJML does not either. As a work around, I used a screen capture of the first frame and linked it to the video.