Outlook Email Not Rendering Correctly

James_Walsh · ‎01-21-2020

Hello,

I have created an email template within Marketo. When previewing and sending tests it looks great in all platforms, (mobile Gmail, Yahoo etc) except for Outlook. I know Outlook is always wonky when it comes to HTML and emails, but in this case it seems worse than normal. I've talked to a few developers on my team and they cannot seem to solve. Was wondering if anyone has a solution.

Screenshots attached below:

Outlook Rendering

How it previews in Marketo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 <meta content="width=device-width" name="viewport" />
 <meta content="IE=edge" http-equiv="X-UA-Compatible" />
 <meta name="color-scheme" content="light dark">
 <meta name="supported-color-schemes" content="light dark">
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
 <style type="text/css">
 :root {
 color-scheme: light dark;
 supported-color-schemes: light dark;
 }
 </style>
 <style type="text/css">
 body {
 margin: 0;
 padding: 0;
 font-family: 'Roboto', Tahoma, Verdana, Segoe, sans-serif;
 color: #282b3e;
 line-height: 1.5;
 background-color: #fafafa;
 }

 table {
 background-color: transparent;
 }

 table,
 td,
 tr {
 vertical-align: top;
 border-collapse: collapse;
 }

 .block-grid {
 margin: 0 auto;
 min-width: 320px;
 max-width: 500px;
 background-color: #fff;
 }

 * {
 line-height: inherit;
 }

 a[x-apple-data-detectors=true] {
 color: inherit !important;
 text-decoration: none !important;
 }
 .button-container {
 padding: 10px 10px 10px 15px;
 }
 .button-container .primaryCTA {
 text-decoration: none;
 display: inline-block;
 color: #fff;
 background-color: #EC6453;
 width: auto;
 border: 1px solid #EC6453;
 text-align: center;
 mso-border-alt: none;
 padding: 5px 55px;
 font-size: 17px;
 line-height: 34px;
 mso-line-height-alt: 32px;
 }
 .button-container .secondaryCTA {
 font-size: 16px;
 line-height: 2;
 mso-line-height-alt: 32px;
 color: #282b3e;
 text-decoration: none;
 display: inline-block;
 width: auto;
 border: 1px solid #EC6453;
 padding: 5px 25px;
 text-align: center;
 mso-border-alt: none;
 word-break: keep-all;
 }
 #JH_DTC_Footer_Unsubscribe a {
 font-decoration: none;
 color: #fff;
 }
 </style>
 <style id="media-query" type="text/css">
 @media (max-width: 520px) {

 .block-grid,
 .col {
 min-width: 320px !important;
 max-width: 100% !important;
 display: block !important;
 }

 .block-grid {
 width: 100% !important;
 }

 .col {
 width: 100% !important;
 }

 .col>div {
 margin: 0 auto;
 }

 img.fullwidth,
 img.fullwidthOnMobile {
 max-width: 100% !important;
 }

 .no-stack .col {
 min-width: 0 !important;
 display: table-cell !important;
 }

 .no-stack.two-up .col {
 width: 50% !important;
 }

 .no-stack .col.num3 {
 width: 33% !important;
 }

 .no-stack .col.num8 {
 width: 66% !important;
 }

 .no-stack .col.num4 {
 width: 25% !important;
 }

 .no-stack .col.num6 {
 width: 50% !important;
 }

 .no-stack .col.num9 {
 width: 75% !important;
 }

 .video-block {
 max-width: none !important;
 }

 .mobile_hide {
 min-height: 0px;
 max-height: 0px;
 max-width: 0px;
 display: none;
 overflow: hidden;
 font-size: 0px;
 }

 .desktop_hide {
 display: block !important;
 max-height: none !important;
 }
 }

 @media (prefers-color-scheme: dark) {
 body {
 color: #282b3e;
 background-color: #555;
 }
 table {
 background: transparent;
 }
 .block-grid {
 background-color: white;
 }
 }
 [data-ogsc] body {
 color: #282b3e;
 background-color: #555;
 }
 [data-ogsb] table {
 background: transparent;
 }
 [data-ogsb] .block-grid {
 background-color: white;
 }
 </style>
</head>

<body style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%;">
 <table cellpadding="0" cellspacing="0" class="mktoContainer" id="JH_DTC_Beefree_test_Template" role="presentation" style="table-layout: fixed; vertical-align: top; min-width: 320px; margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" valign="top" width="100%">
 <tr class="mktoModule" id="JH_DTC_Header_Logo_Module" mktoName="JH DTC Header Logo Module">
 <td>
 <div style="background-color: #282B3E;">
 <div align="center" style="display: table; width: 100%; padding: 0">
 <div class="mktoImg" id="JH_DTC_Header_Logo" mktoName="JH DTC Header Logo" mktoImgSrc="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png" mktoImgWidth="250">
 <img style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 250px; display: block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png">
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Header_Image_Module" mktoName="JH DTC Header Image Module">
 <td>
 <div align="center" class="block-grid">
 <div class="mktoImg" id="JH_DTC_Header_Image" mktoName="JH DTC Header Image" mktoImgSrc="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg" mktoImgWidth="500">
 <img style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 500px; display: block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg">
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Body_Copy_Module" mktoName="JH DTC Body Copy Module">
 <td>
 <div class="block-grid">
 <div style="font-size: 24px; color: #5e6073; font-weight: bold; mso-line-height-alt: 36px; margin: 0 ;padding: 15px 20px 0px 20px;">
 <div class="mktoText" id="JH_DTC_Header_Text" mktoName="JH DTC Header Text">
 Header
 </div>
 </div>
 <div style="font-size: 16px; mso-line-height-alt: 24px; margin: 0 ;padding: 10px 20px 5px 20px;">
 <div class="mktoText" id="JH_DTC_Body_Copy_Upper" mktoName="JH DTC Body Copy Upper">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. Nam non venenatis nulla. Vivamus id arcu viverra, tempus elit vitae, porttitor massa. Nullam faucibus
 nibh in tellus vulputate, in egestas elit dapibus.
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_CTA_Module" mktoName="JH DTC CTA Module">
 <td>
 <div class="block-grid">
 <div align="center" class="button-container">
 <div class="mktoText" id="JH_DTC_CTA_Button" mktoName="JH DTC CTA Button">
 <button class="primaryCTA" onclick="INSERT_LINK_HERE">
 Learn more
 </button>
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Body_Copy_Lower_Module" mktoName="JH DTC Body Copy Lower Module">
 <td>
 <div class="block-grid">
 <div style="font-size: 16px; mso-line-height-alt: 24px; margin: 0 ;padding: 10px 20px 5px 20px;">
 <div class="mktoText" id="JH_DTC_Body_Copy_Lower" mktoName="JH DTC Body Copy Lower">
 Your Coverage Coach<br />
 (800) 803-7998
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Quote_Bar_Module" mktoName="JH DTC Quote Bar Module">
 <td>
 <div div class="mktoText" id="JH_DTC_Quote_Table" mktoName="JH DTC Quote Table" style="margin: 0 auto; min-width: 320px; max-width: 500px; background-color: #0000C1; color: #fff; display: table">
 <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top;">
 <div style=" padding: 25px 15px 15px 15px;">
 <p style="font-size: 12px; mso-line-height-alt: 18px; margin: 0; font-weight: bold">
 QUOTE FOR:
 </p>
 <p style="font-size: 16px; mso-line-height-alt: 24px; margin: 0;">
 {{lead.Full Name:default=Pat Smith}}
 </p>
 </div>
 </div>
 <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; border-left: 1px solid #fff;">
 <div style="line-height: 1.2; padding: 25px 15px 15px 15px;">
 <p style="font-size: 20px; margin: 0; font-weight: bold">
 {{lead.Current Premium:default=$50.00}}/
 </p>
 <p style="font-size: 12px; margin: 0;">
 month
 </p>
 </div>
 </div>
 <div style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; border-left: 1px solid #fff;">
 <div style="line-height: 1.2; padding: 25px 15px 15px 15px;">
 <p style="font-size: 20px; margin: 0; font-weight: bold">
 {{lead.Face Amount:default=$200,000}}
 </p>
 <p style="font-size: 12px; margin: 0;">
 COVERAGE
 </p>
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Horizontal_Rule" mktoName="JH DTC Horizontal Rule">
 <td>
 <div class="block-grid">
 <div style="border:0px solid transparent; padding: 15px 0;">
 <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" />
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_1Col" mktoName="JH DTC 1Col">
 <td>
 <div class="block-grid">
 <div class="col num3" style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 164px;">
 <div align="center" class="mktoImg" id="JH_DTC_1Col_Image" mktoName="JH DTC Col Image" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/square-test.jpg" style="padding:5px 0 5px 0;">
 <img align="center" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/square-test.jpg" style="border: 0; height: auto;" width="166" />
 </div>
 </div>
 <div class="col num8" style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 328px; width: 333px;">
 <div style="padding: 5px 0">
 <div style="padding:10px 15px">
 <div class="mktoText" id="JH_DTC_1Col_Title" mktoName="JH DTC 1Col Title" style="font-size: 16px; mso-line-height-alt: 24px; margin: 0; font-weight: bold">
 Headline
 </div>
 <p class="mktoText" id="JH_DTC_1Col_Text" mktoName="JH DTC 1Col Text" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt.
 </p>
 </div>
 <div align="left" class="button-container">
 <div class="mktoText" id="JH_DTC_Headline_Button" mktoName="JH DTC Headline Button">
 <button class="secondaryCTA" onclick="INSERT_LINK_HERE">
 Learn more
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="block-grid">
 <div style="border:0px solid transparent; padding: 15px 0;">
 <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" />
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Testimonial_Module" mktoName="JH DTC Testimonial Module">
 <td>
 <div class="block-grid" style="background-color: #0000c1;">
 <div class="mktoText" id="JH_DTC_Testimonial" mktoName="JH DTC Testimonial" style="color: #fff; font-size: 16px; mso-line-height-alt: 21px; margin: 0; padding: 25px 20px 20px 20px; font-style: italic;">
 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt. Nam non venenatis nulla."
 </div>
 </div>
 <div class="block-grid">
 <div style="border-collapse: collapse;display: table;width: 100%;">
 <div class="col num4" style="display: table-cell; vertical-align: top; max-width: 320px; min-width: 123px; width: 125px; padding: 10px 0 5px 0px; text-align: center;">
 <div class="mktoImg" id="JH_DTC_Testimonial_Image" mktoName="JH DTC Testimonial Image" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/avatar_1.png">
 <img style="border: 0; height: auto; width: 100%; max-width: 81px;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/avatar_1.png" />
 </div>
 </div>
 <div class="col num9" style="display: table-cell; vertical-align: top; min-width: 320px; max-width: 369px; padding: 20px 15px 15px 15px;">
 <div class="mktoText" id="JH_DTC_Testimonial_Name" mktoName="JH DTC Testimonial Name" style="font-size: 16px; mso-line-height-alt: 18px; font-style: italic; font-weight: bold;">
 Paul, San Diego
 </div>
 <div class="mktoText" id="JH_DTC_Testimonial_Type" mktoName="JH DTC Testimonial Type" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;">
 DTC Insurance customer
 </div>
 </div>
 </div>
 </div>
 <div class="block-grid">
 <div style="padding: 15px 0;">
 <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" />
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_3Col" mktoName="JH DTC 3 Col">
 <td>
 <div class="block-grid three-up" style="display: table; margin: 0 auto; min-width: 320px; max-width: 500px;">
 <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0">
 <div class="mktoImg" id="JH_DTC_3Col_Image1" mktoName="JH DTC 3Col Image1" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/apple-01.png">
 <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/apple-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" />
 </div>
 <div style="padding:10px 15px; text-align: center;">
 <div class="mktoText" id="JH_DTC_3Col_Title1" mktoName="JH DTC 3Col Title1" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;">
 Headline
 </div>
 <div class="mktoText" id="JH_DTC_3Col_Text1" mktoName="JH DTC 3Col Text1" style="font-size: 14px; mso-line-height-alt: 21px;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus.
 </div>
 </div>
 </div>
 <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0">
 <div class="mktoImg" id="JH_DTC_3Col_Image2" mktoName="JH DTC 3Col Image2" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/bday-01.png">
 <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/bday-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" />
 </div>
 <div style="padding:10px 15px; text-align: center;">
 <div class="mktoText" id="JH_DTC_3Col_Title2" mktoName="JH DTC 3Col Title2" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;">
 Headline
 </div>
 <div class="mktoText" id="JH_DTC_3Col_Text2" mktoName="JH DTC 3Col Text2" style="font-size: 14px; mso-line-height-alt: 21px;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus.
 </div>
 </div>
 </div>
 <div class="col num3" style="max-width: 320px; min-width: 166px; display: table-cell; vertical-align: top; padding: 5px 0">
 <div class="mktoImg" id="JH_DTC_3Col_Image3" mktoName="JH DTC 3Col Image3" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/family-01.png">
 <img class="center autowidth" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/family-01.png" style="border: 0; height: auto; width: 100%; max-width: 72px; display: block; margin: 0 auto;" />
 </div>
 <div style="padding:10px 15px; text-align: center;">
 <div class="mktoText" id="JH_DTC_3Col_Title3" mktoName="JH DTC 3Col Title3" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold;">
 Headline
 </div>
 <div class="mktoText" id="JH_DTC_3Col_Text3" mktoName="JH DTC 3Col Text3" style="font-size: 14px; mso-line-height-alt: 21px;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus.
 </div>
 </div>
 </div>
 </div>
 <div class="block-grid">
 <div style="padding: 15px 0;">
 <hr style="border-top: 1px solid #ededed; border-bottom: 0; width: 95%; margin: 0 auto;" />
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_2Col" mktoName="JH DTC 2 Col">
 <td>
 <div class="block-grid two-up" style="margin: 0 auto; min-width: 320px; max-width: 500px;">
 <div class="col num3" style="max-width: 320px; min-width: 247px; display: table-cell; vertical-align: top; padding: 10px 16px 5px 0">
 <div class="mktoImg" id="JH_DTC_2Col_Image1" mktoName="JH DTC 2Col Image1" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/mountains.jpg" style="padding-right: 10px;">
 <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/mountains.jpg" style="border: 0; height: auto; width: 100%; max-width: 240px; display: block; text-align: center" />
 </div>
 <div style="padding: 10px 15px;">
 <div class="mktoText" id="JH_DTC_2Col_Title1" mktoName="JH DTC 2Col Title1" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold">
 Headline
 </div>
 <div class="mktoText" id="JH_DTC_2Col_Text1" mktoName="JH DTC 2Col Text1" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt.
 </div>
 </div>
 <div align="left" class="button-container">
 <div class="mktoText" id="JH_DTC_2Col_Button1" mktoName="JH DTC 2Col Button1">
 <button class="secondaryCTA" onclick="INSERT_LINK_HERE">
 Learn more
 </button>
 </div>
 </div>
 </div>
 <div class="col num3" style="max-width: 320px; min-width: 247px; display: table-cell; vertical-align: top; padding: 10px 0 5px 0;">
 <div class="mktoImg" id="JH_DTC_2Col_Image2" mktoName="JH DTC 2Col Image2" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/plants.jpg" style="padding-right: 10px;">
 <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/plants.jpg" style="border: 0; height: auto; width: 100%; max-width: 240px; display: block; text-align: center" />
 </div>
 <div style="padding: 10px 15px;">
 <div class="mktoText" id="JH_DTC_2Col_Title2" mktoName="JH DTC 2Col Title2" style="font-size: 16px; mso-line-height-alt: 24px; font-weight: bold">
 Headline
 </div>
 <div class="mktoText" id="JH_DTC_2Col_Text2" mktoName="JH DTC 2Col Text2" style="font-size: 14px; mso-line-height-alt: 21px; margin: 0;">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis erat ut est dapibus, quis imperdiet turpis tincidunt.
 </div>
 </div>
 <div align="left" class="button-container">
 <div class="mktoText" id="JH_DTC_2Col_Button2" mktoName="JH DTC 2Col Button2">
 <button class="secondaryCTA" onclick="INSERT_LINK_HERE">
 Learn more
 </button>
 </div>
 </div>
 </div>
 </div>
 </td>
 </tr>
 <tr class="mktoModule" id="JH_DTC_Footer" mktoName="JH DTC Footer">
 <td>
 <div class="block-grid" style="background-color: #282B3E; display: table; padding: 10px 0 5px 0; color: #fff;">
 <div class="mktoImg" id="JH_DTC_Footer_Logo" mktoName="JH DTC Footer Logo" mktoImgLink="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png">
 <img src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/JohnHancock_white%20(1)_1.png" style="border: 0; height: auto; width: 100%; max-width: 200px; display: block; margin: 10px auto;" />
 </div>
 <div class="mktoText" id="JH_DTC_Footer_Text" mktoName="JH DTC Footer Text" style="font-size: 12px; mso-line-height-alt: 14px; line-height:1.2;padding: 10px 15px 15px 15px;">
 1 Quotes expire after 30 days and are subject to change based on the information provided by you, the age of the quote and your age at the time the quote was generated.
 <br />
 John Hancock’s Final Expense Life Insurance with Guaranteed Acceptance is a level premium Whole Life Policy, only issued to individuals from age 55 to 80. It provides a limited graded death benefit for the first two years (110% of
 premiums paid).
 <br />
 The policy contains specific exclusions, limitations, terms for keeping it in force, and termination provisions. Its availability and terms may vary by state. Contact John Hancock and its agents for further details, as well as additional
 information on policy costs and features.
 <br />
 Insurance policies are sold by John Hancock Life Insurance Company (U.S.A.), Boston, MA. 02116
 <br />
 Depending on state of issuance, this policy is sold under policy form # ICC18 18FEWL or 18FEWL.
 <br />
 Copyright 2019 John Hancock. All rights reserved.
 </div>
 <hr style="width: 92%" />
 <div div class="mktoText" id="JH_DTC_Footer_Unsubscribe" mktoName="JH DTC Footer Unsubscribe" style="font-size: 14px; line-height: 1.2; text-align: center; mso-line-height-alt: 17px; margin: 0; padding: 10px;">
 Manage your Preferences or <a href="{{system.unsubscribeLink}}">Unsubscribe</a>.
 </div>
 </div>
 </td>
 </tr>
 </table>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

SanfordWhiteman · ‎01-21-2020

Screenshots are going to be invaluable for getting community input.

James_Walsh · ‎01-21-2020

Hi Sanford,

I attached some images of how the email is previewing in Marketo vs how it is rendering in Outlook. Let me know if this helps.

SanfordWhiteman · ‎01-21-2020

Please remove the attachments and paste the images inline. Not all Community users can see attachments.

James_Walsh · ‎01-21-2020

Updated.

Mark_Price · ‎01-21-2020

Looking at your code it is my recommendation to rename all images replacing any spaces or '%20' values with an underscore ( _ ) or dash ( - ) then re-upload them to Marketo. Then update your code accordingly.

When troubleshooting this type of issue- I always check and make sure there are no image names with a space because it can cause formatting issues in Outlook. After spending hours tracking this down in the past, it's now the first thing I check.

Grace_Brebner3 · ‎01-21-2020

Hey James,

Outlook can be finnicky, but at a quick scan I'm going to guess that one of the issues you're having here is because your root table wrapping all content has a minimum width set, but no maximum width set. With the main setting at 100% width and nothing to max that width out, this is likely to be the main culprit of the issues you're seeing.

To ensure emails render well on Outlook you often also need to be using MSO conditional html within your email, I can't see any conditional code in your template.

I would start by adding a max-width to your wrapping table, and, if you continue to have issues, you may need to look at implementing some MSO conditional code.

Hope that helps.

Adam_Berlin · ‎01-22-2020

I'm not sure if this is allowed (and if not, please let me know) but there are some great services that aren't too expensive that help with exactly this sort of thing. One in particular that I use, EmailOnAcid, has an option to upload your HTML and it will determine for you what will flag in certain ESPs (Gmail, Hotmail, Outlook, etc.). It will then give you a corrected version of the code so you can plug it back in to Marketo. Basically, it saves a lot of legwork and helps you ensure your marketing is hitting equally across the board.

Éric_Vaillancou · ‎01-23-2020

You need to format your image correctly and use supported inline CSS. This is your code for the top banner:

<img style="text-decoration: none; -ms-interpolation-mode: bicubic; border: 0; height: auto; width: 100%; max-width: 500px; display: block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg">‍

You should use this code instead:

<img class"classForResizingImg" width="500" border="0" alt="Image Description" style="text-decoration:none; -ms-interpolation-mode:bicubic; border:0; height:auto; width:500px; display:block;" src="https://programs.johnhancockinsurance.com/rs/014-PBZ-107/images/email-hero-1.jpg">‍‍‍

- You need a width attribute (width="500")

- Do not use a height attribute

- You need a class to resize your images (See below)

- You need a border attribute (border="0")
- You need an alt attribute (alt="Image description")
- You need an inline CSS width too (style="width:500px"....)

- You need an inline CSS height too (style="height:auto"....)

- You can't use max-width in inline CSS, it's not supported

And here is an example of what you need in your Head CSS to resize your image:

@media only screen and (max-width:700px) {
            img.classForResizingImg {width:100%!important; height:auto!important;}
        }
    </style>‍‍‍‍‍‍‍‍

Hope it helps,

Eric

Éric_Vaillancou · ‎01-23-2020

Also, you use a really large image. 1920x1042 px for an email is large and heavy. You can resize your image at 2x. For example, if your banner is 500px wide, have a physical width of 1000px max.

Outlook Email Not Rendering Correctly

Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly

Re: Outlook Email Not Rendering Correctly