Email Development
The Top Email Frameworks for DIY Development
Email Development
If you’re producing a large number of email templates, making frequent layout changes, using responsive design, working with a team of other developers, or creating emails at the direction of a design team, coding by hand is going to be difficult to sustain.
What if there were a faster, more streamlined way of coding emails? What if there were languages that already understood some of the intricacies of email development? Thankfully, responsive email frameworks exist and are just the tool developers need to make DIY email development more efficient (and enjoyable).
Responsive email frameworks can be as simple as a collection of HTML and CSS boilerplate templates or a complex application that uses programmatic methods (like Node.js).
The purpose of email frameworks is to take on all the heavy lifting of the email development process. They include up-to-date workarounds for tricky email clients, display considerations for different devices and browsers, and responsive HTML tailored specifically to email.
Email frameworks either already include code or output code from a custom markup language that accounts for all the peculiar display situations an email might encounter. By relying on a responsive email framework to assist you with the development process, you can:
Depending on your needs, there are quite a few responsive email frameworks to choose from. Below are several great options:
Mailjet Markup Language (MJML) is both an open source markup language and transpiling engine built with ReactJS. MJML provides developers with simplified code for building email templates using their <mj-*>-style markup. Instead of coding your own lengthy nested tables and writing out all the client-specific CSS, you can use simple tags like such as <mj-section> and <mj-column> and MJML will translate it into the correct responsive HTML and inlined CSS.
MJML was originally developed by Sinch Mailjet to generate HTML for responsive emails in Mailjet’s drag-and-drop email campaign builder, Passport. However, the team at Mailjet realized that their system could be incredibly useful to other email developers who were tired of wrestling with the complexities of responsive email design. In 2016, they released it as an independent and open-source framework under the MIT license.
Get some basic advice on how to use MJML in a recent episode of Notes from the Dev: Video Edition with Megan Boshuyzen and special guest Nicole Hickman.
Excellent email development framework that’s saved me hundreds of [h]ours in development time. Documentation and community support are amazing. Getting up and running is pretty quick if you have HTML and CSS experience, and their “try it live” feature is super helpful to get community support.
It used to take me days to create new emails, and there aren’t very many email builders out there that will allow a lot of customization without having in-depth knowledge of coding/HTML. MJML is a god-send and it is completely free and open sourced.
MJML is amazing. I transformed our company’s email process by using MJML to compile down to Twig templates so our Symfony apps can populate the data. Never going to look back.
Find out more about how to get started with MJML.
Foundation for Emails is an email development framework that uses the Inky templating language. It’s a product of the ZURB Foundation, which also offers Foundation for Sites. Like MJML, it generates responsive HTML emails that work in any email client.
There are two different versions you can download: the CSS version and the Sass version. If you use the CSS version, you’ll get a ZIP file with boilerplate HTML, 11 email templates, and all the CSS you need to get started. Before you can send your email, you’ll need to run it through Foundation for Email’s Web Inliner tool.
If you use the Sass version, you’ll get more control over the email framework and a complete build process. This includes a Sass compiler, image compression, Foundation’s custom Inky HTML language, a built-in inliner, and a live reloading server so you can test your emails in real-time.
Note: For the Sass version, you’ll need to install Node.js.
Maizzle is an HTML email development framework that’s powered by Tailwind CSS and Node.js. Rather than using custom tags – requiring you to learn a whole new markup language – you’ll use standard HTML and Tailwind’s utility classes. This gives you full control over your markup, but eliminates the handy shortcuts that custom markup languages offer.
Maizzle’s build system uses environment configurations that allow you to create custom build scenarios for your workflow via JavaScript config files. You can set options programmatically or require() packages. The templating logic uses PostHTML so you can use partials, loops, and fetch remote content. GitHub Flavored Markdown (GFM) is also supported.
Maizzle requires Node.js to run. When you download Maizzle, you’ll get a CLI tool, the Maizzle framework, and a starter project. You’ll also have the option to purchase any number of premium email templates to work from.
I love the choice of utility classes for email development. Writing a bunch of small, single-purpose CSS classes to style a component is really a more efficient way to writing inline CSS.Â
Maizzle also includes a lot of niceties specific to email developers, such as sensible and customizable CSS inlining, accessible <table> tags, setting base image url ONCE, automatically adding url parameters, automatically preventing widows, and more.
Also while TailwindCSS defaults to modern units like rem and vh, Maizzle’s default output uses units like px and attributes like bgcolor (also still a thing in email development). Maizzle does this by customizing tailwind.config.js with email-friendly CSS. This is a huge piece that I was missing from previous attempts to use a modern web framework to build emails 🔥.
Thankfully on my last project I found Maizzle which was built on top of Tailwind CSS. You still need tables and everything, but the CSS inlining has been automated on build for you.
Bojler is a simple email framework that makes it easier to develop responsive, lightweight email templates that display perfectly across most email clients. An open-source project created by Slicejack, based out of Split, Croatia, Bojler started out as a single boilerplate HTML file and has grown into a larger framework.
Bojler is built with Sass and requires Node.js and NPM to run.
Bojler does include some reset styles, custom typography styles, and utility classes, but they’re fairly limited. It also includes a couple of prebuilt components, but they’re restricted to hero image and button components.
Open source email templating tool that’s better-suited for devs than for designers.
Cerberus is a collection of HTML email patterns and templates developed by Ted Goas. They can be used as a jumping off point to create responsive emails that work across all major email clients.
Cerberus’ templates are designed for mobile-first display and optimized for assistive technologies. Sections of code are broken up into blocks that can be moved, combined, nested, copied, and reused to quickly build an email. Email templates are annotated with comments explaining each block, which is especially helpful for those who are just starting out in email development.
Cerberus utilizes standard HTML and CSS, so you can use it in any other framework or email service provider (ESP). It should be pointed out that the developer of Cerberus recommends against using an inliner.
Cerberus is supposed to be simple and should not require a dependency like a CSS inliner. The placement of Cerberus’ CSS is already optimized. The SCC in the is meant only for email clients that parse CSS in this location. It doesn’t need to be inlined.
He has a few other things to say on the topic of inlining Cerberus emails, if you’re curious.
When I say ‘tested’, I mean ‘email doesn’t fall apart’. I don’t mean, ‘Everything is pixel perfect in Outlook’ or, ‘It looks the same after it’s been forwarded’ or, ‘I found a way to make media queries work everywhere.’ They don’t.
So, as always, remember to conduct some pre-deployment testing with Email on Acid to preview emails in any framework before hitting send.
I’ve found Ted Goas’ Cerberus templates very useful. I customized them, extracted them into modules and created a design system which I then translated to an email CMS. Coverage is pretty good although Outlook still glitches in some circumstances.
I’ve played with Cerberus HTML email framework. It was good but it lacks some advanced features.
Acorn Email Framework is based on a 600px-wide, four-column golden ratio typography grid. It’s a responsive email framework that focuses on clean code, reusability, and utility classes. Lightweight and easy to learn, it has broad email client compatibility and the template code is tested using Email on Acid.
Acorn Email Framework comes with a layout file that doubles as a boilerplate template. It includes all the CSS, tags, and attributes that Acorn requires for proper rendering. While Acorn Email Framework is free, you can purchase affordable additional template packs through ThemeForest.
Easily the best email developers offering templates on ThemeForest. This template in particular has an amazing collection of modules, many of them highly innovative and you can tell that tremendous thought has been put into the coding of the HTML to ensure that it has the widest possible support among email clients. The design is also top-notch, is current and provides a ton of flexibility while remaining consistent. Two thumbs up!
This email template is absolutely perfect, and the support is first class and fast!
The email template itself is great, very well coded, fantastic design, and so easy to work with. Just what I was looking for for my email campaigns!
Inkcite is an email framework that uses modular design to build responsive emails. While it doesn’t exactly employ a custom markup language, it does use something similar called Helpers. Helpers look a bit like HTML tags, but they’re wrapped in curly brackets.
Example:
{button id="order-now" href="https://mystore.com"}ORDER NOW{/button}
Their framework also uses email components like variables, partials, and conditionals, that help to expedite email development workflow and reduce coding errors. Additionally, Inkcite makes use of versioning, testing, image optimization, and code minification.
Inkcite comes with three different environments – development, preview, and production. The environments direct email development workflows so that errors are caught and changes are easily made before your email gets sent out the door. Here’s how each environment functions:
HEML is a free, open-source markup language designed to help developers efficiently build responsive emails. If you’re already familiar with HTML and CSS, HEML gives you the same native development feel without having to deal with the usual quirks and complexities involved in coding HTML emails from scratch. Even though HEML is its own markup language, it’s quite similar to HTML so there are no special rules or styling criteria to learn.
HEML is an XML-based markup language and functions as an NPM module that you install in Node.js. The experience of using this framework is designed to make email development feel more like web development. It’s also quite flexible and extensible – you can create custom elements and style rules that you can share with other HEML users, and use contributions from others in the HEML community.
Love doing interactive emails with this and keeping your end user in their email while getting feedback. This is brilliant.
It’s simple enough that anyone can follow along. It does help if you know a little about frontend HTML but you can also Google questions as you have them.
AMP for Email is an email development framework that offers dynamic, interactive functionality. AMP allows developers to securely implement certain interactive features in email that you would normally see executed with JavaScript on a website. Since email doesn’t support JavaScript due to security concerns, AMP for Email is the perfect alternative. You can add forms, live content that refreshes when an email is opened, carousels, and lightboxes – all using AMP for Email.
The major drawback is that It’s not supported by a large number of email clients. It is, however, supported by some very widely-used ones like Gmail, Yahoo! Mail, and Mail.ru, as well as FairEmail.
Not everyone seems to like AMP for Email. There’s actually quite a lot of negative press about it – some developers and end users have concerns about Google’s ethics and the potential for email bloat, and others are worried about security exploits and the logistics of getting wide-spread adoption by ESPs and email clients. But many marketers seem excited for its proven performance in increasing conversions.
The best way to decide if AMP for Email will work for you is to try it out.
No matter what framework you use to code your email, make sure you test how it renders in all major email clients before releasing it into the wild. You can use Email on Acid’s Email Previews to test, share, and proof any email output from any framework. Find out how your campaign looks and catch problems before you hit send.
Using an email framework introduces something new into your email production process. So, don’t forget to test!
