Recommandations HTML : optimisez la délivrabilité de votre créa emailing

L’un des facteurs de réussite d’une campagne emailing est la garantie d’un bon affichage de votre message sur les diverses boîtes de réception de vos destinataires. Nous vous offrons dans cet article des recommendations pour garantir le meilleur affichage de votre créa ainsi que les erreurs à éviter dans le code HTML pour optimiser la délivrabilité de vos emailings.

Pour un bon affichage de votre crea et un code html propre favorisant la delivrabilité de vos emailings :

Encodez les caractères spéciaux :

Pour anticiper tout bug lors de l’affichage, il est préférable d’encoder les caractères spéciaux contenus dans le code HTML de votre créa. En voici quelques exemples :

N.B : l'encodage de votre emailing sous Dialog est automatique.

Utilisez avec prudence le format Flash :

Le format Flash, contrairement aux formats gif, ne fonctionne pas sur tous les webmails. Hotmail, par exemple, supprime l’une des balises permettant la visualisation de Flash. Si vous n’avez pas fait une étude préalable des webmailers sur lesquels ce format fonctionne et si vous n’avez pas segmenté en conséquence votre base d’adresses, nous vous déconseillons d’envoyer un emailing intégrant du Flash.

Limitez le poids de votre message :

Pour éviter que votre emailing ne soit bloqué lors de sa réception, pensez à optimiser la taille du message (créa HTML sans images). Elle doit être en moyenne inférieure à 100 Ko.
Optimiser également la taille des images s'avère nécessaire (arbitrage entre les formats .gif et .jpg ainsi qu'entre leurs qualités respectives) Un équilibre minimum entre images et textes est aussi préconisé.

Evitez l'utilisation du 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 emailings au format 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.

Hébergez vos formulaires

L’intégration de formulaires dans les emailings 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  : certains webmails suppriment le bouton de validation, vous ne récupérerez 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.

Tenez compte de la compatibilité des styles CSS avec les différents webmails et clients de messagerie  :

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 tenir compte des différences entre les divers webmailers et clients de messagerie et opter idéalement pour des styles "inline" :

Parmi les différences entre les webmailers on peut citer :

1. 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 ( ne lit pas les images en background "background-image:" ou "background="...)
   
2. Gmail ne supporte les styles CSS que s’ils sont en ligne. Une fois en ligne, Gmail leur réserve quelques restrictions
3. 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».

Pour avoir plus de détails sur la compatibilité des styles CSS avec différents webmails et clients de messagerie, nous vous invitions à consulter ce lien : http://www.edatis.com/compatibilite-css-emails.htm

Testez votre campagne

Enfin, une fois toutes ces précautions prises, nous vous recommandons de tester votre campagne emailing avant l’envoi final. Ne négligez pas cette étape importante et n’hésitez pas à envoyer des tests sur les différents webmails représentatifs de votre base d’adresses.

	>> Ce qu'il faut retenir pour avoir un code HTML propre :
Optez pour >>		Evitez >>
	Un équilibre entre textes et images		Les tableaux imbriqués
	Un remplissage des balises "alt"  (pas trop longues)		Une créa constituée avec une image unique
	Des styles CSS inline		Un contenu avec des vidéos, des formulaires, Javascripts, pièces jointes, Flash, iFrame (Rediriger éventuellement vers des contenus hébergé
	Le code HTML composé de tableaux avec  <table> <tr> et <td> uniquement		Les balises <div>, <tbody>
			Les tailles négatives dans les attributs  de la balise <FONT>
			Les commentaires dans le code  " <!--commentaire_XYZ -->"
			Les lignes vides dans le code

Par ailleurs et parmi les services offerts par Edatis, vous retrouvez toute une panoplie de prestations qui vous garantira une créa de qualité et par voie de conséquence une délivrabilité optimale, à savoir, la création de chartes Emailing, le découpage HTML, l'audit et l'optimisation de vos créas, test des rendus sur les divers webmailers et clients de messagerie... Donc, n'hésitez pas à prendre contact avec votre chargé(e) de clientèle afin de connaître les détails de ces prestations

Vous pouvez par ailleurs éviter les frais récurrents d’audit et d’optimisation des créas de vos emalings en vous outillant de la formation Edatis "Optimiser le code HTML de la créa d’un Emailing" pour réussir en toute autonomie un code HTML clean maximisant la délivrabilité de vos emails. (Pour toute demande d'info vous pouvez adresser un e-mail à formation@edatis.com)