HTML, comment écrire correctement la mise en forme de l'image et le code des tableaux pour une newsletter MS Outlook?

Question

Je fais un bulletin où la plupart des destinataires utiliseront Outlook et j'ai rencontré 2 problèmes majeurs.

d'abord que, selon un ordinateur, je reçois une affiche différemment l'image comme dans les captures d'écran:

Quand je change la valeur de la largeur de l'image à 750, il fonctionne sur mon ordinateur, mais est trop large à mes collègues: https://i.stack.imgur.com/QZxLf.png

La situation inversée se produit lorsque je change la valeur à 600 (comment il devrait être), il est trop étroit pour moi et parfait pour elle: https://i.stack.imgur.com/aFPGo.

est ici le code:

<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="height:350; max-height: 350px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="350"> 
 
    <tr> 
 
    <td bgcolor="#333333" height="350" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="auto"><!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 350px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
     <table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="15" style="height:350px; vertical-align:middle; max-height: 350px; max-width:600px; border-bottom: none; border-right: none ;" width="600"> 
 
       <tr> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" href="www.bdforum.org" ><img align="center" alt="LOGO" height="47px" href="www.bdforum.org" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff ;text-decoration:none; "> 
 
      <anpa href="##TellAFriend##" style="color: #fffff6 ; text-decoration:none;">FORWARD &nbsp;&nbsp;</anpa> 
 
      <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="color: #fffff6 ; text-decoration:none;text-align: center;">SUBSCRIBE &nbsp;&nbsp;</anpa> 
 
      <anpa href="##OptOutAll##" style="color: #fffff6; text-decoration:none;">UNSUBSCRIBE</anpa> 
 
      <br> 
 
      </font></td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" valign="middle" width="600" style="padding: 1em;"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="color: #fffff6;">BALTIC DEVELOPMENT FORUM</anpa> 
 
      </font></td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important; ">LATEST BDF NEWS ESPECIALLY FOR YOU</td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center"><table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;"> 
 
       <tr> 
 
       <td style="border-radius: 30px; background: #d1003e; text-align: center;"><a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:25px;text-align:center;text-decoration:none;"> <span style="color:#ffffff;">WEBSITE</span> </a></td> 
 
       </tr> 
 
      </table></td> 
 
     </tr> 
 
     </table> 
 
     
 
     <!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td> 
 
    </tr> 
 
</table>

De plus, il y a un autre cas avec un groupe de médias sociaux à la newsletter où il travaille sur le mien (il conserve la largeur que je l'ai mis dans le code): https://i.stack.imgur.com/iWbIn.png

mais pas sur le sien (son trop large et les icônes se développent): https://i.stack.imgur.com/NM0pS.png

le code:

<table class="baemail320resize" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600" height="auto"> 
 
    <tr> 
 
    <td><table class="baemail320resize" valign="middle" align="center" border="0" cellpadding="" cellspacing="0" style="max-height:60px; vertical-align:middle; max-width:600px; border-bottom: none; border-right: none ;" width="600"> 
 
     <tr> 
 
      <td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif"  align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td> 
 
      <!-- EMPTY --> 
 
      
 
      <td align="center" valign="middle" href="https://www.facebook.com/bdforum.org"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset1x3.png" href="https://www.facebook.com/bdforum.org" link="https://www.facebook.com/bdforum.org" alt="FACEBOOK" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td> 
 
      <!-- FACEBOOK --> 
 
      <td align="center" valign="middle" href="https://twitter.com/bdforumorg"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset2x3.png" href="https://twitter.com/bdforumorg" link="https://twitter.com/bdforumorg" alt="TWITTER" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td> 
 
      <!-- TWITTER --> 
 
      <td align="center" valign="middle" href="https://www.youtube.com/user/balticdevforum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset3x3.png" href="https://www.youtube.com/user/balticdevforum" link="https://www.youtube.com/user/balticdevforum" alt="YOU TUBE" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td> 
 
      <!-- YOU TUBE --> 
 
      <td align="center" valign="middle" href="https://www.flickr.com/photos/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset4x3.png" href="https://www.flickr.com/photos/baltic-development-forum" link="https://www.flickr.com/photos/baltic-development-forum" alt="FLICKR" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td> 
 
      <!-- FLICKR --> 
 
      <td align="center" valign="middle" href="https://www.linkedin.com/company/baltic-development-forum"><img src="http://img.anpdm.com/BalticDevelopmentForum/Asset5x3.png" href="https://www.linkedin.com/company/baltic-development-forum" link="https://www.linkedin.com/company/baltic-development-forum" alt="LINKED IN" align="center" height="auto" width="45%" style="max-height:60px; max-width: 60px;"></td> 
 
      <!-- LINKED IN --> 
 
      
 
      <td align="center" valign="middle" class="baemailwidthcollapse"><img src="http://customers.anpdm.com/shared/images/pixel.gif"  align="center" link="" height="1" width="20" style="max-height:1; max-width: 20px;"></td> 
 
      <!-- EMPTY --> 
 
     </tr> 
 
     </table> 
 
    <tr> 
 
    <td><img src="http://customers.anpdm.com/shared/images/pixel.gif" width="1" height="20" style="display:block;"></td> 
 
    </tr> 
 
    </td> 
 
    
 
    </tr> 
 
    
 
</table>

Je vous serais reconnaissant à chaque petit indice ou une idée sur la façon de se débarrasser de ces problèmes, je crois avoir tout essayé, je suis capable d'être déjà en particulier que il fonctionne partout mais certains clients PC Outlook comme vous pouvez voir here.

Désolé pour un long message et merci de votre aide à l'avance!

Answer 1

Outlook n'aime pas vraiment si vous exécutez une image considérablement plus petite en largeur que votre sortie désirée réelle. Je n'arrivais pas à placer votre image dans l'arrière-plan de la cellule du tableau.

Votre code d'arrière-plan est un peu foiré. Je l'ai nettoyé un peu. Essayez ceci:

<!--[if gte mso 9]> 
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> 
<v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
</v:background> 
<![endif]--> 

Essayez quelque chose comme ceci:

<div style="background-color:#ff0000;"> 
    <!--[if gte mso 9]> 
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> 
    <v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#7bceeb"/> 
    </v:background> 
    <![endif]--> 
    <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg"> 
     </td> 
    </tr> 
    </table> 
</div> 

Essayez de formater votre image avec cet outil: https://backgrounds.cm/

En outre, vous ne l'avez pas d'inclure votre <head> des informations telles que la feuille de style et les balises META.

Votre structure de table telle que vous la présentez n'est pas très réactive. La moitié de l'e-mail est coupée dans les appareils IOS.

Enfin, la taille maximale pour Outlook est 800px. Plus vous vous rapprochez de cette largeur, plus vous aurez de problèmes avec les différentes versions d'Outlook.

Bonne chance.