Check-list Newsletter

5 mars 2009 , , 9 commentaires
Dernièrement, j’ai réalisé des newsletters. « Wo l’autre hé ! Facile la newsletter ! Tu vas pas nous faire un billet pour ça ». Bha si. La newsletter vaut bien un billet car ce n’est rien d’autre que le cauchemar du wedesigner. Souvenez-vous des belles années d’avant 2000, à l’époque des IE5 et NEtscape, où il fallait faire quasiment un site par navigateur. Et bien aujourd’hui, en 2009, les clients mail, c’est pareil. Voici donc une une checklist de bonnes pratiques à suivre pour réaliser une newsletter bulletproof qui passe sur tous les clients mail, webmail compris.

Si jamais il s’avère que j’ai oublié quelque chose dans cette liste, n’hésitez pas  à me le faire savoir dans les commentaires.

Mise en page

  • Mise en page en tableaux
  • Style inline – le plus sûr ou dans le head. Pas d’appel de css
  • Ajoutez un tag container div id= »container » juste aprè le tag body et comencez toutes vos déclarations de style (si vous les mettez dans le « head ») par #container nomdutag. Certains clients webmail suppriment tout simplement les déclarations qui commencent pas un « . » ou par une lettre.

Accessibilité

  • Oubliez tout ce que vous savez sur l’accessibilité sur le web. Le monde de l’emailing est encore un no man’s land de l’accessibilité. Mise en page en tableaux avec un code absolument pas sémantique. Seul impératif : en haut de votre newsletter, ajoutez le lien Des problèmes pour lire cet email ? Consultez la version en ligne qui renvoie vers une page html, hébergée sur un serveur, copie conforme de la newsletter envoyée.
  • Prévoyez d’envoyer une newsletter au format texte pour les messageries qui ne tolèrent pas le html. La plupart des outils d’emailing proposent cette option.
  • Si vous spécifiez une couleur de police claire (ex: #fff) assurez-vous que le fond de l’élément dans lequel se trouve votre texte soit foncé, même si vous appelez une image de fond. Il se peut que celle-ci ne soit pas chargée et dès lors, le texte ne sera pas visible.

Contraintes légales

N’utilisez que des adresses email que vous avez le droit d’utiliser. Ca tombe sous le sens mais il est toujours bon de le rappeler. Voici les principales règles à respecter lors de la récupération d’emails :

  • les adresses doivnet avoir été récupérées via un formulaire sur votre site
  • les utilisateurs doivent avoir coché la case opt-in sur votre formulaire d’inscription. Pour les petits malins, cette case ne doit pas être cochée par défaut. Pour plus d’infos sur l’optin et l’optout, je vous renvoie sur l’article de Snipemail, Emailing : définitions de l’Opt-in et de l’Opt-out.
  • vous avez le droit d’utiliser des adresses de clients qui ont acheté un produit  (ou une prestation) chez vous au cours deux dernières années
  • Si quelqu’un vous donne sa carte de visite, vous pouvez utiliser son mail à condition de lui voir bien expliqué qu’il pourrait recevoir des emails de votre part.

N’oubliez pas d’ajouter un lien de désinscription en bas de la newsletter.

Images

  • Pas d’images de fond sur le tag body : certains webmails suppriment tout simplement le tag body. Votre imagen’apparaîtra donc pas.
  • Utilisez des nom d’images abrégés (ça fait gagner quelques octets)
  • Spécifier la taille (width et height) des images. Si par malheur vous avez un attribut alt un peu long, c’est le texte de l’attribut – ou bien le nom de l’image – qui s’affichera dans les clients mail qui n’auront pas téléchargés les images. Pour peu que vous ayez un texte à rallonge, ça peut éclater la mise en page.
  • Les images doivent être hébergées sur un serveur (et pas en local – riez pas ça arrive souvent)
  • Les adresse doivent être en absolu (http://www.monsite.com /image.gif et non /image.gif)
  • Si vous avez besoin d’afficher des images de fond (background: url(adresse de l’image)) faites le en style inline : <table style= »background-image: url(adressedemonimage.gif);> et pas dans le head de votre fichier. Je sais c’est moche mais msn par exemple n’affiche que les images de fond déclarées en style inline.

Polices

  • Spécifiez les tailles en pixel (et non en em ou %)

Outils

Vous pouvez utiliser un outil open source genre poMMo ou PHPlist mais le nerf de la guerre dans le marketing direct online, c’est la délivérabilité. Si votre site est sur un serveur mutualisé, ne vous étonnez pas de recevoir de nombreux retours de la part des principaux FAI comme quoi votre mail n’a pas été délivré car identifié comme Spam (Free est spécialiste en la matière). Pour éviter cet écueil, la solution la plus simple est d’utiliser des outils d’emailing en ligne type campaign monitor, Newsberry ou Snipemail.

Contenu

Vaste sujet que je ne traiterais pas ici. Pour des infos pertinentes là-dessus, je vous invite à consulter la série d’article de Ecrire Pour le Web sur le sujet :

Et si ça ne vous siffi pas, vous pouvez aller faire un tour sur mon delicous aux tags newsletter et emailing.

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. héhé 🙂 Bon article.
    Une info préalable pour pas me faire taxer de ne pas être transparent :
    Snipemail c’est moi qui m’en occupe (blog + solution emailing)
    Voila c’est fait 🙂

    Ce sont ceux qui ne font pas de newsletters ou qui ne se soucient pas du résultat qui pensent que l’on peut gérer celles ci en « 98’s style ».

    L’emailing, c’est devenu un gros piège pour tous. Entre les problèmes de design, de portabilité entre les webmails et les différents outils de messagerie, de déliverabilité (et là y’a aussi une tonne de trucs à dire !) sans compter les filtres anti spam (reputation, heuristique et comportementaux), il y en a des écueils avant que le mail arrive en boite et ne soit lu. 🙁

    Certains des conseils donné sont à double emploi :
    – La version texte par exemple est pratique pour ceux qui ne lisent pas la version HTML, mais il faut aussi savoir qu’elle est souvent analysée par les filtres heuristiques anti-spam. Donc ceux qui font l’économie d’une version texte brut ont un risque de se prendre des spampoints et d’aboutir dans la spambox du destinataire.
    – les polices claires doivent être lisible du point de vue de l’accessibilité, mais aussi pour l’analyse anti-spam, sinon c’est vu comme une tentative honteuse, et c’est puni par un tour à la poubelle.

    Pour la partie contrainte légale, je vous conseillerais 2-3 articles à lire qui permettent de bien comprendre les tenants et aboutissants des emails opt-in, opt-out, et ceux que vous pouvez obtenir en externe. (pour les trouver, utilisez le moteur de recherche interne de Snipemail, je ne vais pas transformer les commentaires de Grégoire en ferme à liens !)
    – définition de l’opt-in et de l’opt-out
    – psychologie de la réception d’un email

    – – – – –
    Edit : les liens en direct pour ceux que ça intéresse définition de l’opt-in et de l’opt-out et psychologie de la réception d’un email
    Grégoire

    – – – – –
    Enfin, méfiez vous des prestataires, renseignez vous sur eux sur le web avant de leur confier vos campagnes. Certains sont vraiment là uniquement pour vous pomper votre fric (c’est direct mais so real!) Entre les fichiers utilisés provenant de bases CD, les prestas pourries à base d’image unique, ou les options de repasse qui renvoie le même mail à tout le monde, sans prendre en compte du comportemental, y’a foison de charlatans 😉
    C’est d’ailleurs la raison de la création du blog Snipemail il y a presque 3 ans 🙂 J’espère que sa lecture vous aura rendu plus alerte par rapport aux mauvaises pratiques du secteur, et vous aura permis de monter le niveau de vos campagnes.

  2. Check-list Newsletter http://minurl.fr/964

  3. Merci pour cet article, pas le temps de visiter tous les liens tout de suite mais…

    Je pensais qu’il n’y avait rien de plus chiant pour un développeur / designer que de faire une maquette de site qui ait le même rendu sur tous les navigateurs.

    J’ai compris que c’était de la rigolade quand j’ai bossé sur les premières maquettes de mails ! Un rendu identique sur tous les webmails et logiciels de messagerie, c’est mission impossible !

    Je salue au passage Micro$oft qui, pour la dernière version d’Outlook (2007), a choisi d’utiliser le moteur de rendu HTML de Word au lieu de celui d’IE !!! Pour des raisons de sécurité, disent-ils…

    J’avais dégoté un tableau récapitulatif de toutes les propriétés CSS supportées ou non ar les princcipaux clients mail. Dès que je le retrouve je te file le lien !

  4. Et Outlook 2007 n’affiche aucune image de fond, que ce soit avec ou

  5. Merci Charles Boone pour ton long et éclairant commentaire. Ca fait plaisir de voir un expert en la matière alimenter la discussion. Pour les liens, la prochaine fois, tu as ma permission pour transformer les commentaires en ferme à liens, pourvu qu’il soient pertinents ! J’ai d’ailleurs rajouté tes liens dans le corps de l’article – dans la partie « légale ».

  6. […] écrire sa newsletter Check-list Newsletter – […]

  7. Excellent article qui résume bien une chose : l’Email Marketing est une spécialité qui ne s’appréhende pas à la légère sous peine d’avoir des résultats désastreux.

    Je rejoins Charles dans son conseil : les prestataires de routage sont nombreux et peuplés de Charlatans, attention avant de s’engager et de confier ça base à quelqu’un !

    Cordialement,
    Jérôme

  8. […] Une check-liste pour concevoir une newsletter valide pour tous les clients mails (tags: webdev html mail newsletter) […]

  9. […] Check-list Newsletter | Barbablog. […]

Mentions

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.