Test: Maizzle, an HTML framework dedicated to emailing

A little while ago, I was asked to investigate the Maizzle email framework; for a client and to see if it could be useful for us internally. I admit I went into it with a bit of a lead foot... I didn't have much faith in it. As an email developer, I mostly trust my way of coding, and not so much a framework that will write some of the code for me.
So, was I convinced or not? Let me tell you...

What is a framework?

In this case, we could define a framework as follows: a set of structural components that is used to create the foundation and outline of all or part of a software program.

The objective of a framework is to save time, by avoiding developers to spend time on redundant things, to focus on other points (features, ergonomics, ...). Because yes, you will have understood, here we are going to talk about technical issues and such a framework is primarily intended for production, integration and development teams.

If it allows to save time, it is necessary at first to devote a lot of time to learn it. It requires to learn the nomenclature of the framework in question, as well as its functioning. Moreover, it requires some technical skills in order to install it and to customize it according to your needs. If these skills are basic skills for a developer, they are less common among email developers who often have profiles of designer or HTML integrator converted.

It may scare some people, it may amuse others. Personally, I had the impression to fall back in my youth where it was always a pain to install a video game, with the associated additional programs (like DirectX) in the right version, and then, once we managed to launch the game, to understand how it works. Anyway, for me, it was quite fun :-p

Tailwind the CSS utility framework

Before talking about Maizzle, we need to talk about Tailwind, which is another framework, itself used by Maizzle.
Tailwind is a framework centered around CSS created for the Web. It allows the automatic management of CSS through the use of the specific Tailwind nomenclature. Its strength, despite the supporters of semantic classes, is to offer a library of class utilities that allow you to style an element by adding them.
Basically, instead of writing

<div class=”boutton”>
Mon bouton
</div>

With a CSS that looks like

.button { font-size: 20px; border-radius: 5px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background-color: purple; color: white; }

The idea will be to write

<div class=”f20 br5 px20 py10 white bg-purple”>
Mon bouton
</div>

And Tailwind itself takes care of generating the CSS sheet containing the appropriate styles:

.f20 { font-size: 20px; }
.br5 { border-radius: 5px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.bg-purple { background-color: purple; }
.white { color: white; }

The operation allows you, knowing the Tailwind nomenclature, to use classes that will be generated automatically without having to worry about setting up the CSS yourself.

Maizzle uses Tailwind with a configuration file that it adapts to the email. For example, where basic Tailwind calls typically use values in rem (a good practice for the Web), with Maizzle they will be called in px.

In the same way, instead of generating a CSS sheet (ideal for the web, but not for email), the styles will be placed inline.

And for those of you who are afraid of having to memorize the names of the Tailwind classes, don't worry, there are cheat sheets. Just keep in mind that these sheets are for the basic Tailwind, the one made for the web, but they easily adapt to the Tailwind configured for Maizzle.

Responsive email, Tailwind also thinks about mobile

Of course, the media queries for mobile rendering has been taken into account. The usage is the same as for the inline style, you just have to prefix the class name so that in output the style is not placed in inline, but in the media queries.

Maizzle a framework to industrialize your email production

As we have seen, Tailwind takes care of streamlining styles. Maizzle, on the other hand, will streamline the HTML code itself. The framework offers a production environment designed to optimize your workflow. This is why it is fully configurable and can be adapted to your needs.

On the HTML templating side there are 3 levels of nesting: Layout, templates and components.

Layout

A layout is a structure file, which aims to be reusable, and in which you will write everything that encapsulates your content. Typically, this will be the doctype, the meta tags, possibly specific CSS classes (like a call to a specific typeface), and the opening and closing of your HTML content.

Template

The template is your actual HTML content. This is what developers usually focus on. For example, a headera cover block, a column block, and a footer. Everything you can find in the body, but also the front matter that we will discuss a little later.

Component

A component is an element that is usually reused several times. Once the component code has been written, it can be called to avoid rewriting the same code each time. Typically, a button. Instead of rewriting the button code each time, you just call the component and pass it the expected parameters (for example a link and the button text)

The central element is the template. It contains your content. It will extend a layout, that is to say that your template will surround itself with the content of a given layout, and it will use components within it, passing them one or more parameters.

Front Matter

Front Matter is the header of your template file. It is a YAML syntax that allows you to define a set of contents simply and quickly via variables. You can define text elements, colors, language variables, lists, etc.
Once instantiated, it is possible to call these variables at will or to use them as a condition.

Logical tags

Maizzle also includes specific tags that allow you to set up different logical operations.

Conditions

In the condition tags we find the great classic, the <if> which displays content if the condition is met.
We can do more elaborate things with <if>, <elseif>, <else>.
It is also possible to quickly write content for Outlook or for anything but Outlook with <outlook> and <not-outlook>.
The last conditional tag present is the <switch>.

Loops

The tag <each> allows to loop on a table or on objects.

Scope^*

The tag <scope> allows to access variables quickly by defining a context.

Fetch^*

the tag <fetch> allow to fetch remote contents.

Raw^*

the tag <raw> avoids parsing the content inside the tag.

In short, you can see that the Maizzle framework offers a nice toolbox to code emails. I do not detail here all the possible uses of these tags and their detailed nomenclature, but you can consult the Maizzle's technical documentation on this subjectit is complete and well done

That's all for the basics. After that, there's the rest...

Advanced mode

The advantage of frameworks is that they are sandboxes. They offer a context and a whole series of tools, and the developer is free to do what he wants with them. For example, it is possible to use several layouts, to have components within components, to customize the tag nomenclature via a configuration file (if, for example, you want to change the <each> in <for>), the Tailwind configuration (to add a Tailwind class m-0-auto for margin: 0px auto; for example), the automatic addition of attributes on tags (transforming a <table class=”m-0-auto”> in <table cellpadding=”0” cellspacing=”0” border=”0” role=”presentation” style=”margin:0px auto;”>), etc.

In short, you will have understood, the possibilities are numerous. Once the tool is in hand, the configuration of the different processes is done, Maizzle can save a lot of time in production.

Output

In output, Maizzle will provide a nice HTML file, with an associated image folder (for images that were in relative path in the template file) and all the HTML code compiled according to the configuration files, to obtain a single HTML file usable for any router.

To Maizzle or not to Maizzle, that is the question

Is Maizzle the solution, the one that will allow you to streamline your email production and the only development tool you will ever need? This will depend greatly on your type of production. First of all, you have to keep in mind that Maizzle is a developer's tool for developers. It therefore requires technical skills to install, configure and use it. Then, if your email production is very heterogeneous, it will be complicated to rationalize it by cutting it into reusable elements. Nevertheless, Maizzle remains very efficient as a framework to simplify and accelerate the writing of your HTML code for email.

On the Badsender side, I'm still digging into this tool. I tested it and created some POC, but I would like to test it in real condition. As an agency, our email production is very heterogeneous, but we sometimes have to produce many email variations in a short time for some clients, and Maizzle certainly seems to be an efficient tool to help us with that.

In the near future, we will put online a doc for the implementation of the Maizzle email framework. In the meantime, for the English speakers, don't hesitate to go and see thehe official document which is very complete!

Feedback, one year on

One year after discovering this framework, I can tell you that I swear by it (for the time being). We've been using it as a production tool at Badsender since January. I can only invite you once again to take a closer look, because to try it is to adopt it!

I was also lucky enough to attend EMDay 2023 and present Maizzle there. In essence, I recounted what's written above in this article, and took the opportunity to do some a video with Jonathan you can find by following this link (spoiler alert: a second video will follow for a more advanced demo).

If you're interested, here's the presentation used:

And finally, the link to the Github containing the demo files used in the video if you'd like to see what it looks like (don't forget theinstall the Node library for each of the 3 demo projects if you wish to run the whole set).

_{*We could translate these terms into French, but it would hurt me to Frenchify so much :-p}