How to Build Emails the New Fashioned Way ↘

Anthony Nguyen
Development

The sun is rising as you pry yourself from your bed. You, a developer and an intellectual, have planned two steps ahead and wore your work clothes to sleep so you don’t have to get changed. It’s Monday morning, and you just received an email template design that you need to develop. 

It’s your first time coding an HTML email, but the design looks relatively simple. Also, the fact that you’ll be coding in only HTML and CSS means that this will be a walk in the park. After all, you’ve been working with Node, React, PHP, and even Objective C (God bless your soul,) so how hard can coding one HTML email be?

This is the mindset that most developers have when they’re asked to build their first email. If you also share this mindset, first of all, how dare you? Secondly, if you have never developed an email before, make sure to have your therapist’s number on speed dial because you’re going to need it.

I Got 99 Problems, and Emails Are One

There are many caveats to consider when building out an HTML email, and one of them includes a delicate balancing act between various email clients. Creating HTML emails that look good on every client is like riding a bike…except the bike is on fire. And Outlook is on fire. Actually, pretty much everything is on fire and you’re in email hell. 

What’s the trickiest part about developing emails? Fixing them to look nice in one email client might break it completely in another client. And just to make things worse, there are dozens of email clients at the moment and most of them have multiple versions that you need to support.

If that wasn’t bad enough, the way you code emails has also taken a complete 180. All the modern CSS tricks and HTML elements that you’ve been using up until now are more or less obsolete when it comes to emails since most email clients don’t support anything too fancy. 

Do you like writing semantic code that is well organized and legible? Well, I hope you like laying everything out in tables because that is what you’ll be forced to do a majority of the time when coding HTML emails. 

Modern Problems Require Modern Solutions

With so many headaches and nuances, it’s not surprising that many companies assign the dirty work to their junior developers. Emails are just plain frustrating to code since you could spend hours trying to achieve a layout that would normally take minutes. 

There seemed to be no hope in the email development world, and every developer had accepted that their emails would break in at least half of the email clients. That is, until a new hero emerged. 

In 2015, a team of developers at Mailjet created MJML, a solution that could very well change the way we develop emails. These brave souls had taken everything they learned about HTML emails over the years and blessed us lowly peasants with a free open source framework that allows you to code emails in a way that actually makes sense. 

Gone are the days of endless table nesting. With MJML, you build out your emails with tags that make sense semantically such as <mj-section> and <mj-column>. There are also a wide array of higher-level components that you can use in your emails which include <mj-image>, <mj-article>, <mj-hero>, and much more. By using these simple components instead of nesting everything in tables, you will essentially reduce your code by at least 60%. In addition to these components, you can also build your own and customize MJML as much as you want. And to top it all off, MJML is responsive by default so you don’t have to worry as much when considering the email experience of your mobile users. 

If you want to get even more productive with MJML, I suggest you use Visual Studio Code as your editor if you haven’t already. Not only is it an amazing code editor, there is a MJML plugin in Visual Studio Code that has amazing features, such as live preview that lets you see what your email will look like as you are developing it out. Once you are done, you can run a quick command in VS Code to compile your MJML code to HTML in a matter of seconds.

Mo Clients, Mo Problems

Now that you developed out your emails with MJML, you might think that everything is good to go and you can start sending out beautiful emails to your clients. And you’d be right, if you wanted to disregard all other email clients that are not Gmail or Apple Mail. 

Even though MJML does a lot of the heavy lifting for you, that doesn’t mean that you should neglect client testing. If you try to attempt anything remotely fancy in your emails, there’s a decent chance that it won’t look perfect for at least one email client. The problem is, how do you find out what your emails look like in each client? 

If you’re reading this blog and made it all the way down here without falling asleep, you’re probably a developer, and you most likely can’t afford to buy dozens of devices in order to test your emails. Even if you somehow managed to legally obtain all of the devices you need, it would be a pretty annoying way to test in general.

If only there was a way to test your emails in all the email clients, and have it be in a centralized place for easy viewing and testing! The mere concept seemed impossible until I discovered Litmus

Litmus is the answer to all your email testing prayers. For only $99 a month, you will be able to test across multiple clients such as Gmail and Outlook, all in one place. That might sound like a lot of money, and it IS when you think about how much Mountain Dew you can buy with that amount. But when you realize how much time you’re saving and how many email clients you are able test in, it starts to make a lot more sense.

With Litmus, you no longer have to wonder if your email will look horrible on Windows Mail. You can see firsthand how horrible it is with a single click.

TL;DR – Give Mjml a Shot

So if you’re feeling masochistic and love laying everything out in tables, feel free to stick to the traditional method of developing emails. But if you have any sanity left within you, then start using MJML to develop beautiful, modern emails. 

You should also consider a diet of nothing but instant ramen, and use those savings to invest in Litmus.