Incompatibilité Mail HTML/messageries

Monkey D. Sol · 4 Avril 2013

Bonjour, je suis en stage dans une start up et, après avoir fait un joli message publicitaire pour promouvoir l'une de leurs offres (ne vous inquiétez, le message n'est envoyé qu'aux personnes ayant donné leur consentement préalable, il ne s'agit pas de courrier indésirable), je viens de me rendre compte que le message ne s'affiche pas correctement sur certaines messageries (notamment Gmail, Outlook, Yahoo).

Voilà à quoi ressemble le message publicitaire :

Et voilà à quoi il ressemble lorsque lu par le site Outlook (il s'affiche comme cela aussi avec Gmail et Yahoo) :

Voici le code du mail :

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brico, Déco, Jardin. Pour Pâques, profitez de notre offre de lancement</title>
		<style type="text/css">
body{
	background:#edecec;
	border: none;
	border-top: 0px;
	margin: 0px;
	width:100% !important;
}
}
        </style>
</head>

<body>
<table width="730" border="0" align="center"cellspacing="0" cellpadding="0">
  <tr>
<td align="center"> <font style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 130%; page-break-before: auto; page-break-after: auto; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">Brico, D&eacute;co, Jardin, Construction. D&eacute;sencombrez votre garage en revendant !</font><br />
          <font style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 130%; page-break-before: auto; page-break-after: auto; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">Si cet email ne s&acute;affiche pas correctement, <font color="#0000FF"><u><a href="http://bricokasion-leblog.com/Emailling/Images/Emailling-lancement-paques.html">cliquez ici</a></u></font></font>
    </td>
  </tr>
  <tr>
    <td><table width="730" height="776"border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="88"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-achetez-revendez-recyclez.gif" width="730" height="88" alt="BricoKasion-Acheter-Revendez-Recyclez" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><table width="730" height="292" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="148" height="292" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-left.jpg" width="148" height="292" alt="BricoKasion-paques" /></td>           
           <td width="434" height="292" bgcolor="#e1e1e1"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
        <p style="margin-right: 20px; margin-left: 20px;text-align: justify;">
        <br />
        Bonjour,<br />
        <br />
        <strong>C&acute;est enfin le printemps !</strong> (ou presque) Mais aussi le moment tant attendu de l&acute;ouverture  officielle du site au public.  <br /><br />
        Profitez-en pour faire le grand tri dans votre cave, garage ou grenier. <span class="colorblue"><a href="http://www.bricokasion.com/espace-brico">Bricolage</a></span>, <span class="colorblue"><a href="http://www.bricokasion.com/espace-jardin">Jardinage</a></span>, <span class="colorblue"><a href="http://www.bricokasion.com/espace-deco">D&eacute;coration</a></span>, mettez en vente gratuitement dans nos diff&eacute;rents espaces et <strong>b&eacute;n&eacute;ficiez de notre offre de lancement</strong>.<br />
        <br />
        Merci de votre patience, votre soutien, et bonne revente sur notre site.<br />
        <br />
        L&acute;&eacute;quipe BricoKasion<br />
             <br />
    </span><p></td>
           
            <td width="148" height="292" align="right" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-right.jpg" width="148" height="292" alt="BricoKasion-border-right" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width="730" height="252" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-site.jpg" width="730" height="252" alt="BricoKasion-site" /></td>
      </tr>
      <tr>
        <td><table width="730" height="144" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="241" height="144" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-offre-lancement.jpg" width="241" height="144" alt="BricoKasion-offre-lancement" /></td>
            <td width="229"><table width="229" height="144" border="0" cellspacing="0" cellpadding="0">
              <tr>
              
                         <td height="124" valign="middle" bgcolor="#000000"><span style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">
        <p style="margin-left: 10px;text-align: left; line-height:140%;color:#e5e5e5">
        <br />
       <strong>pendant un mois, pour toute</strong><br />
      <strong>annonce déposée avant le 30/05/2013</strong></p>
      <font style="margin-left: 10px;text-align: left; line-height:50%; color:#FFF">
      Offre d&acute;une valeur de 10&euro; par annonce*</font>
    </span><p></td>
             
              </tr>
              <tr>
                <td width="229" height="20"valign="bottom"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-bottom.jpg" width="229" height="20" alt="BricoKasion-border" /></td>
              </tr>
            </table></td>
            <td width="260" align="right" valign="top"><a href="http://www.bricokasion.com"><img border=0 src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-j-en-profite.jpg" width="260" height="144" alt="BricoKasion-j-en-profite" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
       <td align="left" valign="top"><p style="border: none; margin-top: 0px; margin-left: 20px;margin-bottom: 0px; margin-right: 20px;padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 9px;">* Mise en avant offerte pour toute annonce d&eacute;pos&eacute;e dans le site BricoKasion avant le 30/05/2013 inclus, dans la limite des emplacents disponibles. Activation de l&acute;offre sous 24 heures &agrave; partir de l&acute;heure du d&eacute;p&ocirc;t dans les conditions sp&eacute;cici&eacute;es dans les CGV. En cas d&acute;indisponibilité d&acute;emplacement, la date de mise en avant pourra être report&eacute;e mais ne fera, en aucun cas, l&acute;objet de d&eacute;dommagement.</p>
    <p style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">&nbsp;</p></td>
  </tr>
  <tr>
    <td align="left" valign="top"><p style="border: none; margin-right: 20px; margin-left: 20px;margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 9px;">BricoKasion SAS est une soci&eacute;t&eacute; au capital variable de 72 000&euro;, enregistr&eacute;e en France, immatricul&eacute;e au registre du Commerce et des Soci&eacute;t&eacute;s de Paris sous le numéro 749 860 151 00010 - N&ordm; TVA FR18749860151  - Siège social : 21, rue de la vo&ucirc;te (75012). Si vous souhaitez nous contacter, <u><strong><a href="www.bricokasion/contact">suivez ce lien</a></strong></u></p>
<hr/>
</td>
  </tr>
  <tr>
    <td>
    <p align="center" style="border: none; margin-top: 0px; margin-bottom: 0px; margin-right: 20px; margin-left: 20px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">Conformément à l'article 34 de la loi Informatique et Liberté du 6 janvier 1978, vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant. Déclaration CNIL n°1607700 - Pour vous désinscrire, <u>suivez ce lien</u></p>
  <p align="center" style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">&nbsp;</p>
    </td>
  </tr>
  <tr>
    <td align="center">
    <table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100" align="center" style="font-family: 'Times New Roman', Times, serif; font-size: 16px;"><strong>Suivez-nous</strong></td>
        <td width="45"><a href="https://www.facebook.com/BricoKasion"><img border=0 src="http://bricokasion-leblog.com/Emailling/Images/icone-facebook.gif" width="45" height="40" alt="facebook" /></a></td>
        <td width="45"><a href="https://twitter.com/BricoKasion"><img border=0 src="http://bricokasion-leblog.com/Emailling/Images/icone-twitter.gif" width="45" height="40" alt="twitter" /></a></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

Si vous avez besoin d'autres informations, demandez-moi. En tout cas j'apprécierais beaucoup votre aide parce que là je ne sais plus quoi faire.

Merci d'avance,

Monkey

UsagiYojimbo · 4 Avril 2013

Idée con (mais pour être passé par là, il se peut que ça suffise) : met tout le html sur une seule ligne (pas de saut de ligne dans le code source).

ARcom · 4 Avril 2013

Bonjour,

Essaye aussi en rajoutant ça dans toutes tes balises IMG :

Code:

<img [...] border="0" style="display:block;" />

lambi521 · 4 Avril 2013

Idée con (mais pour être passé par là, il se peut que ça suffise) : met tout le html sur une seule ligne (pas de saut de ligne dans le code source).

Très mauvaise idée, je viens de galérer une semaine parce que justement je mettais tout le code sur une seule ligne, sauf que les clients mails rajoute un espace aléatoirement pour scindé le code si celui-ci et trop long. Je te laisse deviner le résultat si l'espace aléatoire est mis au milieu de <<colspan="6">>...

Essaie en virant le Doctype

spout · 4 Avril 2013

Lectures intéressantes:
http://www.pompage.net/traduction/emails-html-dompter-la-bete
http://www.campaignmonitor.com/css/

Monkey D. Sol · 5 Avril 2013

Super ! Merci à tous, ça m'a beaucoup aidé.

Le problème est quasiment réglé. En fait l'ajout des border="0" style="display:block;" dans les img a suffit à ce que la plupart des messageries lisent correctement le mail.

Outlook cependant n'affiche pas correctement l'alignement du texte comme vous pouvez le voir ici (corps du texte) :

Vous auriez une idée ?

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brico, Déco, Jardin. Pour Pâques, profitez de notre offre de lancement</title>
		<style type="text/css">
body{
	background:#edecec;
	border: none;
	border-top: 0px;
	margin: 0px;
	width:100% !important;
}
}
        </style>
</head>

<body style="background:#edecec;">

<table width="730" border="0" align="center"cellspacing="0" cellpadding="0">
  <tr>
<td align="center"> <font style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 130%; page-break-before: auto; page-break-after: auto; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">Brico, D&eacute;co, Jardin, Construction. D&eacute;sencombrez votre garage en revendant !</font><br />
          <font style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 130%; page-break-before: auto; page-break-after: auto; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">Si cet email ne s&acute;affiche pas correctement, <font color="#0000FF"><u><a href="http://bricokasion-leblog.com/Emailling/Images/Emailling-lancement-paques.html">cliquez ici</a></u></font></font>
    </td>
  </tr>
  <tr>
    <td><table width="730" height="776"border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="88"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-achetez-revendez-recyclez.gif" border="0" width="730"; height="88" style="display:block" alt="BricoKasion-Acheter-Revendez-Recyclez"/></td>
      </tr>
      <tr>
        <td align="left" valign="top"><table width="730" height="292" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="148" height="292" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-left.jpg" width="148" height="292" alt="BricoKasion-paques" border="0" style="display:block"/></td>           
           <td width="434" height="292" bgcolor="#e1e1e1">
           <div style="margin-right: 20px; margin-left: 20px;text-align: justify;" >
           <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
       
       
        <br />
        Bonjour,<br />
        <br />
        <strong>C&acute;est enfin le printemps !</strong> (ou presque) Mais aussi le moment tant attendu de l&acute;ouverture  officielle du site au public.  <br /><br />
        Profitez-en pour faire le grand tri dans votre cave, garage ou grenier. <span class="colorblue"><a href="http://www.bricokasion.com/espace-brico">Bricolage</a></span>, <span class="colorblue"><a href="http://www.bricokasion.com/espace-jardin">Jardinage</a></span>, <span class="colorblue"><a href="http://www.bricokasion.com/espace-deco">D&eacute;coration</a></span>, mettez en vente gratuitement dans nos diff&eacute;rents espaces et <strong>b&eacute;n&eacute;ficiez de notre offre de lancement</strong>.<br />
        <br />
        Merci de votre patience, votre soutien, et bonne revente sur notre site.<br />
        <br />
        L&acute;&eacute;quipe BricoKasion<br />
             <br />
    </span></div></td>
           
            <td width="148" height="292" align="right" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-right.jpg" border="0" width="148" height="292" style="display:block" alt="BricoKasion-border-right" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td width="730" height="252" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-site.jpg" border="0" width="730" height="252" style="display:block" alt="BricoKasion-site" /></td>
      </tr>
      <tr>
        <td><table width="730" height="144" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="241" height="144" valign="top"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-offre-lancement.jpg" border="0" width="241" height="144" style="display:block" alt="BricoKasion-offre-lancement" /></td>
            <td width="229"><table width="229" height="144" border="0" cellspacing="0" cellpadding="0">
              <tr>
              
                         <td height="124" valign="middle" bgcolor="#000000"><span style="font-family:Arial, Helvetica, sans-serif; font-size:11px;">
        <p style="margin-left: 10px;text-align: left; line-height:140%;color:#e5e5e5">
        <br />
       <strong>pendant un mois, pour toute</strong><br />
      <strong>annonce déposée avant le 30/05/2013</strong></p>
      <font style="margin-left: 10px;text-align: left; line-height:50%; color:#FFF">
      Offre d&acute;une valeur de 10&euro; par annonce*</font>
    </span><p></td>
             
              </tr>
              <tr>
                <td width="229" height="20"valign="bottom"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-border-bottom.jpg" border="0" width="229" height="20" style="display:block" alt="BricoKasion-border" /></td>
              </tr>
            </table></td>
            <td width="260" align="right" valign="top"><a href="http://www.bricokasion.com"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-j-en-profite.jpg" border="0" width="260" height="144" style="display:block" alt="BricoKasion-j-en-profite" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
       <td align="left" valign="top"><p style="border: none; margin-top: 0px; margin-left: 20px;margin-bottom: 0px; margin-right: 20px;padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 9px;">* Mise en avant offerte pour toute annonce d&eacute;pos&eacute;e dans le site BricoKasion avant le 30/05/2013 inclus, dans la limite des emplacents disponibles. Activation de l&acute;offre sous 24 heures &agrave; partir de l&acute;heure du d&eacute;p&ocirc;t dans les conditions sp&eacute;cici&eacute;es dans les CGV. En cas d&acute;indisponibilité d&acute;emplacement, la date de mise en avant pourra être report&eacute;e mais ne fera, en aucun cas, l&acute;objet de d&eacute;dommagement.</p>
    <p style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">&nbsp;</p></td>
  </tr>
  <tr>
    <td align="left" valign="top"><p style="border: none; margin-right: 20px; margin-left: 20px;margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 9px;">BricoKasion SAS est une soci&eacute;t&eacute; au capital variable de 72 000&euro;, enregistr&eacute;e en France, immatricul&eacute;e au registre du Commerce et des Soci&eacute;t&eacute;s de Paris sous le numéro 749 860 151 00010 - N&ordm; TVA FR18749860151  - Siège social : 21, rue de la vo&ucirc;te (75012). Si vous souhaitez nous contacter, <u><strong><a href="www.bricokasion/contact">suivez ce lien</a></strong></u></p>
<hr/>
</td>
  </tr>
  <tr>
    <td>
    <p align="center" style="border: none; margin-top: 0px; margin-bottom: 0px; margin-right: 20px; margin-left: 20px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">Conformément à l'article 34 de la loi Informatique et Liberté du 6 janvier 1978, vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant. Déclaration CNIL n°1607700 - Pour vous désinscrire, <u>suivez ce lien</u></p>
  <p align="center" style="border: none; margin-top: 0px; margin-bottom: 0px; padding: 0cm; line-height: 100%; page-break-before: auto; page-break-after: auto; text-align: justify; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">&nbsp;</p>
    </td>
  </tr>
  <tr>
    <td align="center">
    <table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100" align="center" style="font-family: 'Times New Roman', Times, serif; font-size: 16px;"><strong>Suivez-nous</strong></td>
        <td width="45"><a href="https://www.facebook.com/BricoKasion"><img border=0 src="http://bricokasion-leblog.com/Emailling/Images/icone-facebook.gif" width="45" height="40" alt="facebook" /></a></td>
        <td width="45"><a href="https://twitter.com/BricoKasion"><img border=0 src="http://bricokasion-leblog.com/Emailling/Images/icone-twitter.gif" width="45" height="40" alt="twitter" /></a></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

En tout cas merci beaucoup, pour la rapidité de vos réponses et plus généralement, pour votre aide.