Les bonnes pratiques HTML

Les bonnes pratiques HTML
L’utilisation de l’HTML dans l’Emailing requière une certaine rigueur si l’on souhaite que nos
mails aboutissent de façon optimale chez les abonnés. La variété des systèmes de lecture d’Emailing
en entreprise (Outlook, Lotus Notes,…) et chez les particuliers (Hotmail, Yahoo, Gmail, …) nécessite
de se soumettre à quelques règles.
Un mauvais code HTML rend le message illisible sur certaines boites mails, il peut ne pas
fonctionner correctement et peut déclencher un blocage total ou un filtrage de l’email en dossier
« courrier indésirable ».
> Créer un message avec un bon ratio texte dynamique / image
> Largeur de l’email : entre 600 et 700 px afin d'être sûr que vos lecteurs n'aient pas à employer
l'ascenseur horizontal pour la lire.
> Poids : plus le code est léger, plus il a de chance d’arriver sans problème d’interprétation en boîte
de réception du destinataire.
> Oter les balises
<!DOCTYPE html PUBLIC "…"><html xmlns="…">
<head>
<meta http-equiv="…" content="…" />
<title>…</title>
</head>
…qui sont en entête de mail, et ôter les balises :
<body>
</body>
</html>
…qui sont en fin de mail. En fait on ne garde que le contenu des balise <body> et </body>.
> Toutes balises ouvertes doit être fermées.
> Positionnement : utiliser une mise en page en tableau et non pas en div pour positionner vos
différents éléments.
> Styles : ne faites pas appel à des feuilles de styles externes et éviter les styles dans les balises
<head>…</head>. Insérer les styles dans les balises <td>, <span>...
> Polices : utiliser une des 5 polices systèmes (Arial, Courier New, Times New Roman, Georgia,
Verdana)
Experian CheetahMail - Les patios de l'Alma, 133 rue Fontenoy - 59100 ROUBAIX - Tél. +33 (0)3 20 68 88 40
> Images :
- héberger les images
- mettre un lien absolu et non pas relatif (ni une adresse IP)
- remplir les balises ALT (elles servent de commentaires d’images)
- préciser la taille de l’image (hauteur et largeur)
- éviter les images trop grandes qui prennent toutes la largeur du mail
- éviter les images trop lourdes
- les URL de vos images ne doivent pas avoir de caractères spéciaux ou d’espaces
EX : <img src="http://www.ems.com/nomclient/mai08/img/logo.jpg" alt="le commentaire de
l’image" width="170px" height="45px " />
> Fond de cellules : dans les cellules avec une image de fond, prévoyez aussi une couleur de fond (au
cas où l’image ne passe pas comme sous outlook 2007 par exemple).
> Objet du message : ayez un objet propre, c'est-à-dire éviter l’emploi de majuscules, de signes de
ponctuation, de termes trop commerciaux ou trop médicaux ou du mot "gratuit". La personnalisation
de l’objet peut aider à l’ouverture de l’email.
> Encoder vos caractères spéciaux en HTML :
à
é
è
ê
ç
ô
û
ï
î
&
€
&agrave;
&eacute;
&egrave;
&ecirc;
&ccedil;
&ocirc;
&ucirc;
&iuml;
&icirc;
&amp;
&euro;




&reg;
> Eviter d’écrire en blanc, préférez un fond gris très clair.
> Images maps : leurs utilisation est déconseillé, préférez un découpage à l’aide de tableau.
Ex : sur le webmail free les images maps ne sont pas cliquables.
> Vérifier avant d’envoyer :
- Tester votre intégration sur plusieurs navigateurs ( IE6 et 7 / Firefox / Netscape… )
- Tester vos liens
- Vérifier si l’email sans les images reste lisible et compréhensible
- Tester le rendu visuel dans plusieurs webmails
> Flash, javascript : il est fortement déconseillé d’utiliser du Javascript, du Flash, de l’ajax … ou
d’insérer un formulaire dans vos mails.
> Ne pas ajouter de pièces jointes.
Experian CheetahMail - Les patios de l'Alma, 133 rue Fontenoy - 59100 ROUBAIX - Tél. +33 (0)3 20 68 88 40
> W3C : De manière générale, votre code doit respecter les normes internationales de codage W3C.
Une version en français d’un validateur : http://www.validateur.ca/
BAYARD PUBLICITÉ - 18 rue Barbès 92128 Montrouge Cedex - 01 74 31 48 39