UI distorted in Outlook

Question

My application generates email which opens perfectly when opened in browser(example chrome). But when the same email is opened in Microsoft Outlook, it gets distorted heavily(like text is not visible, button text gets wrapped). Any suggestions what could be the problem. I have verified that all the scripting(js and css) has been done inline, ie on the .aspx page. Email when opened in Outlook :

Email when opened in Web browser :

HTML Code

<table class="footer" style="border-collapse: collapse;border-spacing: 0;width: 100%;background-color: #f6f9fb">
  <tbody>
    <tr>
      <td class="inner" style="padding: 0;vertical-align: top;padding-top: 60px;padding-bottom: 55px" align="center">
        <table class="cols" style="border-collapse: collapse;border-spacing: 0;width: 600px">
          <tbody>
            <tr>
              <td class="left" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 22px;text-align: left;width: 35%;padding-right: 5px;color: #b3b3b3;font-family: sans-serif">
                <table class="social" style="border-collapse: collapse;border-spacing: 0">
                  <tbody>
                    <tr>
                      <td colspan="3">
                        <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 4px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"><strong>Test Inc.</strong><br/>1234 Road Parkway<br/>Houston, Texas 77077<br/>1-811-811-9611<br/><br/>
                          <a href="SomeURL"><img style="border: 0;-ms-interpolation-mode: bicubic;display: block;max-width: 200px" src="SomeURL" alt="myatomDirect" width="135" height="58" border="0" /></a>
                        </p>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="right" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 5px;text-align: right;width: 65%;padding-left: 5px;color: #b3b3b3;font-family: sans-serif">
                <div id="campaign">
                  <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 10px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;">You are receiving this email because you registered for an account on
                    <a href="SomeURL"></a>. Please do not reply to this message; it was sent from an unmonitored e-mail address. This message is a service e-mail related to your use of . For general inquiries or to request support with your account, please email us at
                    <a href="SomeURL">SomeURL</a>.</p>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 15px;text-align: center;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"></p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Any suggestions will highly appreciated.

A webbrowser can parse much more complex html and css than an email client. Make the template as simple as possible and get rid of all the inline css. — VDWWD, Mar 26 '18 at 12:24

score 1 · Answer 1 · answered Feb 21 '19 at 07:03

Since Outlook uses Microsoft Word to render the emails, therefore there are certain issues that might arise in Outlook and not in any other Email client. So you need to be extra careful with your emails.

<table class="cols" style="border-collapse: collapse; border-spacing: 0; width: 600;">

Try using the width attribute without the px. This has been discussed here

Tips to bridge Outlook hurdles

In case the primary font is not available on the subscriber’s device, Outlook tends to render the entire email copy in Times New Roman, ignoring the specified fallback font. In such cases, you need to force Outlook to render the fallback font that is specified using a conditional code.

<!--[if mso]> <style> h1 {
  font-family: Primary font, Fallback font;
} </style><![endif]-->

Outlook will not automatically wrap text into the tables you create. Instead, table cells will widen to try and accommodate large URLs or other unbroken text strings. To avoid this, you can include the following:

<td style="word-break:break-all;">

Hope this works for you.

UI distorted in Outlook

1 Answers1