Context :
I am generating HTML files using MJML to send emails from a mass mailing platform.
MJML add mso conditional statements in the HTML file to make the display compatible with outlook (<!--[if mso]><![endif]-->).
When I send the HTML file from a mass mailing platform, it is well displayed in Gmail, Yahoo mail, Outlook mail web, but has problems in outlook (ios/android/desktop)
When I send emails from those platforms, the outlook conditional statements are removed from the file and that's why it is not interpreted in outlook.
When the email is sent from an outlook client the conditional statements are interpreted and the it is well displayed in each outlook clients, Yahoo mail web, gmail. However, in Yahoo mail mobile ios and android it's not perfect, but acceptable.
On mobile, I don't want the columns to be crushed. The version must be the same as on desktop.
Due to business needs I am forced to use a certain mass mailing platform
What i've tried :
- Sent from Brevo, Litmus, Hubspot, ... = wrong display in outlook
- Sent from Outlook = nice on almost every client
- Use only compatible MJML markups with outlook
- Tried many MJML and CSS configurations but since mso conditional statements doesn't work its useless
- Didn't find topic about this particular problem
- Sent different prepared HTML templates that I found on some websites, obviously they are not well displayed in outlook desktop
Screenshots :
The mailing platform editor after pasting the HTML code
The email sent from a mailing platform to outlook desktop
The email sent from outlook to outlook desktop
A piece of HTML email to reproduce the problem :
<!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>PLOPI PLOP</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; }
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]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-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%; }
.mj-column-per-15 { width:15% !important; max-width: 15%; }
.mj-column-per-85 { width:85% !important; max-width: 85%; }
.mj-column-per-25 { width:25% !important; max-width: 25%; }
.mj-column-per-75 { width:75% !important; max-width: 75%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
.moz-text-html .mj-column-per-15 { width:15% !important; max-width: 15%; }
.moz-text-html .mj-column-per-85 { width:85% !important; max-width: 85%; }
.moz-text-html .mj-column-per-25 { width:25% !important; max-width: 25%; }
.moz-text-html .mj-column-per-75 { width:75% !important; max-width: 75%; }
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
<style type="text/css">
.crdsbgrubg p, .tifdhtjlfh p, .oiejfoirsgd p {
margin: 0;
}
</style>
</head>
<body style="word-spacing:normal;">
<div><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:800px;" width="800" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 800px;"> </div>
<!--[if mso | IE]></td></tr></table><![endif]--> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="head-section-outlook" role="presentation" style="width:800px;" width="800" bgcolor="#26344E" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="crdsbgrubg" style="background: #26344E; background-color: #26344e; margin: 0px auto; max-width: 800px;"> </div>
<!--[if mso | IE]></td></tr></table><![endif]--> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:800px;" width="800" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 800px;"> </div>
<!--[if mso | IE]></td></tr></table><![endif]--> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:800px;" width="800" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin: 0px auto; max-width: 800px;">
<table style="width: 100%;" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-bottom: 0; padding-top: 20px; text-align: center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:800px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0; line-height: 0; text-align: left; display: inline-block; width: 100%; direction: ltr;"><!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><![endif]--> <!--[if mso | IE]><td style="vertical-align:top;width:200px;" ><![endif]-->
<div class="mj-column-per-25 mj-outlook-group-fix desktop-only" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 25%;">
<table style="vertical-align: top; height: 161px;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 116px;">
<td style="background: #f4f4f4; font-size: 0px; padding: 15px; word-break: break-word; height: 116px;" align="left">
<div style="font-family: Calibri, Helvetica, Trebuchet; font-size: 14px; line-height: 18px; text-align: left; color: #000000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</td>
</tr>
<tr style="height: 1px;">
<td style="font-size: 0px; padding: 10px 0px; word-break: break-word; height: 1px;" align="center">
<p style="border-top: solid 1px lightgrey; font-size: 1px; margin: 0px auto; width: 100%;"><br /></p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px lightgrey;font-size:1px;margin:0px auto;width:200px;" role="presentation" width="200px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]--></td>
</tr>
<tr style="height: 44px;">
<td style="background: #f4f4f4; font-size: 0px; padding: 15px; word-break: break-word; height: 44px;" align="left">
<div style="font-family: Calibri, Helvetica, Trebuchet; font-size: 14px; line-height: 18px; text-align: left; color: #000000;">
<p>NOTE 2</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><![endif]--> <!--[if mso | IE]><td style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-75 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 75%;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="vertical-align: top; padding: 0;">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="tifdhtjlfh" style="font-size: 0px; padding: 0px 25px 0px 25px; word-break: break-word;" align="left">
<div style="font-family: Calibri, Helvetica, Trebuchet; font-size: 18px; font-weight: bold; line-height: 22px; text-align: left; color: #000000;">
<p><strong>Elementum nibh tellus molestie nunc non blandit massa enim nec. Nisi vitae suscipit tellus mauris a diam maecenas sed</strong></p>
</div>
</td>
</tr>
<tr>
<td style="font-size: 0px; padding: 0px 25px; word-break: break-word;" align="left">
<div style="font-family: Calibri, Helvetica, Trebuchet; font-size: 16px; line-height: 22px; text-align: left; color: #000000;">
<p><span style="color: #000000;"><span style="font-size: 12pt;"><span style="font-size: 13.0pt;">Mi eget mauris pharetra et ultrices. Mi eget mauris pharetra et ultrices neque ornare. Urna molestie at elementum eu facilisis sed odio. Auctor eu augue ut lectus arcu bibendum at varius vel. Integer eget aliquet nibh praesent tristique magna sit amet purus. At quis risus sed vulputate odio ut enim. Vitae justo eget magna fermentum iaculis eu non. Lectus proin nibh nisl condimentum id. Sit amet porttitor eget dolor morbi non arcu risus quis. Arcu bibendum at varius vel pharetra. Enim neque volutpat ac tincidunt vitae semper. Massa sed elementum tempus egestas sed sed.</span></span></span></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]--></div>
<!--[if mso | IE]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]--></div>
</body>
</html>