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:
    12 003
    J'aime reçus:
    128
    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 463
    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 169
    J'aime reçus:
    346
  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
Incompatibilité Sitemap avec et sans "www" Crawl et indexation Google, sitemaps 1 Mars 2010
Incompatibilité IE7 Demandes d'avis et de conseils sur vos sites 7 Février 2009
Redirection de pages + incompatibilité entre htaccess. URL Rewriting et .htaccess 8 Janvier 2008
Incompatibilité htaccess et serveur Netlinking, backlinks, liens et redirections 21 Juin 2007
Incompatibilité Firefox ! Développement d'un site Web ou d'une appli mobile 22 Novembre 2006
incompatibilité avec ie Développement d'un site Web ou d'une appli mobile 13 Octobre 2006
Incompatibilités ? referencement et nom de domaine Débuter en référencement 1 Septembre 2006
Incompatibilité avec firefox Demandes d'avis et de conseils sur vos sites 1 Février 2006
Incompatibilité entre navigateurs : Un grand récapitulatif ! Développement d'un site Web ou d'une appli mobile 15 Octobre 2005
URL Rewriting et ancres html : incompatibilité ? URL Rewriting et .htaccess 24 Août 2005
Robots.txt et balise meta robots, incompatibilité ? Problèmes de référencement spécifiques à vos sites 9 Juillet 2005
Quel client EMail Linux ? Le café de WebRankInfo 2 Juillet 2022
Maillage interne Débuter en référencement 24 Juin 2022
Adresse mail ne fonctionne plus après modif de DNS Noms de domaine et référencement 26 Mai 2022
Maillage interne et catégories WP Netlinking, backlinks, liens et redirections 23 Mai 2022
Comment créer un fichier SPF (authentification emails) ? Noms de domaine et référencement 14 Mars 2022
Morosité de café: J'arrive pas à envoyer un mail de newsletter. Administration d'un site Web 16 Février 2022
Menu, liens et maillage du site Débuter en référencement 6 Janvier 2022
Email bizarre de Google - GMB Google : l'entreprise, les sites web, les services 13 Décembre 2021