Webmercatique's Blog

mars 16, 2010

Recommandations créa HTML

Filed under: Emailing — webmercatique @ 9:35
Tags: , , ,
  1. 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.

  1. LES FEUILLES DE STYLE :

Il est important de noter que l’interprétation des feuilles de style diffère d’un webmail à l’autre. Pour éviter qu’une partie de votre cible ne puisse manquer votre message, il est préférable de suivre ces recommandations :

  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.
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 styles sur la plupart des webmails, il faut alors, pour toutes les créas HTML, s’assurer que les balises <style>…</style> soient dans la balise <body>…</body> et non pas dans <head>…</head>.

3.1. Interprétation du style CSS par les webmails / clients mails:

CSS en ligne : Pour avoir la meilleure compatibilité possible de vos emails au format HTML, il est recommandé d’utiliser le style CSS dit « en ligne ».Certains clients mail suppriment les balises d’entête qui peuvent contenir les définitions de style CSS. Il est donc préférable de préciser le style détaillé dans les attributs de chaque balise le nécessitant lors de sa création.
Style de body ignoré : Etant basés sur une structure HTML, Les web mails contiennent déjà une balise <body>. Pour afficher votre message, ils procèdent donc à la suppression de cette balise existante dans votre créa ou ils la renomment en <xbody>, et dans les deux cas le style de body serait inapplicable.
La solution consiste à envelopper le contenu de tout le <body> dans une balise <div> et de donner à cette dernière les propriétés de style, que vous comptiez donner au body.
Emails sans aucun style : Les webmails effacent les « . » précédents les noms des classes par exemple : « .ClasseX » devient « ClasseX ». Par conséquent, elle ne peut plus être appliquée. Pour y remédier, il est préférable d’utiliser les sélecteurs de classe, qui préfixent les classes par la balise concernée. Ainsi « .ClasseX » devient « div.Classe ».

3.2.                   Le « background:url(http://&#8230;./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.

Comment éviter ces problèmes ?

1. Identifier toutes les images appelées par la fonction « background … no-repeat ».
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 lors de la création de votre contenu :
Etant donné que les problèmes sont au niveau du code, il faut utiliser un éditeur de texte.

3.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.
Celles-ci 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> La balise <SPAN> permet de découper un paragraphe en sous parties afin de lui appliquer un style particulier rattaché lui aussi à la feuille de style
– Exemple avec <span> : <span> Dans certains e-mailings, le code HTML est omposé 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é.

  1. 4. 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 »>
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.

  1. 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>
Par
<body> <table src= « poissons.gif » color=#454545>
• Il en est 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 pas inséré le bgcolor.

5. VERSION RTF :

• 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. La version RTF est de moins en moins nécessaire.
• 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.
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

6. Webmails et clients mails spécifiques :

6.1. Outlook 2007 :

Parce qu’Outlook 2007 utilise le moteur de rendu de Word au lieu de celui d’Internet Explorer, il réserve quelques restrictions pour l’affichage d’un contenu HTML, entre autres :
• Ne supporte pas les images de fond (HTML ou CSS).
• Ne supporte pas les formulaires
• Ne supporte pas le format flash ni les autres plugins.
• Ne supporte pas les CSS floats
• Ne supporte pas les images GIf animé
• Très pauvre support du padding (la marge entre le contenu et la bordure d’un élément HTML)
• Très pauvre support du margin (les 4 marges extérieures d’un élément HTML)
• Ne supporte pas les balises <meta>, <frame>, <frameset>, <head>, html et <style>
Microsoft a communiqué une liste entière des compatibilités des styles CSS avec Outlook 2007. Pour la découvrir en entier, visitez cette page : http://msdn.microsoft.com/en-us/library/aa338201.aspx

6.2. Gmail :

Gmail ne supporte les styles CSS que s’ils sont en ligne. Une fois en ligne, Gmail leur réserve quelques restrictions :
• Ne supporte pas ni les images ni les couleurs de fond
• Ne supporte pas les CSS floats
• Très pauvre support du padding (la marge entre le contenu et la bordure d’un élément HTML)
• Très pauvre support du margin (les 4 marges extérieures d’un élément HTML)
• Ne supporte pas les balises <meta>, <frame>, <frameset>, <head>, html et <style>

6.3. Yahoo! mail :

Yahoo ! mail est l’un des webmails les plus performant en terme de compatibilité avec les styles CSS.
Que ce soit avec sa version classique ou sa nouvelle version, Yahoo supporte presque tous les styles, à l’exception de «List-style-image».

7. Insertion d’images dans le code HTML :

Pour inciter vos destinataires à lire le contenu de votre message, nous vous conseillons de répartir de façon équilibrée les parties dédiées au texte et les parties graphiques intégrant images ou illustrations. Une créa bien équilibrée est plus à même de séduire visuellement, d’être donc lue par votre cible et surtout diminue considérablement le risque de spam.
Les deux formats d’image les plus reconnus sur le Web sont les formats GIF et JPEG. Ils donnent des résultats assez équivalents, bien que le JPG soit plutôt recommandé pour des images avec des tons nuancés ou dégradés.

Une image de grande taille prend beaucoup plus de temps à s’afficher que celle de petite taille. Si votre newsletter contient des images volumineuses, elle risque d’être ignorée par l’internaute. Veillez à utiliser des images de taille réduite, en 16 couleurs ou d’insérer des petites images munies de liens dirigeant vers une version plus grande.
De plus en plus de clients de messagerie utilisent des panneaux de prévisualisation et
bloquent les images par défaut. Prévoir un texte alternatif qui s’affiche en « alt » pour vos images est alors préférable pour que l’internaute ne perde pas le fil de l’exposé et peut-être active l’affichage et découvre votre image.
Exemple alt=« découvrez comment bénéficier de tous nos modules pour seulement 190€ par mois »
Assurez-vous de toujours inclure la largeur et la hauteur (width et le height) dans les balises « img » de toutes les images. Cela garantit que les images vides de calage ne seront pas étirées, détruisant votre mise en page.
Le blocage des images peut engendrer, dans certains cas, une déformation de votre créa. Il serait alors préférable de procéder à des tests de votre message en mode image ON (images affichées) et en mode Image OFF ( images bloquées par défaut).
Intégrer un lien vers une page miroir, une page hébergée qui contient le contenu de votre message, pour assurer l’affichage correct de vos images.

8. 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.

9. 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.

9.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 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 plugin 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.

9.2. 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. QUELQUES CONSEILS :

10.1. Bien vérifier le code HTML :

Assurez vous que votre code HTML est propre (Syntaxiquement correct) et respectant toutes nos recommandations. Un code HTML correct diminue le risque de SPAM.

10.2. 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.

10.3. 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 à 100 Ko afin que celui-ci ne soit pas bloqué lors de sa réception.

10.4. Encoder les caractères spéciaux :

Au niveau du contenu de vos mailings, l’idéal est d’encoder les caractères spéciaux de la manière
suivante :
é ==>&eacute;
ê ==>&ecirc;
è ==>&egrave;
à ==>&agrave;
€ ==>&euro;
… …

10.5. Intégrer des liens valides :

Vérifier que les liens intégrés ne sont pas cassés et qu’ils ramènent bien vers les pages souhaitées. En effet, des liens cassés ou pointant vers des sites malicieux augmentent le risque de SPAM.
10.6. Tester vos créations :
Il est important, avant l’envoi réel de vos messages e-mailing, de tester l’envoi sur plusieurs webmails type Hotmail / gmail / yahoo / Voilà représentatifs de votre base d’adresses mail.