Why You Should Be Using MJML to Write Your emails
Stop hard coding emails. MJML can save you time and alleviate Outlook-induced headaches.
If you’ve ever thrown your hands up to the sky and cursed Outlook for being such a pain in the ass, then you have probably worked in email development. You can only write so many nested tables and repeated inline styles before you seek out a better solution.
I was recently tasked with redesigning my company’s newsletter. I was excited to make my mark on the company and thought, “Hey, I can hard code this template from scratch”. I fell into the typical junior developer trap of thinking every piece of code needs to be yours or you’re not “a real developer”. Alas, I quickly learned creating a table-based layout that looks like your designer’s beautiful mock-up AND works in all versions of Outlook, is no easy task. After some soul searching, keyboard head banging, and googling, I came across MJML.
MJML is an open-sourced markup language and responsive email framework. They take all the guesswork out of creating a mobile-first email. So, you no longer have to keep up-to-date with all the minute updates and specificities of different email clients that break your gorgeous email. MJML is easy to learn, offers decent design flexibility, has a VS Code extension(!), and has great documentation.
So instead of writing something that looks like this:
<div>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:250px;">
<img alt="gorgeous alpaca" height="auto" src="https://images.unsplash.com/photo-1589182337358-2cb63099350c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" style="border:0;border-radius:5px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:30px;font-weight:600;letter-spacing:1px;line-height:40px;text-align:left;color:#F45E43;">Absolute Unit of the Week</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;font-style:italic;font-weight:600;line-height:30px;text-align:left;color:#1D96A8;">Meet Jerry the Alpaca</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0px;word-break:break-word;">
<div style="font-family:helvetica;font-size:18px;line-height:30px;text-align:left;color:#575757;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
</td>
</tr>
<tr>
<td align="left" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#1D96A8" role="presentation" style="border:none;border-radius:5px;cursor:auto;mso-padding-alt:10px 25px;background:#1D96A8;" valign="middle">
<a href="#" style="display:inline-block;background:#1D96A8;color:#ffffff;font-family:helvetica;font-size:16px;font-weight:600;line-height:120%;letter-spacing:1px;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:5px;" target="_blank"> Show Jerry Some Love </a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<p style="border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
You only have to write this:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="300px" src="https://images.unsplash.com/photo-1589182337358-2cb63099350c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="gorgeous alpaca" border-radius="5px"></mj-image>
</mj-column>
<mj-column>
<mj-text font-size="30px" color="#F45E43" font-family="helvetica" font-weight="600" letter-spacing="1px" line-height="40px">Absolute Unit of the Week</mj-text>
<mj-text font-size="20px" color="#1D96A8" font-family="helvetica" line-height="30px" font-weight="600" font-style="italic" padding-top="0px">Meet Jerry the Alpaca</mj-text>
<mj-text font-size="18px" color="#575757" font-family="helvetica" line-height="30px" padding-top="0px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
</mj-text>
<mj-button align="left" background-color="#1D96A8" border-radius="5px" font-family="helvetica" font-size="16px" font-weight="600" letter-spacing="1px" href="#">Show Jerry Some Love</mj-button>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-divider border-color="#F45E43"></mj-divider>
</mj-column>
</mj-section>
</mj-body>
</mjml>
To create this:
Much better right?? No more confusion over what this nested table does versus that one and google searches for "Outlook conditional CSS syntax cause my life is pain".
After introducing MJML to the team and using it on the newsletter template, we now use the framework for all of our emails. It has done wonders for my email development process. If you take advantage of this framework, your emails will look great in Outlook, Gmail, and other popular clients. 😎
If you end up using MJML, I’d love to see what you create! Leave a comment here or tweet me @sarah__codes.
I'd love to explore and write about advanced MJML techniques in the future, so be on the lookout for those! ✨
MJML Resources