A Q&A on Email Design Systems

Hi! Hello! If it’s your first time here, welcome to my little newsletter. Come have a cuppa and let’s rant about email marketing and stuff. If you feel moved, I’d be grateful if you shared this issue with people you know!

I've been speaking about email design systems a lot lately. I gave a high level talk at Email Camp back in the fall, and just this month I did a deep dive into my email design system at Parcel Unpacked. (If you haven't watched either yet, I recommend watching the Email Camp talk before the Parcel Unpacked one, the second talk is a natural progression from the first.)

Anytime I show people my email design system - completely powered by Parcel - I get asked a few questions:

What framework are you using/Do you use MJML?

My email design system is completely custom and homegrown. My components were not pre-coded in any way. I'm the only email developer at my job, so it was on me to get this right and code up the entire thing.

I think using MJML would work for most people, but we had so much to take into consideration (multiple brands and languages), that it didn't make sense to me to use it. While some people don't want to deal with Outlook, I crave total control of my code and can't stand it when I run into issues editing things. Our needs were too robust to potentially be hindered by an existing framework.

How long did this take you?

From version 1 to version 3, coding took me six months. I'm already making plans for version 4, as I've learned a ton and there are modules I'd like to combine and other things I'd like to change.

Before coding began though, we looked at our emails to identify components. From there, we requested mockups from our Senior Graphic Designer, who's the keeper of the visual brand, to make sure our emails always look good.

What's your biggest piece of advice?

There are a few things I've learned from this whole experience:

• Don't attempt to do this as a side project, it needs proper resources. If you try to fit this in between regular emails, you won't make progress. Believe me, I've been there, it's not pretty. Before getting started, this article by Ted Goas is essential reading.

• Don't get bogged down in the details. If you code a few components and dive right into detailed problem-solving, I can almost guarantee you'll have to start over, which is what happened to me.

• Design the interface. This goes hand in hand with don't get bogged down in the details. Outline what you want the modules to look like, then put it into your code editor. See how it fits at a high-level before going behind the scenes. Do this with your global styles, too.

Coding an email design system is an amazing challenge. It forces you to do high-level problem-solving, and gets you out of the mundane day-to-day code. Here you need to think about how all your pieces fit together and build upon another. Like, how do you handle multiple columns that need to be flexible enough to change width? Or reverse stacking? Where/how do we store global styles for multiple brands, ESPs, and languages? What about dark mode and adding images that change based on the color scheme? These are all things you need to think about when designing and coding these systems.

As email developers we're often asked to create high quality emails in less time with fewer errors. We're often the last stop in a project's long journey, and we get to deal with the consequences of other teams' debates and delays. Generally, emails are expected to go out on time and without error, regardless of what has happened before the content hits your inbox (or PM tool).

But guess what? With an email design system, this is no sweat. Seriously. It'll free you up to work on higher level email development. It's much easier to add an interactive component when the rest of the email is already taken care of. You'll be shocked at how quickly you can code an email.

So whatcha waiting for? Get the team together - it's time to code!

See ya next time, Meg

P.S. content creation is hard and I always convince myself that every issue is going to fail, so pls gimme ideas on what you'd like for me to tackle! appreciate you, seriously. thanks for reading.