Incompatibilité Mail HTML/messageries

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Monkey D. Sol, 4 Avril 2013.

  1. Monkey D. Sol
    Monkey D. Sol Nouveau WRInaute
    Inscrit:
    4 Avril 2013
    Messages:
    2
    J'aime reçus:
    0
    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 :

    [​IMG]

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

    [​IMG]

    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
     
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 928
    J'aime reçus:
    78
    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).
     
  3. ARcom
    ARcom Nouveau WRInaute
    Inscrit:
    30 Juillet 2012
    Messages:
    26
    J'aime reçus:
    0
    Bonjour,

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

    Code:
    <img [...] border="0" style="display:block;" />
     
  4. lambi521
    lambi521 WRInaute passionné
    Inscrit:
    15 Juin 2010
    Messages:
    1 476
    J'aime reçus:
    0
    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
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 179
    J'aime reçus:
    330
  6. Monkey D. Sol
    Monkey D. Sol Nouveau WRInaute
    Inscrit:
    4 Avril 2013
    Messages:
    2
    J'aime reçus:
    0
    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) :

    [​IMG]

    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.
     
Chargement...
Similar Threads - Incompatibilité Mail messageries Forum Date
<script> Whois et images/slider incompatibilité? Développement d'un site Web ou d'une appli mobile 19 Juillet 2011
La fonction mail (PHP) ne passe pas ! Demandes d'avis et de conseils sur vos sites 28 Juin 2021
Astuce Brainstorming sur les préfixes d'un mail pro Le café de WebRankInfo 12 Avril 2021
DMARC quelle email ? Droit du web (juridique, fiscalité...) 9 Avril 2021
Problème mail automatique Développement d'un site Web ou d'une appli mobile 31 Mars 2021
Maillage interne et jus de liens Débuter en référencement 28 Février 2021
Les mails de mon domaine considéré comme spam Administration d'un site Web 19 Février 2021
Liens ventes croisées et maillage interne | E-commerce Netlinking, backlinks, liens et redirections 25 Novembre 2020
Site e-commerce : profondeur et maillage interne Problèmes de référencement spécifiques à vos sites 9 Novembre 2020
Maillage du cocon sémantique sur des articles top 5 Netlinking, backlinks, liens et redirections 25 Octobre 2020