Email HTML et Background

**lemilig** · 30/09/2008, 10h32

Bonjour,

Je dois envoyer un emailing et j'ai un souci : je n'arrive pas à afficher l'arrière-plan (Que ce soit une image en répétition ou que ce soit une simple couleur). Je tourne le problème en tous sens depuis hier et je n'arrive à rien... Quelqu'un saurait-il d'où celà peut venir ?

Pour infio, dans la version en ligne de l'emial, pas de problème, j'ai bien mon fond. Par contre, ça ne marche plus quand j'insère le HTML dans Thunderbird...

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
<!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>La charte de l'Esprit du Sport</title>
 
<style type='text/css'>
	a img{
		border:none;
	}
 
	body{
		background-repeat:repeat-x;
	}
 
</style>
 
</head>
 
<body background="http://www.lespritdusport.fr/email/img/emailing1_02.gif" bgcolor="#E9EEF0">
<div align="center">
  <table width="486" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="http://www.lespritdusport.fr/email/img/emailing1_04.jpg" alt="L'Esprit du Sport" width="486" height="124" /></td>
    </tr>
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFF"><table width="486" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="http://www.lespritdusport.fr/email/img/emailing1_06.gif" width="194" height="204" /></td>
          <td rowspan="2"><p><font size="4" face="Verdana, Arial, Helvetica, sans-serif">Découvrez en exclusivité <br />
            Mercredi 1er octobre à 9h <br />
            la charte de l’esprit sportif <br />
            et le nouvel emblème <br />
            de l’Esprit du Sport</font></p>
            <p>&nbsp;</p>
            <p align="center"><a href="http://www.lespritdusport.fr" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_09.gif" alt="Accéder au Site de l'Esprit du Sport" width="127" height="29" /></a></p></td>
        </tr>
        <tr>
          <td><img src="http://www.lespritdusport.fr/email/img/emailing2_06.gif" alt="L'Esprit du Sport" width="194" height="204" /></td>
          </tr>
      </table></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><div align="center"></div></td>
    </tr>
 
    <tr>
      <td align="center" bgcolor="#FFFFFF"><div align="center">
        <table border="0" cellspacing="0" cellpadding="10">
          <tr>
            <td><a href="http://www.jeunesse-sports.gouv.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_14.gif" alt="Ministère de la Jeunesse et des Sports" width="49" height="48" /></a></td>
            <td><a href="http://www.fff.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_15.gif" alt="FFF" width="45" height="48" /></a></td>
            <td><a href="http://www.lnr.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_16.gif" alt="LNR" width="35" height="48" /></a></td>
            <td><a href="http://www.basketfrance.com/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_17.gif" alt="FFBB" width="47" height="48" /></a></td>
            <td><a href="http://www.lnh.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_18.gif" alt="LNH" width="39" height="48" /></a></td>
            <td><a href="http://www.ff-handball.org/ffhb/index.php" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_19.gif" alt="FFH" width="61" height="48" /></a></td>
            <td><a href="http://www.unss.org/"><img src="http://www.lespritdusport.fr/email/img/emailing1_20.gif" alt="UNSS" width="27" height="48" /></a></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
</div>
</body>
</html>

**romain_ci** · 30/09/2008, 10h55

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<style type='text/css'>
	a img{
		border:none;
	}
 
	body{
                         background-color : #000000; // ta couleur
		background-repeat:repeat-x;
	}
 
</style>

Essai de le mettre dans le css...

**lemilig** · 30/09/2008, 11h33

OK, en fait j'ai déjà essayé et c'est pareil.

Dans les emails, je place toujours un minimum de css, toujours en style. Il n'y a rien d'autre en css que ce que vous voyez... Et il y en même plus que d'habitude : généralement, je me contente de définir l'aspect des liens en css et le reste est full HTML.

Je me demande si le problème ne vient pas juste du fait que je lance le mail depuis Thunderbird en injectant le code dans un nouveau message (pour les tests). Je vais vois ce que ça donne sous Sarbacane.

**kaiser59** · 30/09/2008, 16h04

Salut,

Si j'ai bien compris, tu souhaites intégrer du css dans un email ? Le problème est qu'à l'heure actuel, il n'y a pas bcp de messagerie qui prenne en compte les css. Du coup, tu dois l'intégrer dans ton code et non pas sous forme de style genre

Code html :

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

<table style="">

mais :

Code html :

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

1
2
<table bgcolor="">
<!-- Désolé si ce n'est pas le bon tag bgcolor sa fait longtemps que je ne passe plus par ça, mais en gros c'est un exemple ;) -->

Etant donné, qu'il existe plusieurs messageries, tu ne peux donc pas adapter chaque style pour chq messagerie... De ce fait, tu n'as pas trop le choix. Je sais que Outlook 2007 gère le css, mais toutes les messageries ne le font pas.

**lemilig** · 10/10/2008, 11h06

Je me limite normalement au css pour deux choses : supprimer les bordures de lien autour des images (a img {}) et personnaliser les liens pour me débarrasser de leur couleur par défaut. Mais là le graphiste m'avait collé un arrière plan dégradé... auquel je lui ai finalement fait renoncer. Et voilà la solution...

**HiRoN** · 10/10/2008, 11h39

Salut,

Perso, j'aurai tenté en remplaçant :

Code HTML :

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

<body background="http://www.lespritdusport.fr/email/img/emailing1_02.gif" bgcolor="#E9EEF0">

Par :

Code HTML :

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

<body>

Et :

Code HTML :

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

<div align="center">

Par :

Code HTML :

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

<div align="center" style="background:url(email/img/emailing1_02.gif); background-repeat:repeat-x; width:486px;">

**lemilig** · 10/10/2008, 11h50

Je suis un peu dubitatif devant le "style"... C'est bien géré par tous les clients de messagerie ?

**Bisûnûrs** · 10/10/2008, 11h58

Pour avoir une vue d'ensemble des propriétés CSS compatibles sur chaque lecteur de mails :
http://a-pellegrini.developpez.com/tutoriels/css/email/

Qui plus est, certaines balises sont automatiquement supprimées dans certains logiciels/webmails.

Par exemple, on se rend compte que la balise body est supprimée dans Thunderbird, donc la solution serait de mettre le background sur le premier div.

Autre exemple, Hotmail supprime toutes les balises link et le contenu de la balise head, donc une autre solution serait de mettre une balise style dans le body.
Il n'est pas aisé de faire un mail correct sur chacun des lecteurs de mails ... Bon courage.

**HiRoN** · 10/10/2008, 12h00

Je ne serai dire... Si tu regarde ici

Le message au format HTML est écrit ainsi :

Code HTML :

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

<div style="width: 100%; text-align: center; font-weight: bold">Un Bonjour de Developpez.com !</div>

Avec donc l'application d'un style sur le div.

C'est bien géré par tous les clients de messagerie ?

C'est une réponse qui m'intéresse aussi.

**lemilig** · 10/10/2008, 12h07

OK... Je ferai un essai et je vous dirai ce que ça donne...

**Valki** · 11/10/2008, 18h00

Bonjour,

J'ai lu rapidement, je m'étonne que personne n'ait corrigé la balise body :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type='text/css'>
a img{border:none;}
 
body
{
  background-image:url(http://www.lespritdusport.fr/email/img/emailing1_02.gif); // C'est ici que cela doit être intégré
  background-repeat:repeat-x;
}	
</style>
...
 
<body> <!-- Tout doit être dans le style CSS !-->

**Bisûnûrs** · 12/10/2008, 16h00

Envoyé par Valki

Bonjour,

J'ai lu rapidement, je m'étonne que personne n'ait corrigé la balise body :

Qu'est-ce que ça change ?

**lemilig** · 13/10/2008, 10h12

A priori ça ne change en effet pas grand-chose : dans ce cas mes testes démontrent que pour un email, la répétition n'est pas prise en charge (en tous cas dans le contexte logiciel de mes tests, i.e. Thunderbird et Outlook).

Le CSS est par définition déconseillé dans les emails, mais je ne connais pas d'autre solution pour customiser les liens texte ou image, ou pour gérer la répétition de l'arrière-plan : c'est là tout le problème.

Merci de ta réponse dans tous les cas!!!

**Valki** · 13/10/2008, 15h37

Bonjour,

Qu'est-ce que ça change ?

De la construction de pages propres, les styles dans les CSS, séparer le contenu et la présentation, faire des pages avec "class" et "id" et classe et idée, c'est pas neuf comme concept.

@Bisûnûrs : Décidément, à chacune de mes interventions, il faudra que tu passes pour me demander de me justifier sur mes dires, par excès de zèle ? par ennuie ? ou par tyranisme ?

**Bisûnûrs** · 13/10/2008, 15h48

Envoyé par Valki

De la construction de pages propres, les styles dans les CSS, séparer le contenu et la présentation, faire des pages avec "class" et "id" et classe et idée, c'est pas neuf comme concept.

On est totalement d'accord, sauf que dans le cas d'un e-mail ce n'est pas tout le temps la meilleure méthode à adopter, et que, tu l'admettras, même si le contenu et la présentation ne sont pas séparés dans le cas où le style est dans la balise, le résultat final est le même (cherchant plus une méthode d'interprétation correcte du CSS plutôt que de la séparation stricte).

Envoyé par Valki

@Bisûnûrs : Décidément, à chacune de mes interventions, il faudra que tu passes pour me demander de me justifier sur mes dires, par excès de zèle ? par ennuie ? ou par tyranisme ?

Rien de tout ça, désolé si tu l'as pris comme tel.

**lemilig** · 13/10/2008, 16h09

Il faut bien reconnaître que pour envoyer un email qui passe correctement un peu partout, on est bien obligé de faire fi de l'orthodoxie W3C. (Une bonne vieille balise <font> continue à passer mieux que du CSS).

Bon, sinon, keep cool...

**Valki** · 13/10/2008, 17h05

Je ne m'étais pas pronocé à propos de l'envoie de mail mais juste sur la forme.

Il est vrai que cela soulève un vrai problème, lié à tout ce qui peut être considéré comme filtre anti-spam. La majorité des webmails n'interprètent pas les balises HTML, on peut comprendre : une balise <div/> ou <td></td> pas fermée et l'affichage de l'interface du webmail pourrait être désastreux.
> Donc déjà 100% des mails envoyés avec du HTML ne seront pas lisible dans les webmails qui, à vue de nez, doivent représenter 50% des consultations (j'en sais rien, j'imagine)

Ensuite, pour les logiciels de messagerie, le HTML est interprété et les images affichées si les options du logiciel n'indiquent pas le contraire. De base, je crois que Outlook Express a décoché l'affichage d'images par exemple.
> Donc on peut imaginer que 50% des logiciels de messagerie ne sont pas configurés de façon à accepter le HTML et/ou l'affichage des images. Soit par méconnaissance de l'utilisateur, soit par volonté.

Je ne compte pas les consultations autres (tel portable etc...), soit en gros 75% de consultations qui n'afficheront ni images et/ou n'interpréteront pas le HTML, sans compter les filtres anti-spam qui bloquent les message "groupés".

Il y a 5 ans, j'avais plus de retours pour un envoi à 20.000 mails qu'aujourd'hui avec plus de 300.000. Les chiffrent parlent d'eux même.

Cela oblige, à présent, à penser sa communication différemment, à envoyer de petits mails en format texte, sans fioritures et à avoir des contenus en ligne suffisamment intéressant pour que les internautes s'y rendent régulièrement et naturellement.

@Bisounours, pas de souci, je suis en plein dev sur un gros projet JS/Ajax, ça a du me déclancher mes bricoles

Email HTML et Background

HTML

Discussions similaires

Partager

Partager