Fond de page et corps de mail

**mandine7101** · 27/06/2011, 16h45

Bonjour,

je suis stagiaire et je dois créer une newsletter. Le plus simple pour nous étant d'utiliser Dreamweaver, je me suis donc lancée, bien que je ne m'y connaisse absolument rien...

Mon soucis est le suivant: j'ai mis une image d'arrière-plan, qui s'affiche bien lorsque je visualise ma newsletter sous IE et Firefox.
Par contre, lorsque je l'envoie par mail, l'image de fond ne s'affiche pas...

Je vous mets le codage:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
        background-image: url(xylotech2.jpg);
        background-repeat: no-repeat;
        font-size: 16px;
}

Dans l'attente de vos réponses...
Amandine

**ysloo** · 27/06/2011, 21h24

Bonjour,

C'est normal car pour un e-mailing beaucoup de techniques comme les CSS, div, etc... ne fonctionnent pas ou de façon très variable en fonction du client mail utilisé par le destinataire.

On peut distinguer deux types de clients :
- client 'software' (Outlook, Lotus, Thunderbird, Mail, etc)
- client 'webmail' (Hotmail, Gmail, Yahoo!Mail, etc)

Un joli template dans le navigateur IE et FF peut devenir très laid une fois affiché dans le client du destinataire, il ne faut pas se fier au rendu dans le navigateur.

Par exemple, les images d'arrière-plan sont rarement affichées.

Globalement il faut coder à "l'ancienne" avec des tableaux, utiliser la balise <font>... bref ne pas utiliser les techniques actuelles pour le codage d'une page destinée à un navigateur.

Les choses à ne pas faire dans un e-mailing :
- utiliser du Javascript ou du Flash ou du XHTML
- utiliser une feuille CSS externe
- intégrer des styles entre les balises <head></head>. Elles peuvent être ignorée en fonction du client de messagerie utilisé
- utiliser des blocs flottants (div, span, class…)

Les choses à faire :
- utiliser des tableaux pour la mise en forme
- stocker les images sur un serveur web mais ne pas utiliser des mots comme mail, email, emailing ou newsletter dans l'URL des images
- utiliser des CSS 'en ligne' exemple : <p style="font-weight: bold; font-size: 12px; line-height: 12px; font-family: georgia,times,serif;">
- ajouter à toutes les images : border="0" style="display:block;" pour éviter les bugs d'affichage sous Gmail et Hotmail
- fermer toutes les balises ouvertes

… et puis tester, tester, re-tester. Je conseil de tester en particulier avec Hotmail qui est très susceptible.

Fond de page et corps de mail

Dreamweaver

Vue hybride

Discussions similaires

Partager

Partager