I have used MJML to create 2 different email layouts, one with one button and another one with 2 buttons. These emails look very good in most clients (webmails, gmail, outlook web, ...) But in the outlook client it looks very bad.
I read that width="" is not that well supported going from MJML to HTML for Outlook, so we deleted the width parameter everywhere in MJML. Apart from that we use nothing out of the ordinary in our emails.
This is the MJML:
<mjml>
<mj-body background-color="#f2f8f9">
<mj-section background-color="#77c5d5" padding-bottom="0px" padding-top="0">
<mj-column vertical-align="top">
<mj-image src="https://www.goomlandscapes.co.nz/wp-content/uploads/2018/08/logo-placeholder.png" alt="logo" align="center" border="none" width="200px" padding-left="0px" padding-right="0px" padding-bottom="10px" padding-top="10px"></mj-image>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF" padding-bottom="0px" padding-top="0">
<mj-column vertical-align="top">
<mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="15px">Welkom bij WebsiteName</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF" padding-bottom="20px">
<mj-column vertical-align="top">
<mj-text align="left" color="#000000" font-size="18px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
<span style="color:#000000">Dag John,</span>
</mj-text>
<mj-text align="left" color="#000000" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
Bedankt om te registreren bij ons. <br/>
Je profiel is aangemaakt en klaar voor gebruik. Je kan inloggen met je emailadres: {{email}}.<br/><br/>
Met vriendelijke groeten.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#FFFFFF" padding-bottom="20px">
<mj-column vertical-align="top">
<mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#FFFFFF" border-radius="12px" border="2px solid #D9E9EB;" color="#000000" font-family="open Sans Helvetica, Arial, sans-serif">Doe iets!</mj-button>
</mj-column>
<mj-column vertical-align="top">
<mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#FFFFFF" border-radius="12px" border="2px solid #D9E9EB;" color="#000000" font-family="open Sans Helvetica, Arial, sans-serif">Doe iets!</mj-button>
</mj-column>
</mj-section>
<mj-section padding-bottom="0px" padding-top="0">
<mj-column>
<mj-image src="https://3263vihaxx3jy9zn2ikegau7-wpengine.netdna-ssl.com/wp-content/uploads/2018/12/footer-bg-placeholder.jpg" alt="footer"></mj-image>
</mj-column>
</mj-section>
<mj-section padding-bottom="0px" padding-top="0">
<mj-column vertical-align="middle">
<mj-social font-size="14px" icon-size="25px" mode="horizontal">
<mj-social-element name="facebook" href="xyz"></mj-social-element>
<mj-social-element name="instagram" href="xyz"></mj-social-element>
<mj-social-element name="linkedin" href="xyz"></mj-social-element>
</mj-social>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text align="center" font-size="10px" padding-top="0">Copyright 2021 - WebsiteName. Alle rechten voorbehouden.</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
The preview in MJML looks like this:
So the HTML this generates is put into our system and send via SendGrid.
The resulting email looks like this in Outlook:
What is happening for this email to look so bad in Outlook client? (it also looks similarly bad in Windows default Mail client)