Garantissez l`affichage de vos créas.

Transcription

71, rue du faubourg Saint Martin 75010 Paris
t. 01 44 84 79 00 f. 01 42 40 13 77
http://www.edatis.com
Evoluez vers l’informatique mutualisée
FICHE PRATIQUE
Module
Sujet
E-MAILING
Recommandations Créas HTML
Insertion de vos créas en version HTML
Garantissez l’affichage de vos créas.
LE JAVASCRIPT............................................................................................ 2
LES FEUILLES DE STYLE :............................................................................. 2
2.1.
DECLARATION DES POLICES, COULEURS… DANS <HEAD>........................................ 2
2.2.
LE "BACKGROUND:URL(HTTP://..../IMG.GIF) TOP LEFT NO-REPEAT;"............................ 3
2.3.
LES BALISES <SPAN> ET <DIV> ..................................................................... 5
3. LES POURCENTAGES POUR LA CREATION DE TABLEAUX DANS LE CODE
HTML : ................................................................................................................ 6
4. LA BALISE <BODY> : ................................................................................... 7
5. LES ACCENTS DANS LES SUJETS/ OBJETS DE MAIL : ................................... 7
5.1.
GENERALITES :.......................................................................................... 7
5.2.
VERSION RTF (DE MOINS EN MOINS NECESSAIRE) : ............................................... 7
5.3.
WEBMAILS SPECIFIQUES : CARAMAIL / VOILA / AOL : ............................................ 8
6. LES FORMULAIRES : .................................................................................... 9
7. LE FORMAT FLASH : ..................................................................................... 9
7.1.
IMAGE FLASH : .......................................................................................... 9
7.2.
VIDEO FLASH : ........................................................................................ 10
8. LIENS DE TYPE SECURE.EDATIS.NET : ....................................................... 11
9. QUELQUES CONSEILS : .............................................................................. 11
9.1.
CENTRER VOS E-MAILINGS (NEWSLETTERS, ..) :.................................................. 11
9.2.
RESPECTER LA TAILLE DES MESSAGES : ............................................................ 11
9.3.
ENCODER LES CARACTERES SPECIAUX : ............................................................ 11
10.
TESTER VOS CREATIONS : ...................................................................... 12
1.
2.
Recommandations créas HTML
1 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
1. LE JAVASCRIPT
Le langage de programmation JAVASCRIPT permet de rendre une page HTML plus
attractive, en y insérant du code réagissant, par exemple, aux évènements de
l'utilisateur. Ce langage permet également de valider la donnée saisie dans un formulaire
HTML, juste avant la soumission de celui ci (si lors de la validation, une erreur est
détectée, un message d'erreur est proposé).
L’insertion du langage JAVASCRIPT dans les formats HTML est fortement
déconseillée. En effet, certains webmails ne l’interprètent pas correctement, voire
suppriment complètement cette partie du code. Le langage HTML ne peut donc pas
substituer le langage javascript. Il est cependant possible de retrouver un résultat proche
dans des cas très particuliers.
Ci-dessous la liste des webmails fonctionnels (qui acceptent Javascript) et non
fonctionnels (qui ne l’acceptent pas) :
Webmails
Fonctionnels
Non Fonctionnels
Yahoo
Free
Caramail
Laposte.net
Club-internet.fr
Neuf.fr
Gmail.com
9online.fr
Outlook
Wanadoo
Hotmail
AOL
Voilà
Tiscali
Msn.com
2. LES FEUILLES DE STYLE :
2.1.
Déclaration des polices, couleurs… dans <HEAD>
La plupart des webmails ont tendance à supprimer tout ce qui se
trouve à l’extérieur de la balise <body>…</body>, signifiant
ainsi que l’e-mail reçu sera vide si cette balise n’existe pas.
2 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
Exemple :
Dans le cas où une créa paramétrée ne présente
pas la balise <body>…</body>, le résultat
apparaît comme suit :
En effet, certains éditeurs éliminent toute la créa
si
celle-ci
ne
contient
pas
la
balise
<body>…</body>.
C’est pourquoi, afin de garder la feuille des style sur la plupart des webmails, il faut
alors, pour toutes les créas HTML, s’assurer que les balises <style>…</style> soient
sous la balise <body> et non pas dans le <head>…</head>.
2.2.
Le "background:url(http://..../img.gif) top left no-repeat;"
Cette fonction spéciale permet de gérer la répétition horizontale et verticale de l'image
d'arrière plan (image de fond). Elle est utilisée dans les feuilles de style mais est souvent
mal interprétée par les webmails. Elle n’est donc pas recommandée.
Exemple :
Cette newsletter contient dans le
code
HTLM
la
fonction
« background
…
no-repeat »
dans la feuille de style.
Aperçu de la créa
originale :
3 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
En comparant avec la créa originale, on peut visualiser les problèmes suivants après
envoi sur deux webmails significatifs:
Aperçu de
la créa sur le
webmail YAHOO :
Aperçu de
la créa sur le
webmail
HOTMAIL :
4 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
Comment éviter ces problèmes ?
1. Identifier toutes les images appelées par la fonction « background … norepeat ».
2. Etant donné que le « no-repeat » n’existe pas en HTML, il faut veiller à créer
des tableaux contenant des cellules dédiées ayant les mêmes dimensions que
les images, et passer celles-ci en background.
3. Dans certains cas, vous serez amenés à découper les images.
4. Ne pas oublier de bien préciser le width (largeur) et le height (hauteur) des
tableaux créés ainsi que de bien insérer les balises « cellpadding="0"
cellspacing="0" » Cette fonction sert à supprimer les marges dans les cellules
et entre celles-ci.
Astuces :
1. En cours de traitement, n’hésitez pas à mettre des « border=1 » pour avoir
une aide visuelle sur les résultats des modifications effectuées. Vous pouvez
ensuite reprendre « border=0 » dès que votre créa est bien paramétrée.
2. Ne pas utiliser des logiciels de type WYSIWYG : Etant donné que les
problèmes sont au niveau du code, il faut utiliser un éditeur de texte.
2.3.
Les balises <span> et <div>
La balise DIV permet de modifier l'aspect d'un ou plusieurs paragraphes à l'aide de
classes ou sous-classes. Ces classes ou sous classes se trouvent principalement dans la
feuille de style située dans la partie supérieure du code ou dans un fichier externe.
- Exemple avec <DIV> :<div class="style4">
La balise <SPAN> permet de découper un paragraphe en sous partie afin de lui appliquer
un style particulier rattaché lui aussi à la feuille de style
- Exemple avec <span> : <span class="style4">
Dans certains mailings, le code HTML est composé de balises DIV contenant le style css à
appliquer. Afin d’éviter tout problème, il faudra alors changer la balise <DIV> par la
balise <SPAN> à chaque fois que le style devra être appliqué.
5 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
Exemple :
Le style des noms des villes ainsi que celui du montant en euros sur ce mailing (image
ci-dessus) ont été appelés par des styles rattachés à la balise <DIV>. Les balises DIV
ont été remplacées par des balises <SPAN> en appliquant ces mêmes styles afin de
répondre aux standards des webmails.
Exemple :
- Pour les villes: <span class="style7"><strong>Bastia</strong></span>
- Pour le montant en euros : <span class="style31">€ 178 </span>
3. LES POURCENTAGES POUR LA CREATION DE TABLEAUX
DANS LE CODE HTML :
Il est déconseillé de mettre des pourcentages lors de la création de tableau dans le code
HTML. En effet, les Macintosh ont du mal à gérer ces pourcentages et ne permettent
donc pas de visualiser les messages (newsletters) correctement. Il est donc préférable
de mettre les longueurs et largeurs exactes afin de permettre une meilleure
visibilité pour un plus grand nombre de lecteurs.
Exemple :
On transforme
<table width="100%" border="0" cellspacing="0" cellpadding="0«
align="center">
Par
<table width="500" border="0" cellspacing="0" cellpadding="0"
align="center">
6 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
Il faut, de préférence, fixer la largeur des <table> avec une taille raisonnable qui est
aux alentours de 500 pixels pour permettre au plus grand nombre d’internautes de
visualiser la newsletter en entier dans la largeur.
4. LA BALISE <BODY> :
•
Il est préférable de ne pas inclure d’image de fond dans la balise <body> : La
balise <body> est une balise différemment interprétée suivant les webmails.
C’est pourquoi, il est préférable de mettre une image de fond dans un
tableau <table> qui sera défini en dessous ou juste après le <body>.
Exemple:
Changer
<body src= « poissons.gif » color=#454545>
En
<body> <table src= « poissons.gif » color=#454545>
•
Il en de même pour les couleurs de fond, bgcolor, qui peuvent être mal
interprétées si celles-ci sont insérées dans la balise <body>. Tout comme pour les
images de fond, il faut alors insérer une <table> en dessous du <body> dans
laquelle ne sera insérée le bgcolor.
5. LES ACCENTS DANS LES SUJETS/ OBJETS DE MAIL :
5.1.
•
Généralités :
Il est déconseillé de mettre des accents dans les sujets de mailing car ceux ci
entraînent des erreurs sur un certain nombre de webmails.
Exemple sur Caramail.com :
=?Default?Q?Les_Indispensables_de_l'=E9t=E9_!?=
Au lieu de
« Les indispensables de l’ete »
5.2.
•
•
Version RTF (de moins en moins nécessaire) :
Le format RTF (Rich Text Format) a été mis en place pour les webmails ne
pouvant pas lire les images en particulier les versions antérieures d’AOL.
Les balises acceptées par ce format sont les balises HTML les plus simples.
Spécificités du format RTF :
Les accents dans les versions HTML pour le format RTF sont mal interprétés, il est donc
recommandé d’encoder les accents présents (i.e. mettre leur valeur HTML) dans vos
versions RTF.
7 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
Vous pourrez trouver les correspondances des accents HTML sur les tables de
correspondance ASCII :
http://www.lookuptables.com/
Exemple :
Version RTF fausse
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2"
color="#000000"><b>Nous avons sélectionné pour vous des produits utiles et
malins : de parfaites idées cadeaux pour Noël, à offrir ou à
s'offrir.</b></font></p>
Nous obtenons alors à la réception du mail dans la boîte AOL :
« Nous avons s&eacute ;lectionn&eacute ; pour vous des produits utiles et
malins : de parfaites id&eacute ;es cadeaux pour No&euml ;l, &agrave ; offrir
ou &agrave ; s’offrir »
Version RTF bonne
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2"
color="#000000"><b> Nous avons s&eacute ;lectionn&eacute ; pour vous des
produits utiles et mailins : de parfaites id&eacute ;es cadeaux pour No&euml ;l,
&agrave ; offrir ou &agrave ; s’offrir.</b></font></p>
Nous obtenons alors à la réception du mail dans la boîte AOL :
Nous avons sélectionné pour vous des produits utiles et malins : de parfaites
idées cadeaux pour Noël, à offrir ou à s'offrir
5.3.
Webmails spécifiques : Caramail / Voila / AOL :
1. Caramail :
•
•
•
Tout élément ou lien contenant le mot header dans le code source HTML sera
transformé. Par exemple, l’élément « Headerhaut.gif » sera transformé par
« VOIDerhaut.gif » sur la webmail Caramail.com.
Tout élément ou lien contenant le mot script dans le code HTML sera transformé.
sera
Par
exemple,
« http://www.edatis.net/scripts/general/altitude.html »
transformé par http://www.edatis.net/VOIDs/general/altitude.html, ce qui casse
définitivement le lien.
Les mots à ne pas employer dont donc : header, script, location.
2. Voilà et AOL Mail : Comme vu précédemment, Voilà et AOL Mail effacent le
contenu de la feuille de style.
8 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
6. LES FORMULAIRES :

L’intégration de formulaires dans les newsletters est déconseillée (même s’il est
techniquement possible d’en mettre) car la balise « formulaire » peut être
modifiée par les webmails :
o Certains webmails suppriment le bouton de validation.
o On ne récupère pas parfaitement tous les éléments du formulaire (liés à la
non possibilité d’intégrer du javascript).

Toutefois, si vous souhaitez intégrer un formulaire dans votre newsletter,
il est alors préférable de rajouter un lien vers une page hébergée
contenant votre formulaire.
Ci-dessous la liste des webmails fonctionnels (qui acceptent les formulaires) et non
fonctionnels (qui ne les acceptent pas) :
Webmails
Fonctionnels
Non Fonctionnels
Yahoo
Free
Caramail
Msn
Club-internet
Netcourrier
Ifrance
Hotmail
Wanadoo
AOL
Laposte
Voilà
Tiscali
Libertysurf
Infonie
9online.fr
7. LE FORMAT FLASH :
Il est déconseillé d’envoyer des emails intégrant un objet flash pour la simple raison que
la plupart des logiciels mails et webmails n’autorisent pas l’exécution de composants
ActiveX et du flash tout simplement.
7.1.
Image Flash :

Le format Flash, contrairement aux formats gif, gif animé et jpg, ne fonctionne
pas sur tous les webmails. Par exemple, Hotmail supprime une des balises
permettant la visualisation du Flash.

Si vous n’avez pas fait une étude préalable des mailers sur lesquels le Flash
fonctionne et découpé en conséquence votre BDD, nous vous déconseillons
d’envoyer un e-mailing contenant du Flash.

ASTUCE : il est possible d’insérer au niveau de l’animation Flash une image en
background (GIF) de même dimension afin que les internautes puissent visualiser
9 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
ou l’image ou le flash en fonction de leur webmail. Pour ce faire, vous devez
insérer à l’intérieur de la déclaration de l’objet flash <object></object>, une
balise <embed></embed> dans laquelle vous ne renseignez que l’url de l’image
gif / jpeg et ses dimensions.
Par ailleurs, la balise <embed> ne serait exécutable que si l'internaute, n'ayant
pas de plgin flash, autorise l'exécution de la balise <object>. Autrement, ni le
flash ni le backup gif ne sera affiché, et par conséquent, une croix rouge ( rouge)
ou un espace vide de la dimension de la video s’affichera à sa place.
Ci-dessous la liste des webmails fonctionnels (qui acceptent le format Flash) et non
fonctionnels (qui ne l’acceptent pas) :
Webmails
7.2.
Fonctionnels
Non Fonctionnels
Wanadoo
Laposte
Voilà
9online
Club-internet
Hotmail
AOL
Libertysurf
Tiscali
Free
Msn
Infonie
Netcourrier
Yahoo
Caramail
Ifrance
Vidéo Flash :
Concernant l’intégration d’une vidéo dans les emails, il faut respecter certaines
contraintes qui sont :

Proposer une alternative à la place du flash (un backup Gif). L’execution de Javascript
étant lui aussi interdit, il est donc impossible de détecter si oui ou non on peut
afficher le flash à l’internaute. La solution est d’utiliser la balise html
<embed></embed> dans la balise <object></object>.
Il ne faut pas intégrer de l’Action Script (langage de programmation propre à
Macromedia Flash, similaire au Javascript) dans la vidéo.
Démarrer la lecture de la vidéo uniquement et exclusivement si l’internaute a cliqué
dessus.
Proposer un lien externe pour permettre aux internautes qui n’arrivent pas à lire la
vidéo depuis leur logiciel mail ou webmail de le faire directement depuis internet
explorer ou un autre navigateur web ; à condition d’avoir le plugin Flash Player
installé sur leurs PCs.
10 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
8. Liens de type Secure.edatis.net :
Lors de l’utilisation de l’éditeur HTML disponible sur Dialog ou de l’utilisation de
Templates hébergés chez Edatis, vos créas peuvent contenir des liens vers des images
sous la forme http(s)://secure.edatis.net/chemin/variable/vers/image.gif.
L’existence de tels liens empêche la validation du mailing en question et il sera
nécessaire d’intervenir pour les changer.
Comment éviter ces problèmes ?
Pour les images en règle générale : Il suffit de renseigner le nom du fichier image dans
la balise IMG (exemple : <img src="image.gif" />) pour que Dialog le remplace par
le lien complet de l’image chargée (dans ce cas, la balise sera remplacée par ceci : <img
src="http://home.edt02.net/chemin/variable/vers/image.gif" /> )
Si une image est hébergée chez Edatis : Il faut que le lien vers cette image soit sous la
forme http://home.edt02.net/chemin/variable/vers/image.gif car ce domaine,
home.edt02.net, à la différence de secure.edatis.net, est équipé d’un système de
répartition de charge sur 10 serveurs indépendants. Ce système a pour but d’assurer la
disponibilité et la rapidité d’accès au contenu de vos créas.
9. QUELQUES CONSEILS :
9.1.
Centrer vos e-mailings (newsletters, ..) :
Selon le format d’envoi (HTML, Text, RTF), il est souvent plus sympathique pour le
destinataire de recevoir un e-mail au milieu de son mailer plutôt que « écrasé » sur la
gauche.
9.2.
Respecter la taille des messages :
Il est important d’optimiser la taille du message e-mailing (créa HTML sans images) qui
est en moyenne inférieur à 25 Ko afin que celui-ci ne soit pas bloqué lors de sa
réception.
9.3.
Encoder les caractères spéciaux :
L’idéal est d’encoder les caractères spéciaux de la manière suivante :
é
ê
è
à
€
…
é
ê
è
à
€
…
11 / 12
Edatis© 2006
t. 01 44 84 79 00 f. 01 42 40 13 77
10.
TESTER VOS CREATIONS :
Il est important, avant l’envoi réel de vos messages e-mailing, de tester l’envoi sur
plusieurs webmails type Hotmail / Caramail / yahoo / Voilà représentatifs de votre
base d’adresses mail.
12 / 12
Edatis© 2006