Notification E-Mails - HTML design broken with Outlook and large logo pic

Help / Discuss
, ,
1

Hi there,

i’ve detected some weird behavior regarding the XWiki notification E-Mails when
using MS Outlook 2016 and a large sized logo.

→ Logo is displayed in full size.

Problem:

My guess:

I think it is clear that the root of the problem is MS Outlook on Windows. I assume that on macOS Outlook and Apple Mail use WebKit as a rendering engine, but on Windows Outlook is using Word as rendering engine. (Source)

I searched and found an similar problem for “Outlook Image Issues in HTML…”. On this site they mentioned an possible solution using Conditional Comments for Outlook.

Example:

<!--[if mso]>
    <center>
    <tr><td>
    <table border="0" cellpadding="0" cellspacing="0" width="600">
<![endif]-->

→ Where “if mso” means “if using Microsoft Office”

What i’ve tried to solve the problem

So i decided to test out the “if mso” solution with the XWiki.Notifications.MailTemplate.

`xwiki/bin/edit/XWiki/Notifications/MailTemplate?editor=object`

  • I’ve inserted the “<!–[if mso]>” instruction at 2 positions in the Template:

    /bin/edit/XWiki/Notifications/MailTemplate?editor=object 
      #template('notification/email/macros.vm')
  ## Main Div
    <div style="font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; background-color:#F5F5F5; padding:15px; margin:0 auto; color: #1d1f24; ">
     ## Main centered table
     <table style="max-width: 570px; margin:0 auto" cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td>

        ## Logo table

  <!--[if mso]>
     <center>
     <tr><td>
     <table border="0" cellpadding="0" cellspacing="0" width="600">
  <![endif]-->

         <table width="100%" border="0"><tr height="55px">
           ## Logo

     <!--[if mso]>
        <table width="50%"><tr><td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img src="cid:logo" alt="XWiki" style="max-width: 50%; max-height: 50px;"/></a></td></tr></table>
        <div style="display:none">
     <![endif]-->

            <td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img src="cid:logo" alt="XWiki" style="max-width: 50%; max-height: 50px;"/></a></td>
            ## Notification settings
            <td align="right"><a href="$xwiki.getURL($emailUser, 'view', 'category=notifications')" style="color: #0088CC; text-decoration: none; font-size: 14px;"><img src="cid:NECog.png" alt="" height="12" style="height: 12px"/>         $escapetool.xml($services.localization.render('notifications.settings.title'))</a></td>
         ## End of the logo table
         </tr></table>

  • Unfortunately this hasn’t solved the problem in MS Outlook 2016 on Windows
    → But is also has not broken anything (independent of the mail client)

  • I’ve also tried to search for a solution directly in MS Outlook 2016
    → But activating “Read all standard mail in plain text” (File > Options > Trust Center Settings > Email Security) just screw up the design of the XMail notification E-Mail

Probably i missed something and the solution (using the “if mso” statement) is simple?
Dose anyone maybe has a hint?

Thanks in adavance!

Best regards & nice weekend!
Dolo

2

Update:

I’ve replaced the Logo picture by a smaller one (448 x 201 px instead of 5000 x 4000 px)
and the Notification E-Mail looks better in Outlook 2016 on Windows 10:

xwiki_notification_Outlook2016_smallerLogo
xwiki_notification_Outlook2016_smallerLogo1005×698 21.4 KB

So problem definitely seems to come from the rendering engine which is used by Outlook on a Windows 10 device.

Is there any chance someone will check the XWiki.Notifications.MailTemplate and tries to implement an solution for Outlook on Windows?
→ Probably with <!--[if mso]> statements?
→ I will also try to implement this in the Notifications.MailTemplate and inform you if it would work

Best regards & have a good start
Dolo

3

Update #2: (possible solution)

So i’ve been trying around with the Conditional Comments (<!--[if mso]> statement) and
was able to optimize the presentation of the uploaded XWiki Logo in MS Outlook 2016 (on Windows 10).

Here is the result of an notification E-Mail with my fix approach inside XWiki.Notifications.MailTemplate, it compares the the same message in Mozilla Thunderbird and Microsoft Outlook 2016 (both on Windows 10):

xwiki_notification_Outlook2016_HTML_fix
xwiki_notification_Outlook2016_HTML_fix1797×802 50 KB

  • So this should solve the problem if someone is using a large picture for his XWiki instance logo.

Here is the source code which i’ve used (probably it can be enchanced a litte bit):

XWiki.Notifications.MailTemplate - HTML - Fix for Outlook 2016 (large sized logo) 
#template('notification/email/macros.vm')
## Main Div
<div style="font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; background-color:#F5F5F5; padding:15px; margin:0 auto; color: #1d1f24; ">
  ## Main centered table
  <table style="max-width: 570px; margin:0 auto" cellspacing="0" cellpadding="0" width="100%" align="center"><tr><td>
    ## Logo table
    <table width="100%" border="0"><tr height="55px">
    
    ## Outlook Fix #1 - Start
    <!--[if mso]>
      <center>
      <tr><td>
      <table border="0" cellpadding="0" cellspacing="0" width="600">
    <![endif]-->
    
      ## Logo
    
      ## Outlook Fix #2.1 - Start    
      <!--[if mso]>
        <table width="50%"><tr><td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img width="100" height="50" src="cid:logo" alt="XWiki" style="text-align: right; width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
        <div style="display:none">
      <![endif]-->
      ## Outlook Fix #2.1 - End
      
      <td align="left"><a href="$xwiki.getURL($services.wiki.currentWikiDescriptor.mainPageReference)"><img src="cid:logo" alt="XWiki" style="max-width: 50%; max-height: 50px;"/></a></td>
    
      ## Outlook Fix #2.2 - Start
      <!--[if mso]>
        </div>
      <![endif]-->
      ## Outlook Fix #2.2 - End

    ## Notification settings
      <td align="right"><a href="$xwiki.getURL($emailUser, 'view', 'category=notifications')" style="color: #0088CC; text-decoration: none; font-size: 14px;"><img src="cid:NECog.png" alt="" height="12" style="height: 12px"/> $escapetool.xml($services.localization.render('notifications.settings.title'))</a></td>
    ## End of the logo table
    
    
    <!--[if mso]>
      </td></tr>
      </table>
      </center>
    <![endif]-->
    ## Outlook Fix #1 - End
    
    
    </tr></table>

    ## Events div
    <div style="background:white;padding:1em; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #ddd;border-top: 1px solid #f0f0f0;">
      <h1 style="font-size:30px;font-style:normal;font-weight:500;line-height:42px;letter-spacing:normal; margin-top: 0;font-size:21px;">$escapetool.xml($services.localization.render('notifications.email.title'))</h1>
      ## Display a table of content
      #displayTOC($sortedEvents)
      ## Display Events
      #foreach ($list in $sortedEvents.values())
        #foreach ($sortedEvent in $list)
          #displaySortedEvent($sortedEvent)
        #end
      #end
    ## End of the events div
    </div>
  ## End of the main table
  </td></tr></table>
## End of the main div
</div>

Maybe this could be included into the official XWiki.Notifications.MailTemplate?

Hope this helps!

Best regards,
Dolo

4

Hi,

i’ve opened an Jira issue (improvement) at:

Loading...

Hope this can be implemented.

Best regards,
Dolo