Getting Started with Maizzle, a Framework for Rapid Email Prototyping
Ted Goas
Posted on February 3, 2020
For the past several years, coding HTML emails has been part of every job I've had. However, despite all the modern front-end tooling that's been created in recent years, my email development process has remained relatively basic and manual. Write static HTML, inline CSS by hand, copy/paste, etc.
A few times I tried twisting a framework into outputting high-quality HTML emails, but was never successful.
Fast forward to last week, I saw a tweet about Maizzle, another framework for building HTML emails. I was initially skeptical, but that changed after a few minutes clicking around the documentation.
Maizzle is an email framework that helps you quickly build emails with utility-first CSS and advanced, email-specific post-processing.
This piqued my interest: utility classes are kinda like writing inline CSS, which is how I currently develop emails.
So last week I set aside a few hours to dive in. I also opened up a blank text document to record my reactions as I went through the process. This is that document. š
Getting started
Alright (cracks knuckles), let's start by setting up a new project.
I followed the instructions in Maizzle's installation docs. Iām not the most comfortable using the command line, but I was able to follow these instructions and get a new project up and running locally within in a few minutes.
Nice, that wasnāt too bad.
Editing
Letās open up the transactional email and see if I can change the title of templates/transactional.njkā¦
Nice, so this is where the template files live, I can edit them and see my changes in a browser, and better than best browsersync automatically reloads the browser even time I save a change in my editor.
I love this idea of building emails using JavaScript partials. Not the newest idea, but there arenāt many off-the-shelf options to do this specifically for email (Iāve tried unsuccessfully to hack a few static site generators to build emails.
Configuring
Ok so the Javascript part of this is cool, but let's check the actual HTML that was rendered since thatās the final email that someone would actually experience.
Whoaā¦! This email is 433kb??? For this tiny little thing? Letās open up the rendered HTML and see whatās going on.
Ohā¦ the email includes ALL of TailwindCSS š¤¦āāļø
TailWindCSS is a utility-first CSS framework comprised of tons of tiny, single-purpose CSS classes. And it looks like our email has the entire framework included in the <head>. All 25,000+ lines of CSS would certainly account for that file size!
I remember seeing something about this in Maizzle's docsā¦
Here it is. We can configure build environments by editing their respective config.js files. Looks like config.js is for local development, so letās pop that open.
Looks like inlineCSS and removeUnusedCSS are both set to false. Letās change those to true so that our CSS is inlined (still a thing in email development, yea) and all unused CSS classes are removed.
Letās save and re-run Maizzle.
Much better!
There are some nice options in the config file. Iāll review in-depth later, but weāre back on track for now.
Templates and Partials
Checking out the folder for partials and thinking of use casesā¦
- A header + logo for each product line
- A footer for each ESP (and their unsubscription info).
- Spacers and other non-editable components
- š¤ I wonder if you can specify a component and send in variables (Eg. Define the code / design of a button but send in a unique URL and text for each instance). Will research.
I also like the option to have multiple base templatesā¦ handy for those one-off fancy designs.
Tailored for Email Development
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. (ā I still write most of my email code by hand and inline the 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 prevent 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 š„.
Worth noting is that weāre still writing HTML in Maizzle. Other options like MJML and Foundation abstract away some of the verbose HTML in custom tags like <column> and <row> and <button>. While some find that freeing, I find it limiting. Maizzle allows us to write the HTML we really want.
Maizzle abstracts away some annoyances of email development by solving them with modern web technologies, allowing:
- web devs to code proper emails using tools & techniques they're already familiar with.
- email devs to build emails quick without losing control of their code.
Iām excited to start porting over parts of our email design system into a Maizzle project to see how it holds up.
Posted on February 3, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 3, 2020
