Beautiful responsive email design is complicated. It is like trying to use modern technology with cavemen. Nothing you

I design emails templates every day. So that's a minimum of 20 per month - if I rest weekends. And I've learned a few things.

See, when designing emails, there aren't any defined rules.

I'm not saying that in a good way - instead of everything working everywhere - what "no rules" mean is that some email clients might follow some standards and others don't.

There are many weird email clients still in the wild - some don't work because they are too old, others make strange display choices, and others want to see the world burn.

As always, the "best" solution is to opt for boring simple html. No styles, no nothing.

But if you want to make eye-catching email templates that work everywhere, there is hope:

Inspiration

I always look for inspiration because I find what has been done already, so I know I can do something similar.

You can look for inspiration on Awwwards, Site Inspire, Godly, and a few other sites for websites.

But for email, there are fewer options. The best I've found is Really Good Emails. My advice is to follow brands that have similar products to yours.

Many beautiful emails rely heavily on good imagery. So, if you can, adding an image is an excellent way to beautify your emails.

However, be aware that most clients block images - so don't place your most important information inside an image. Finally, and most importantly, don't design your whole email to be an image.

I try to look beyond the pictures and understand how the information is laid. It is more critical to the way the info is laid out than what the images show.

Then I open Figma and start trying a few ideas.

Instead of a 12 or 16 column layout, I opt for a 3 or 4 column layout. This is because the usual width for an email template is 600px - to give you an example, bootstrap's extra small breakpoint is 576px.

So I find that using a mobile grid is better.

Using a framework

If you've ever seen the code of an email template, you might have found it to be like relearning html.

Email templates work with tables for layout. It is like traveling 20-30 years in the past. I had nightmares remembering how we used to do things in Dreamweaver.

For reasons no one knows, email is trapped in the past.

Look at this example from Nicole Merlin on how to hand-code a template from scratch.

I've found that using frameworks is way easier than relearning tables for layout.

Many frameworks make coding easier. These are my favorites:

###

HEML

I like HEML because it feels like HTML. In addition, the syntax is very similar to HTML/CSS, so the learning curve is not too steep.

I especially like their online editor because you can preview what you are doing and working on.

However, I wouldn't say I like that sometimes it feels like you are just exchanging tags. For example, instead of using table-data, you use "column," but in the end, it feels like you are still coding tables.

Foundation Email

Supposedly if you know Foundation, you can use this framework.

However, until Tailwind made its appearance, most of us used Foundation or bootstrap.

So I thought this framework would be my favorite, but the truth is that it feels like overkill.

It requires you to learn Inky and Foundation.

If you want to fast-track your learning, they sell a course for 299 USD.

Still, I'll be honest; this will probably be my following framework once the framework I'm currently using stops working.

Maizzle

I was excited to learn about Maizzle, the framework that most closely resembles my development workflow.

Maizzle works with Tailwind, so it helps you speed up your styling out of the box.

I was not too fond of their starter themes.

Maizzle solves other problems but not my main one: I don't want to use tables.

It helps a lot with styling, but I honestly don't see anything that other methods couldn't achieve. I don't want to say anything wrong about Maizzle because it is one of the most completed projects out there, but I'm not sure of its place, which probably means I'm overlooking something.

MJML

MJML was created by Mailjet. It is a templating language that translates your code and spits out valid HTML.

It has plugins for the most popular IDEs, so you don't need to install anything extra. But if you want, they also have an app.

I usually code in VSCode and then use their live editor to copy the HTML. But, unfortunately, their extension does weird things to formatting that nor even prettier can solve.

I also like that it warns you when you add a property that is not valid or won't be compatible with email clients, and that ends up speeding the coding process.

Testing

We use Email on Acid to test if our emails work.

We expect to fail some tests as it is almost impossible to pass all of them and see if severe---for example, MSO, especially version 11, renders tables and fonts weirdly. However, we can assume it is not a big problem since it is 18 years old.

Litmus's most popular email testing tool, but I prefer Email on Acid. No real reason there.