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. 😀
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.
Let’s open up the transactional email and see if I can change the title of
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.
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.
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.
There are some nice options in the config file. I’ll review in-depth later, but we’re back on track for now.
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.
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
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
<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.