Customer experience | Sales, Customer Insights,...

Marketing Emails Appear Broken in Office 365 Outlook Desktop

(0) Share

Report

Posted on by James Robe

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

Button height collapses to height of text, not pre-specified height in the Marketing Email Builder
Hero Image does not show up
Images appear flattened or distorted from original aspect ratio

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?

I have the same question (0)

All responses (8)

Answers (0)

cloflyMao 25,210 on at

Like (0)

Report

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:

https://docs.microsoft.com/en-us/dynamics365/marketing/email-preview#use-the-advanced-inbox-preview-feature

-> 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

Was this reply helpful? Yes No
James Robe 60 on at

Like (0)

Report

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">  <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"> <div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <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> <div style="clear:both"></div> </div></div><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <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> <div style="clear:both"></div> </div></div><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <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> <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> <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> <div style="clear:both"></div> </div></div><div><div style="display:block;width:100%;height:100%"> <div style="clear:both"></div> <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> <div style=""> </div></div></div><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>

Was this reply helpful? Yes No

Suggested answer

cloflyMao

25,210 on at

Like (0)

Report

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:

5023.pastedimage1575530382925v1.png

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.

                       
                           

                       

                       
                           

                       

                       
                           

                       

                   
                   Register
                   
                       
                           
                               
                                   
                                       
                                            
                                       
                                   
                               
                           
                       

                   
               
               
           
       
       
           
               
               
                   
                       Meet the speakers.
                       
                   
               
               
           
       
       
           
               
               
                   
                       

                   
               
               
                   
                       

                   
               
               
                   
                       

                   
               
               
           
       
       
           
               
               
                   
                       
                           
                               
                                   
                                       
                                            
                                       
                                   
                               
                           
                       

                   
                   
                       Massachusetts Biotechnology Council

                       {{msdyncrm_contentsettings.msdyncrm_addressmain}}

                       Contact Us | Update Subscription Preference

Regards,

Clofly

Was this reply helpful? Yes No

cloflyMao 25,210 on at

Like (0)

Report

Hi James,

Please let me know whether my redesigned email could display normally in Outlook. :)

Regards,

Clofly

Was this reply helpful? Yes No
James Robe 60 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
cloflyMao 25,210 on at

Like (0)

Report

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

Was this reply helpful? Yes No
KE Communication bh 105 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
KE Communication bh 105 on at

Like (0)

Report

https://community.dynamics.com/365/marketing/f/dynamics-365-for-marketing-forum/397945/marketing-email-not-displaying-correctly-in-outlook/1076366

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."

Was this reply helpful? Yes No