Compatibilité mail HTML/messageries

**Monkey D. Sol** · 03/04/2013, 17h49

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 :
Nom : capture%2016.png
Affichages : 223
Taille : 353,6 Ko

Nom : capture%2016.png
Affichages : 223
Taille : 353,6 Ko

Et voilà à quoi il ressemble lorsque lu par le site Outlook (il s'affiche comme cela aussi avec Gmail et Yahoo) :
Nom : capture%2021.jpg
Affichages : 74
Taille : 143,3 Ko

Nom : capture%2021.jpg
Affichages : 74
Taille : 143,3 Ko

Voici le code du mail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 <!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 style="border:0px;">
<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 style="border:0px;">
    <td><table width="730" height="776"border="0" cellspacing="0" cellpadding="0">
      <tr style="border:0px;">
        <td "height="88" style="border:0px;"><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 style="border:0px;">
        <td align="left" valign="top"><table width="730" height="292" border="0" cellspacing="0" cellpadding="0">
          <tr style="border:0px;">
            <td width="148" height="292" valign="top" style="border:0px;"><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" style="border:0px;"><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 style="border:0px;">
        <td width="730" height="252" valign="top" style="border:0px;"><img src="http://bricokasion-leblog.com/Emailling/Images/BricoKasion-site.jpg" width="730" height="252" alt="BricoKasion-site" /></td>
      </tr>
      <tr style="border:0px;">
        <td><table width="730" height="144" border="0" cellspacing="0" cellpadding="0">
          <tr style="border:0px;">
            <td width="241" height="144" valign="top" style="border:0px;"><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 style="border:0px;">
 
                         <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 style="border:0px;">
                <td width="229" height="20"valign="bottom" style="border:0px;"><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" style="border:0px;"><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 style="border:0px;">
       <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 style="border:0px;">
    <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 style="border:0px;">
    <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 style="border:0px;">
    <td align="center">
    <table width="190" border="0" cellspacing="0" cellpadding="0">
      <tr style="border:0px;">
        <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

**Muchos** · 03/04/2013, 17h59

Franchement, vous devriez être satisfait. Les différences sont minimes, sachant que c'est (quasi) impossible de faire un email html identique sur tous les clients.

Compatibilité mail HTML/messageries

HTML

Vue hybride

Discussions similaires

Partager

Partager