Last week’s ShopTalk Show was all about HTML Email. It’s such a fascinating subject, as technically it is front-end web development, but it almost feels like a bizarro alternate universe.
We have dozens of browsers to worry about, they have hundreds of clients to consider. We worry about whether fancy new APIs are supported, they worry about whether padding is supported. We have grid layout, they have…. grid layout?!
It’s tempting to make the joke: “It’s coding like it’s 1999!”, but as we talk about in this episode, that’s not really true.
Aside from all that, another thing I thing fascinating are all the tools involved. Lemme think this out.
Creation Tools: Bare Metal
You can create an email with just HTML. I’m sure quite a lot of HTML email is created this way. Open code editor, create HTML email, send HTML email. I know I’m tempted by this and go this route a lot, especially when creating an important one-off email.
Check out Really Good Emails on CodePen, where they have archived loads of the full HTML of sent email campaigns.
The builder tool in Litmus is also a bare metal editor. You see and edit the entire HTML document.
Creation Tools: HTML Templates
It’s still creating by hand and hand-authoring HTML, but you can reach for HTML email templates. This is probably a very good route for most us, because of how tricky HTML email can be to get right. Fortunately, a lot of the hard work of figuring out nice and simple email templates with functional layout and type has already been done.
- Lee Monroe offers a Really Simple Responsive HTML Email Template and sells a pack of more templates.
- Cerberus: “A few simple, but solid patterns for responsive HTML emails.”
- MailChimp has Email Blueprints on GitHub. They haven’t been touched in 3 years though, and I’m not sure if that means they are missing any new/big/important techniques in HTML email development or not.
- TABLE TR TD has a build template.
- If you cough up your email to 99 designs, it looks like they will send you some.
Creation Tools: Abstracted Templates
Creating an email by directly working with one big giant gnarly piece of HTML is certainly possible, but front-end developers hardly ever work that way. One of the first abstractions we always reach for is abstracting HTML into parts. You can do that with email.
- You could use your own server-side partials to break up the HTML into parts, so that making new emails can re-use those parts and they are quicker to build and easier to maintain.
- Dan Denney has a system called eMMail that uses Middleman, Haml, and Sass to abstract the emails into manageable parts.
- Lee Monroe has a Grunt Email Design Workflow which is Handlebars/Assemble and Sass to piece emails together.
- Foundation Emails uses an abstracted HTML language called Inky which compiles into HTML ready for email.
- MJML is also a an abstracted HTML language designed to be preprocessed into HTML for email.
UI Builder and Sending Tools
Rather than touching code at all, you could design and write an email directly through a tool built for that. These choices are probably pretty obvious to most folks, as there is huge demand for this. Rightly so! Tools like these let you get right to writing and designing the email without getting distracted by tools.
It’s just not always possible to use tools like this for all the emails you send. They are usually cost prohibitive for really giant email lists, and not really built for transactional email.
These tools tend to tie together the visual building of the email along with sending and analytics. Everything in one.
Sendwithus is a little different. It is built for transactional email, and gives you a system for building and templating emails, but doesn’t send them directly itself (despite the name). You bring-your-own email sending service. Speaking of which…
Sending Tools: APIs
These services actually send the email for you. You hit their API with the email itself, the subject line, the recipients, and whatever else they need and it sends the email. Here’s a non-comprehensive list:
Analytics is usually a feature that comes with these tools that do the sending. That’s true of these email APIs along with the build-and-send apps.
Inlining CSS tools
I always assumed this was absolutely 100% required for HTML emails, but it isn’t really. Most email clients support a
<style> block in the
<head>. That means you can ship CSS without having to inline it. Even when that is supported though, you need to think about which features are supported. Like just because a style block is supported, it doesn’t mean
Even that red mark above is out of date, as Gmail does support style blocks now. So inlining CSS might be going away ultimately, but I imagine there are some email clients that still need it, and if it’s part of a build process anyway, I guess it can’t hurt.
Copy and paste in-browser tools:
- You could send yourself an email and look at it. Probably best to spin up as many email clients as you possibly can, across different operating systems and devices.
- Litmus is the biggest player in this area. Many other tools that offer previews of your email are actually Litmus doing that work.
- Email on Acid is a similar tool and a bit less expensive.
I’m using Foundation for Emails and, personally, I found it the best complete tool (at the moment). In the meantime I would like to add, into the gulp file, the testing by Litmus or Acid. In any case the very difference is if you use a MAT or not and you have some contrictions with it
This is awesome, thanks for sharing. Another tool deserves to be mentioned here is https://beefree.io/ you can create easy and beautiful HTML responsive templates and export them to MailChimp and others.
hey dude – we’ve been building a tool that sits in the sort of ui builder/abstracted template area (as this is the bit of the process that seems the most “broken”). It’s at taxiforemail.com, would love to show you more if you get a sec
One nice little service we also use along with MJML is Image-Charts ( https://image-charts.com ). I’ve found it pretty useful for embedding animated charts into emails :)
Wow this is great stuff. Thank you!
Thanks Chris! Glad I caught this on Twitter. Now I can head into OmniFocus and check off “Learn how to code an Email Template.”
Hey Chris, the red mark on the comparability chart is correct, you can’t have Style blocks in the Body. They work in the Head like normal, but gmail will strip out any Style block not in the Head. This entire issue is not related to inclining though, and is something that will probably not come up often.
It is worth noting that for POP/IMAP versions of gmail, CSS still needs to be inlined.
More info here: https://litmus.com/blog/everything-gmail-rendering-webinar-recording-qa
Great article. Good exposure for the email devs out there!!
Helpful article, Chris! These are some great resources! One handy email building app you missed on your lists was CoffeeCup Responsive Email Designer. I’m a non-coder and am able to use it every week to create my companies newsletters. I like that it lets you design conditionally for outlook, so I can make sure those readers still get a nice looking message while still being able to be creative for friendlier email clients. https://www.coffeecup.com/email-designer/
Worth mentioning ElasticEmail with the sending tools.
I had to check the prices of everything I could find recently and they came out the cheapest, even when adding a dedicated IP.
Thank you for sharing this. I’ve been looking for an email client just like this with an affordable dedicated IP. Thank you!
I think you can consider this tool : http://edmdesigner.com/ The interface looks old, but it’s the best wysiwyg app to create a highly compatible responsive email template. The gain of time is really considerable.
It’s interesting to read of the mighty struggle web developers have writing HTML nowadays. After 13 years of doing it myself, I wasn’t aware.
Last year I found MailStyler and use it lot. They emailed me that they released version 2 the other week, and it’s a big update. I’m using the free version and enjoying it: http://www.newslettercreator.com
Those of you on a Mac also need to check out the app we’re building – Mail Designer Pro – a native Mac app for creating newsletters (think Sketch for emails).
Great roundup of resources, and thanks for the AWeber mention! We’ve been experimenting a lot with MJML over here and have made some fun stuff with it. Case in point: Pets of AWeber
Keep on keepin’ on and doing rad stuff.
Worth adding Pure360, Intercom and Sensorpro to the email tools for the UK folks -we like their new designer a lot and good tech support.
Don’t forget Mail Hog!
Someone who works for this product sent me an email.