Archives pour septembre 2010

Intégration HTML d’une newsletter : trucs & astuces

24/09/2010 9 h 16 min

Voici un billet pour vous donner quelques « trucs » concernant l’intégration HTML de mailings/newsletters.

En effet, je m’occupe depuis plusieurs années d’intégration html de site et de nombreuses newsletters. Autant pour un site web, on est assez libre d’intégrer comme on le souhaite, autant pour une newsletter, c’est plus compliqué car il existe de nombreux lecteurs de mails et que le code ou le css est souvent réinterprété, voir parfois supprimé ou ignoré. Et oui, pour le développement d’une newsletter, on ne doit pas prendre en compte l’affichage dans un navigateur mais dans un lecteur de mail (lecteur type logiciel (Outlook, Lotus Note etc.) ou type en ligne / webmail (Hotmail, Gmail, Yahoo…)) ce qui est totalement différent et parfois bien compliqué (difficile de pouvoir tester partout).

Voici donc une liste d’astuces que j’utilise personnellement & qui permettent d’avoir un affichage correct, voir parfait sous les pires des lecteurs de mails (je pense notamment à Outlook 2007) :

  • J’utilise Dreamweaver pour la création des newsletters. Je choisis toujours un encodage type Europe de l’ouest afin d’avoir les caractères spéciaux encodés correctement
    <meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″ />
  • Utiliser des tableaux pour la mise en page mais n’abusez pas des rowspans & colspans, il vaut mieux même les éviter pour avoir une meilleure maîtrise de l’affichage de sa page sous différents lecteurs de mails.
  • Ne pas faire de feuille de style css extérieure liée au document.
  • Ne pas créer des styles css dans une balise <style = »text/css »></script>
  • Tous les css doivent être des styles css en ligne, c’est-à-dire  apparaitre sous forme de style= » »
    exemple : style= »font-size:11px; »
  • Penser à répéter les styles basiques de mise en forme du texte dans chaque cellule de tableau contenant du texte à formater.
    exemple : la police (font-family), les couleur de texte (color), la taille du texte (font-size)
  • Ne pas utiliser de paddings css & de margin css. Utiliser la bonne vieille méthode des cellules de tableau pour créer l’effet margin ou padding désirée.
  • Eviter toutes les règles css de positionnement (position & float).
  • Les images en fond de cellule sont à éviter que ce soit en html ou en css. On peut par contre abuser de la propriété de couleur de fond des cellules – bgcolor. Si toutefois vous devez utiliser une image en fond de cellule, n’oubliez pas de mettre aussi un bgcolor de la teinte la plus présente de l’image en fond. Ainsi pour les lecteurs de mails qui n’afficheront pas l’image, ils afficheront quand même une couleur de fond et le texte restera lisible.
  • Ne pas utiliser des règles de styles courts.
    exemple : font :arial 10px #000000 ; mais plutôt font-family :arial ; font-size :10px ; color :#000000 ;
  • Pour toute image ayant un lien autour de celle-ci, penser à mettre un border= « 0 »
  • Pour centrer horizontalement la news dans la page, la meilleure méthode est d’indiquer un align= »center » sur le premier tableau contenant. Cependant ensuite, il ne faut pas oublier de mettre un align= »left » sur chaque cellule qui aura un texte normalement aligné à gauche.
  • Mettre sur chaque lien <a href=  » « > un target= »_blank » et les propriétés couleurs de ce lien (si celui-ci est un texte), soit color : » » ; sans oublier le text-decoration:none; si on ne souhaite pas un soulignement.
  • N’utilisez pas la veille balise html font. Utilisez les styles css pour mettre en forme votre texte.
  • Le plus simple parfois est de faire une newsletter toute en image. Tout dépend de la mise en page de celle-ci et aussi de sa récurrence.
  • Eviter d’utiliser les balises <p>, <h1>, <h2> etc. Car celles-ci peuvent être reformatées par certains lecteurs de mail.
  • Inutile d’inclure des JavaScripts dans la newsletter, ils ne seront pas pris en compte par les lecteurs de mails.
  • Les gifs animés bugguent sous Outlook 2007. Ils n’affichent que la première image. Il est donc important dans l’élaboration du gif, de mettre les informations les plus importantes dans la première image du gif.
  • Attention aux copiers collers words. Mieux vaut passer via un notepad pour copier coller le texte.
  • Il peut rester cependant un problème d’apostrophe créé sous Word. N’hésitez pas à remplacer l’apostrophe affichée en source ainsi : &rsquo; par un ‘
  • Et enfin, 3 méthodes au choix pour gérer un bug d’espace non souhaité sous les images sous Gmail :
    – mettre un style= »font-size:0; » à toutes vos cellules qui contiennent une image
    – ou un style= »display:block; » sur l’image
    – ou un valign= »absbottom  » sur vos images (via @anthor).

Voici quelques liens qui peuvent vous guider pour mieux comprendre les différentes règles à prendre en compte dans le développement d’une newsletter :

Rendez-vous sur Hellocoton !
PartageEmail this to someoneShare on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on Pinterest