back arrow
All Blogs

Mitigate the Pain of Coding Responsive Emails with MJML Markup language

MJML is a markup language that is developed to alleviate the difficulties of responsive email coding. It can get really exhausting to design responsiv...

MJML is a markup language that is developed to alleviate the difficulties of responsive email coding.

It can get really exhausting to design responsive emails considering the rendering challenges and coding specifics that need to be taken care of.

In case you are finding it difficult to design responsive emails, MJML can prove to be of great help to you.

Advantages of MJML

The semantic syntax enables easy and straightforward coding for the email developers, thereby enhancing their productivity.

The rich standard components library makes the email codebase lighter and catalyzes the email development time.

MJML uses an open-source engine that helps you to generate remarkable HTML emails.

You can avoid the long HTML table nesting and email client specific CSS by using MJML.

Points to consider while using MJML

  • We cannot add media query or any custom class.
  • It is not possible to change the styling for mobile view.
  • There is no provision to hide the particular section from desktop and show different content for mobile.

Comparison between MJML Code and HTML Code

1. MJML Code

<mjml>
<mj-body>
<mj-section>
<mj-column>

<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

<mj-divider border-color="#F1C319"></mj-divider>

<mj-text font-size="20px" color="#F1C319" font-family="roboto">Welcome to workplace</mj-text>

</mj-column>
</mj-section>
</mj-body>
</mjml>

2. HTML Code

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<title> </title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}

.ReadMsgBody {
width: 100%;
}

.ExternalClass {
width: 100%;
}

.ExternalClass * {
line-height: 100%;
}

body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}

p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport {
width: 320px;
}
@viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.full-width-mobile {
width: 100% !important;
}
td.full-width-mobile {
width: auto !important;
}
}
</style>
</head>

<body>
<div style="">
<!--[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;vertical-align:top;">
<!--[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 outlook-group-fix" style="font-size:13px;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%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:100px;"> <img height="auto" src="/assets/img/logo-small.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;" width="100" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size:0px;padding:10px 25px;word-break:break-word;">
<p style="border-top:solid 4px #F45E43;font-size:1;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:1;margin:0px auto;width:550px;" role="presentation" width="550px"
>
<tr>
<td style="height:0;line-height:0;">
&nbsp;
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;color:#F45E43;"> Hello World </div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>

</tr>

</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>

</html>

Preview of the code

This is how the email will look like.

Wrapping Up

MJML helps you to create awesome emails that are compatible with all the major email clients, devices and web browsers.

Get in touch with experts at Uplers if you are looking for responsive emails for your business.

The following two tabs change content below.
Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing email design and coding companies. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers, and enjoys sharing his thoughts on the latest email marketing best practices.

Leave a Reply

YOU MAY ALSO LIKE

WE CAN ALSO HELP YOU WITH

Email Template
Productions

Transform your requirement into visually-appealing & high-converting email templates.

EMAIL OPERATION
SUPPORT

Focus on your business strategy; let us handle the day-to-day operation of your email campaigns.

DEDICATED
RESOURCE TEAM

Eliminate the woes of hiring and training for resources with our dedicated team of scalable email experts.

Digital
ASSETS

Get more from your paid marketing campaigns through conversion-driven landing pages and banners.