Responsive Email Frameworks: Types, Most Popular Solutions, Their Features And Comparison
Besides various drag-and-drop email editors, there is another way to ease and accelerate the email creation process — frameworks. They optimize your coding process without replacing it with no-code environments. We already wrote an article about one of the most popular frameworks, MJML, but this time we’d like to look at its competitors and compare them.
Responsive Email Frameworks With & Without Custom Tags: What’s the Difference?
First of, let’s define what a framework is. Framework is a sort of a template, a ready-made model for a quicker development. Based on this model you can write your own code. Frameworks set the structure, define the rules, and offer the necessary set of tools to create a project.
The difference between frameworks with custom tags and without them is simple: an email framework with custom tags is usually just a specialized markup language that may come in handy in case your team has good coding skills but no desire to bother with HTML/CSS and/or automate your working process.
Email frameworks without custom tags are sets of ready-made components with no specialized tags, just clean HTML/CSS. This is the only difference.
Of course some tools may be somewhere in the middle. We will take a look at the most popular options and tell you about their pros and cons so you can decide which tool to use.
Email Frameworks With Custom Tags
1. MJML
MJML is a free open-source email framework that allows you to create HTML emails faster with the help of pre-made components. This framework has a desktop app, a template gallery, it allows you to send emails directly from it and is integrated with Outlook, Apple Mail, Gmail, Yahoo Mail, and Office 365. And as a cherry on top, MJML has its own email editor that allows you to edit your email in the left part of the screen and preview it in the right part.
If you want to dive into this tool more, read our article about it.
Want to speed up your email production?
Want to speed up your email production?
2. Foundation For Emails 2
Foundation for Emails 2’s features are similar to those offered by MJML: it has custom components, email templates collection, and an opportunity to create responsive campaigns. There are two ways to work with Foundation for Emails 2: the CSS and SasS versions. The framework doesn’t have an email editor, so here MJML beats its competitor.
We’ve already compared Foundation for Emails 2 with MJML. It is quite an obvious thing to do as these two email frameworks have much in common. Here are the main similar features of these two:
- a collection of custom reusable components;
- responsive HTML email templates gallery;
- a web inliner for CSS.
Foundation for Emails 2 utilizes its own template processing engine called Inky. All in all, it does the same thing as the MJML template processing engine does: it simplifies the working process with complex nested tables with the help of shorthand tags. This is what your code will look like when you use Inky:
And here is its final, clean HTML form:
There are about 10 tags: three of them are to create a grid, the block-grid tag is to create… a block grid. The menu, title, button, and callout tags’ names speak for themselves.
Unlike MJML, Foundation for Emails 2 creates two versions of an email: one for desktop and one for mobile devices. You can decide on which breakpoint to switch between them and also you can turn on/off some of the blocks in your code with the .hide-for-large & .show-for-large tags.
Even though Foundation for Emails 2, just like MJML, has a set of premade templates, it lacks its own no-code email editor, so you can’t preview and edit your email right there. You can resort to other solutions, e.g. Blocks 😉
3. HEML
HEML is an XML-based markup language in the form of an NPM module for Node.js. It’s quite similar to HTML/CSS, so you have no need in learning any special rules to use it.
This email framework is designed to make the email coding process resemble web development. You can create custom elements and style rules. HEML is also quite social, so to say, as you can share your custom assets with other users and use their works.
Here are HEML’s main features:
- easy to use: it is designed to look and feel like HTML, so your brain won’t have to restructure the ready-made patterns and learn a new language;
- CSS default inlining (this can be turned off);
- clean HTML doesn’t interfere with HEML’s language, both can be used at the same time;
- a quick-start guide right at the front page.
Looking for responsive email templates?
Check our template gallery and try our email templates for free!
Try the templates!Looking for responsive email templates?
Check our template gallery and try our email templates for free!
Try the templates!Email Frameworks Without Custom Tags
1. Maizzle
Maizzle is an email framework that uses the Tailwind CSS framework and Node.js instead of custom tags. You don’t have to learn a new language, just clean HTML and Tailwind’s utility classes. However, it cuts you off from shortcuts.
Maizzle utilizes environment configurations that let you build custom scenarios for your workflow with the help of JS config files. PostHTML is used for the templating logic, which means partials, loops, and remote content are yours to use.
Maizzle’s key features are:
- Ninjucks templating language made by Mozilla;
- it supports the GitHub Flavored Markdown;
- inline your code with the help of transformers;
- the default layout is adjusted for AMP requirements.
2. Pine
Pine is a responsive email framework designed for email developers. It is focused on clean code with HTML5 at its base. The best way to start your Pine experience is with its boilerplate, which already has all the necessary CSS, tags, and attributes:
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Pine Email Framework</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
td,th,div,p,a {font-size: 16px; line-height: 26px;}
.spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
</style>
<![endif]-->
<style type="text/css">
/*Framework CSS - removed for demo purposes */
</style>
</head>
<body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">
<div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>
<table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" bgcolor="#EEEEEE">
<table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
<tr>
<td align="left" bgcolor="#FFFFFF">
<!-- ADD ROWS HERE -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Pine’s key features are:
- wrappers, containers, and columns;
- 12 column grid;
- interactive components (accordion, pricing table, testimonials, etc.);
- Outlook background image support;
- Retina image support.
3. Acorn
Acorn is a lighter version of Pine. It also has HTML5 at its base, yet at the same time it uses a 4 column grid, unlike Pine, which utilizes a 12 column one.
Acorn’s key features are:
- 4 column grid;
- responsive utilities, content, and interactive components;
- modern system font gallery;
- Outlook & Windows Mail retina background image support.
4. Bojler
Bojler is a CSS/SaaS framework. It is built with SaaS.
Bojler requires Node.js and NPM. You can find full documentation on the official website to go through the whole installation and setting up process.
Bojler’s key features:
- built-in inliner;
- automated Sass to CSS transpiler, CSS inlining, and Sass lintering;
- typography, grid system, utility classes, and pre-made components;
- a web server with live reload.
Other tools for easier HTML creation process
There are several solutions that are usually referred to as HTML frameworks, yet they are not: e.g., HTML patterns, templates, and boilerplates. Yes, they do ease your workflow, however, these are more suitable for experienced HTML coders. These tools are for those who want to work with the code without any mediators.
Cerberus
Cerberus is a collection of free responsive HTML templates & patterns for an easier email creation process. Every template has necessary info about it and is tested in the most popular email clients.
Here’s a fun fact: the creator of Cerberus is against using a CSS inliner, as their product is supposed to be simple and shouldn’t require a dependency like a CSS inliner. They also believe that inlining leads to code bloat, and the final argument is that the placement of Cerberus’s CSS is already optimized.
Kilogram
Kilogram is a Nunjucks templating engine created by Mozilla. It also has extra tools for responsive email development. When installing Kilogram you get email templates, CSS inliner, and an HTML minifier.
Here is the list of compatible email clients for Kilogram:
- All versions of desktop Outlook;
- Office 365 (web);
- Outlook.com (web, iOS, android, windows phone);
- Thunderbird (windows);
- AOL mail (iOS);
- Yahoo! mail (web, iOS, android);
- Google Inbox (web, iOS, android);
- Gmail (web, iOS, android);
- Mail.ru (web, iOS, android);
- myMail (iOS, android);
- Rambler mail (web, iOS, android);
- Yandex mail (web, iOS, android);
- Airmail (iOS, OSX);
- Apple Mail (iOS, OSX);
- Spark (iOS);
- Polymail (iOS, OSX).
Inkcite
Inkcite is a modular design system for building modern, responsive emails. It doesn’t utilize custom tags, yet it uses something similar. This thing is called “Helpers” that look like ordinary HTML tags in curly brackets.
Here’s what it looks like:
Inkcite has three environments: Development, Preview, and Production.
In the Development environment, you can develop the email and its content locally.
The Preview environment is for sending test versions of your emails.
Production is the final stage of the email development process. Images are uploaded to the CDN, URLs are pasted into the HTML, link track and tags are turned on, HTML is minified, and failsafe checks are on.
So Which Email Framework Do I Choose?
If you are looking for a solution that will ease and accelerate your coding process dramatically and you are ready to learn new logic, structures, and rules, then email frameworks with custom tags are for you.
If you are looking for a tool/a platform that will accompany you on your coding journey, introduce more structure into it, and will not require you to learn a new language and rules, then email frameworks without custom tags are your option.
In case you need some sort of an assistant, resort to other tools (sometimes referred to as frameworks): HTML boilerplates, templates, and patterns.
Also, if you find any mistakes or inconsistencies in this article or any other article in our blog, feel free to contact us at support@useblocks.io. We will react and fix everything ASAP.