Hello,
I have been sending out some test emails to a variety of different email services (Gmail, Outlook Web, Office 365 Outlook Desktop). So far, when sent to Office 365 Outlook Desktop, multiple elements on the email are broken.
Broken Email Elements
So far, this ONLY happens in Office 365 Outlook Desktop. Other email services display the emails correctly. When viewing the email HTML in a browser, it also displays properly.
Anyone have any leads for what might be going on?
Same issue in another thread with a response from a MS Employee:
"We have an ongoing issue with the appearance of Marketing emails in Outlook. The issue is that the background images do not scale completely if the DPI is set to above 100%. This one particularly is resolved in the latest available update for the marketing application. Once the application has been updated, you will need to resend the marketing emails and test."
I have the same issue. I used the email code from above and it looks like this in Outlook 2016 Desktop:
I have created different mails from a blank template using only the Dynamics 365 Marketing editor.
Hi James,
Are you using Outlook desktop 2013?
I have tried Litmus for different Outlook desktop versions and only encountered display issue in outlook 2013 120 DPI. (Windows 10) as your screenshot shows.
Have you changed something in email contents?
Could you share me your original expected email in preview(and the changed code if possible), and what does "it displays is like attached" mean?
Sorry for missing something, I'll try again to make it more compatible with Outlook desktop.
Regards,
Clofly
Hello,
Thanks so much for taking the time. Unfortunately, it looks like outlook desktop likes the code even less than my original, as it displays is like attached.
Hi James,
Please let me know whether my redesigned email could display normally in Outlook. :)
Regards,
Clofly
Hi James,
I redesigned your email with marketing email builder, now it display well for both Gmail and Outlook desktop 2016.
Outlook desktop 2016 test result:
Full redesigned HTML code:
My Email Subject
Event Title Event Title Event Title
Weekday, Month 00, 20XX | 00:00 AM - 00:00 PM
Location Other Details
Event Description.
Hi {{contact.firstname}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Meet the speakers.
Massachusetts Biotechnology Council
{{msdyncrm_contentsettings.msdyncrm_addressmain}}
Contact Us | Update Subscription Preference
Regards,
Clofly
Hello,
Thanks for the answer! Here is a copy of the HTML I am using for testing. I activated the Litmus subscription and tested a bunch, seems that almost all versions of Outlook Desktop have this issue.
--------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="html-editor"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Mass Bio Event Invite</title> <meta name="referrer" content="never"> <style>table{align-content:center;width:600px;background-color:#fff}body{font-family:Calibri,Arial,sans-serif;font-size:14px;color:#636466;background-color:#e3f7ff}</style> </head> <body style="font-family:Calibri,Arial,sans-serif;font-size:14px;color:#636466;background-color:#e3f7ff"> <table aria-role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="align-content:center;width:600px;background-color:#fff"> <tbody> <tr> <td class="backgroundImage" property-reference="background:@hero-image;height:@hero-image-height;bgcolor:@hero-image-bgcolor" valign="top" height="200" bgcolor="#282828" background="mktdplp102wuda.azureedge.net/.../dk9qSS1JZiyPuqETqWN7bs1BaLFnD7csG-88kFEzuf0!" align="center"> <!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"><v:fill type="tile" src="mktdplp102wuda.azureedge.net/.../dk9qSS1JZiyPuqETqWN7bs1BaLFnD7csG-88kFEzuf0!" color="#282828" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]--> <div> <br> <div class="wrapperContainer title"> <div> <div class="imageWrapper"><img src="mktdplp102wuda.azureedge.net/.../tE9uUuzjKR89lI86p2LMhXJ0AtAtU77MjkT19-gG2xA!" style="max-height:100%;max-width:100%;height:50px!important" height="50"></div> </div> <div class="wrapper"> <p class="text-center"><span style="color:#fff"><span style="font-size:22px">Event Title Event Title Event Title</span><br> Weekday, Month 00, 20XX | 00:00 AM - 00:00 PM </span></p> <p class="text-center"><span style="color:#fff"><em>Location + Other Details</em></span></p> </div> </div> </div> </td> </tr> </tbody> </table> <table aria-role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="align-content:center;width:600px;background-color:#fff" width="600"> <tbody> <tr> <td> <div class="wrapperContainer title"> <!--[if gte mso 9]> <table align="center" style=";" ><tr> <![endif]--><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <!--[if gte mso 9]> <td valign="top" style=" display: block; min-height: 70px; min-width: 200px; width: 580px; height: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="580"> <![endif]--><div style="display:block;min-height:70px;min-width:200px;width:580px;height:100%;padding:10px;float:left"> <div style="text-align:center"><p style="text-align:center">Event Description.</p> </div></div><!--[if gte mso 9]> </td> <![endif]--> <div style="clear:both"></div> </div></div><!--[if gte mso 9]> </tr></table> <![endif]--><!--[if gte mso 9]> <table align="center" style=";" ><tr> <![endif]--><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <!--[if gte mso 9]> <td valign="top" style=" display: block; min-height: 70px; min-width: 200px; width: 580px; height: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="580"> <![endif]--><div style="display:block;min-height:70px;min-width:200px;width:580px;height:100%;padding:10px;float:left"> <div><table style="align-content:center;background-color:#fff;width:100%;vertical-align:middle" width="100%"><tbody><tr style="vertical-align:middle"><td style="nullbackground-color:#a3ce3e color: #fff border-color: #a3ce3e"><table border="0" cellpadding="0" cellspacing="0" width="100" align="center" style="align-content:center;width:100px;border-radius:0;background-color:#a3ce3e;color:#fff"><tbody><tr><td align="center" valign="center" height="30" style="vertical-align:middle;align-content:center;text-align:center;border-radius:0;background-color:#a3ce3e;color:#fff"><a class="buttonClass" data-msdyn-tracking-id="9c2f988d3d54e1570044381178" href="http://www.google.com" style="text-align:center;margin-right:auto;margin-left:auto;display:block;font-weight:700;background-color:#a3ce3e;line-height:30px;color:#fff;border-color:#a3ce3e;width:100px;height:30px;border-radius:0;mso-hide:none!important">Register</a></td></tr></tbody></table></td></tr></tbody></table></div><div><div align="center" class="dividerWrapper"> <table aria-role="presentation" style="align-content:center;background-color:#fff;padding:0;margin:0;width:100%" width="100%"> <tbody> <tr style="padding:0"> <td style="margin:0;padding:20px 0 10px;vertical-align:top"> <p style="margin:0;padding:0;border-bottom:3px solid silver;line-height:0;width:100%"><span> </span></p> </td> </tr> </tbody> </table> </div> </div><div style="text-align:center"><p style="text-align:center"><strong><span style="font-size:18px">Meet the Speakers</span></strong></p> </div></div><!--[if gte mso 9]> </td> <![endif]--> <div style="clear:both"></div> </div></div><!--[if gte mso 9]> </tr></table> <![endif]--><!--[if gte mso 9]> <table align="center" style=";" ><tr> <![endif]--><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <!--[if gte mso 9]> <td valign="top" style=" display: block; min-height: 70px; height: 100%; min-width: 60px; width: 178px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="178"> <![endif]--><div style="display:block;min-height:70px;height:100%;min-width:60px;width:178px;padding:10px;float:left"> <div><div align="Center" class="imageWrapper"><img height="150" src="mktdplp102wuda.azureedge.net/.../XcThN7Ol9hVJFIxkWuNw9fUAPocvB-uyffKTXjBrMLo!" style="max-height:100%;max-width:100%;margin-left:auto;margin-right:auto;float:none;height:150px!important;width:150px!important" width="178"> <div class="clear" style="clear:both;height:0;widht:0"></div> </div> </div></div><!--[if gte mso 9]> </td> <![endif]--> <!--[if gte mso 9]> <td valign="top" style=" display: block; min-height: 70px; height: 100%; min-width: 60px; width: 184px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="184"> <![endif]--><div style="display:block;min-height:70px;height:100%;min-width:60px;width:184px;padding:10px;float:left"> <div><div align="Center" class="imageWrapper"><img height="150" src="mktdplp102wuda.azureedge.net/.../-glvmbTN1pDUj7yU6VrUcQWnMxp_88B1ReHE7WqyhGo!" style="max-height:100%;max-width:100%;margin-left:auto;margin-right:auto;float:none;height:150px!important;width:150px!important" width="184"> <div class="clear" style="clear:both;height:0;widht:0"></div> </div> </div></div><!--[if gte mso 9]> </td> <![endif]--> <!--[if gte mso 9]> <td valign="top" style=" display: block; min-height: 70px; height: 100%; min-width: 60px; width: 178px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="178"> <![endif]--><div style="display:block;min-height:70px;height:100%;min-width:60px;width:178px;padding:10px;float:left"> <div><div align="Center" class="imageWrapper"><img height="150" src="mktdplp102wuda.azureedge.net/.../iDAl1-cUmeHRr8AGcIrdUiStwpweebxBCWsmg2KJ3vU!" style="max-height:100%;max-width:100%;margin-left:auto;margin-right:auto;float:none;height:150px!important;width:150px!important" width="178"> <div class="clear" style="clear:both;height:0;widht:0"></div> </div> </div></div><!--[if gte mso 9]> </td> <![endif]--> <div style="clear:both"></div> </div></div><!--[if gte mso 9]> </tr></table> <![endif]--><!--[if gte mso 9]> <table align="center" style=";" ><tr> <![endif]--><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <!--[if gte mso 9]> <td valign="top" style=" background-color: rgb(255, 255, 255); display: block; min-height: 70px; min-width: 200px; width: 580px; height: 100%; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; float: left;;vertical-align:top;" height="70px" width="580"> <![endif]--><div style="background-color:#fff;display:block;min-height:70px;min-width:200px;width:580px;height:100%;padding:10px;float:left"> <div><div align="center" class="dividerWrapper"> <table aria-role="presentation" style="align-content:center;background-color:#fff;padding:0;margin:0;width:100%" width="100%"> <tbody> <tr style="padding:0"> <td style="margin:0;padding-left:0;padding-right:0;padding-top:5px;padding-bottom:5px;vertical-align:top"> <p style="margin:0;padding:0;border-bottom:3px solid silver;line-height:0;width:100%"><span> </span></p> </td> </tr> </tbody> </table> </div> </div><div style="text-align:center"><p style="text-align:center"><strong>Massachusetts Biotechnology Council</strong><br> <strong><a href="www.massbio.org/.../contact" style="color:#636466;text-align:center">Contact Us</a></strong> | <strong><a href="{{msdyncrm_contentsettings.msdyncrm_subscriptioncenter}}" style="color:#636466;text-align:center">Update Subscription Preferences</a></strong></p> </div></div><!--[if gte mso 9]> </td> <![endif]--> <div style=""> </div></div></div><!--[if gte mso 9]> </tr></table> <![endif]--><div style="clear:both"></div><strong><a href="http://www.massbio.org" style="color:#636466 >Update Subscription Preferences</a></strong></p>
</div></div> <div style="> </a></strong></div></td> </tr> </tbody> </table> </body></html>
Hi James,
-> Because different email clients(Gmail, Outlook web, Outlook desktop) or OS(Windows, Mac) or browsers(Chrome, Firefox) have different display rules to render HTML email.
You could use Inbox preview feature to test final result for potential recipient devices:
-> For your own issue, could you share me your marketing email HTML code if possible?
Then I'll try to modify it to be display normally in Outlook desktop.(Version of your Outlook desktop would also be a potential factor)
-> However,it could be said that there was no general solution to display a marketing email normally among all devices or softwares without preview test.
Now that your marketing email could display well for other email devices,
so as the notification of Outlook desktop said: if there are problems with how this message is displayed, click it to view in browser.
The default IE may also had display issue due to its render engine, you could click integrated link in marketing email to view it in Chrome or Firefox.
Regards,
Clofly
André Arnaud de Cal...
291,971
Super User 2025 Season 1
Martin Dráb
230,846
Most Valuable Professional
nmaenpaa
101,156