Vous prévoyez d'envoyer un emailing à tous vos abonnés, et vous souhaitez anticiper la plupart des soucis d'affichage chez vos lecteurs ? Cet article va regrouper des astuces pour cela !
Attention, dans cet article, certains items ne s'appliquent qu'aux lettres d'information (newsletters) au format HTML.
1. Quels sont les principaux médias de lecture d'e-mail ?
Avant de se pencher sur la rédaction de la lettre proprement dite, intéressons-nous aux médias utilisés pour lire les emails.
Dans cet article, je détaillerai 3 catégories de médias :
- Les médias les plus courants : les logiciels de messagerie. Ici seront examinés des logiciels comme, pour les plus connus, Outlook, Thunderbird.
- Les médias assez répandus : les webmails. Il s'agit d'une page internet où l'abonné consulte ses emails directement sur le serveur de son prestataire, par exemple sur le site d'Hotmail ou de Gmail. Les plus répandus sont Gmail, Hotmail, Yahoo, Horde ...
- Enfin, les médias grandissants : les appareils mobiles. Vous aurez tout de suite reconnu les smartphones, tablettes, iPhones, Blackberrys ...
Chaque média a ses propres spécificités. Voici quelques comparaisons qui peuvent vous aider à concevoir l'aspect général de votre emailing :
| Média | Type | Caractéristiques générales | Avantage principal | Inconvénient |
|---|---|---|---|---|
| = Les Logiciels = | ||||
| Outlook 2003 | Logiciel, payant |
|
Si la page HTML s'affiche correctement sous IE, Outlook 2003 l'affichera bien. | De moins en moins répandu au profit d'Outlook 2007 (sic), 2010, 2013. |
| Outlook 2007, 2010, 2013, 2016 | Logiciel, payant |
|
De plus en plus répandu. | Moteur de rendu d'affichage HTML = moteur de Microsoft Word, qui est loin d'être parmi le top 100 ... |
| Thunderbird | Logiciel, gratuit |
|
Commence à se faire connaître. Très bon support des emailings en HTML « basique », ainsi que des CSS 2. | Malheureusement très loin dans les chiffres derrière Outlook pour les logiciels. |
| = Les Webmails = | ||||
| GMail | Google Mail, très riche en fonctionnalités | Tri des mails comme des discussions, grande compatibilité et facilité d'utilisation. | Très utilisé, filtre anti spam très efficace (parfois même un peu trop). | Ne supporte pas les images de fond, désactive tous les styles CSS. |
| Hotmail / MSN / Outlook.com / Office365 | Equivalent Microsoft de GMail, un grand panel d'applications | Très répandu, client de messagerie instantanée intégré à Windows Sept | Très utilisé. | Ne supporte pas les images de fond, désactive tous les styles CSS. Filtre antispam parfois assez aléatoire. |
| = Les appareils mobiles = | ||||
| SmartPhone, tablette, iPhone, Blackberry | Téléphones, à l'origine, qui font bien plus que « téléphoner »... | De plus en plus répandus. | Public contacté à n'importe quelle heure de la journée, si pourvu de wifi ou de 3G. | Ecran de petite taille : 640x480 pour un iPhone (et plus si affinités, mais 640x480 de base). |
Plus votre public est large, plus vous avez de chances d'avoir des lectures sur des médias divers.
Oui, mais alors comment faire un emailing en HTML qui s'affiche relativement bien partout ?
Soyons clairs, il n'existe pas une méthode absolue, mais cet article a pour but de recenser différents points.
2. Conseils pour écrire une lettre d'information (newsletter) et l'optimiser
Dans cette rubrique, je vais détailler quelques conseils sur différents domaines
2.1. Conseils techniques / HTML
Conseil n°1 : A utiliser / à ne pas utiliser dans vos emails
| A utiliser | A éviter |
|
|
Conseil n°2 : Usage et positionnement des CSS
Dans l'idéal, évitez-les. Certains logiciels ou webmails désactivant complètement les CSS, imaginez et testez ce que donne votre lettre d'information sans styles CSS.
Une astuce pour tester : si vous êtes sous Firefox, ouvrez votre lettre au format HTML comme une page Web. Puis faites Affichage > Style de la page > Aucun style. Si votre lettre d'information est lisible et intelligible, alors c'est gagné.
Si vous voulez/devez utiliser des styles CSS, assurez-vous :
- que vous n'utilisez pas de feuille CSS externe.
- que tous vos styles sont « embarqués » (embedded en anglais), c'est à dire <balise style="propriété:valeur;">
- qu'il n'y a pas de déclaration de <style type="text/css"> avant le <body> (puisque certains clients messagerie « coupent » la page avant et après la zone <body>...</body>)
Conseil n°3 : La mise en page
Malheureusement, il n'y a pas de standards d'email comme il y a les standards W3C pour les pages Web ... Vous devez donc utiliser les tableaux pour faire de la mise en page. Les flottants (<balise style="float:left;">) ne sont pas / sont (très) mal pris en charge (notamment par Outlook)
Vous pouvez donc utiliser les border="0", cellpadding="0", cellspacing="0", valign="top" ...
Conseil n°4 : Images et couleurs : chemins absolus, standard HTML
2 façons s'offrent à vous pour mettre des images dans vos lettres. La première consiste à gonfler le poids du mail en encodant l'image et en la mettant dans le mail. Très pratique pour un logo, ça l'est beaucoup moins pour un emailing constitué de plusieurs images. Même si l'ADSL se répand de plus en plus, les utilisateurs en 3G sur leur smartphone/tablette n'ont pas les mêmes capacités que les gens sous Outlook, bien souvent les opérateurs limitent la quantité de données qui transitent dans les forfaits mobiles, ou bien la couverture réseau n'est pas optimale ...
Ainsi mettre vos images en chemins absolus (càd http://www.monsite/mondossierimages/monimage.jpeg) :
- Vous assurera que le mail envoyé à l'utilisateur sera léger parce que composé de texte simple, donc plus facile à envoyer pour vous, moins lourd à réceptionner pour lui
- Vous assurera que l'utilisateur pourra toujours récupérer les images (tant que vous ne les effacez pas du serveur)
- Vous assurera qu'il ne téléchargera pas du contenu superflu pour rien, puisque son logiciel de messagerie désactivera les images. Ainsi il ne les téléchargera que sur demande.
Pour les couleurs de fond, puisque plusieurs clients (notamment webmails) désactivent les images de fond, il vous faudra utiliser les vieilles balises HTML comme bgcolor="..." pour mettre une couleur de fond.
2.2. Conseils techniques / serveurs et systèmes
Conseil n°5 : Régulez votre flux
Lorsque vous envoyez un email, c'est votre serveur de mails sortant qui va contacter le destinataire. Si vous envoyez, au même serveur destinataire, trop de mails (et avec un taux d'erreurs qui peut être important) dans un laps de temps court, vous êtes sûr de passer pour un spammeur et tous vos emails partiront dans les boites « courrier indésirable » de vos abonnés.
Sur NewsletTux, par exemple, vous ne pouvez pas dépasser 25 emails toutes les 4 secondes, ce qui est en général largement suffisant.
Conseil n°6 : Montez patte blanche ...
Si vous en avez la possibilité, renseignez dans votre serveur de nom de domaine un champ type SPF/DKIM. ça permettra au serveur de mail du destinataire de valider qu'un email venant de johndoe@votre site.fr vient bien de votre site.
Conseil n°7 : Renseignez vos headers avec les bonnes valeurs
De même évitez d'envoyer un email depuis votre site monsite.com avec un expéditeur dont l'email est en @autredomaine.fr. Privilégiez des boites mails en @monsite.com (certains hébergeurs l'imposent, d'ailleurs)
Conseil n°8 : Bounces, taux d'erreurs
Traitez tous les « Mailer Demon » pour les désinscrire de vos listes (ça sous-entend une adresse mail de retour existante). D'une vous contribuerez à diminuer la quantité d'informations inutiles qui circulent sur Internet, et de 2, vous réduirez considérablement vos taux d'erreurs ...
Par exemple, les serveurs Free.fr (oui, encore Free !) sont configurés pour blacklister purement et simplement toute adresse IP dont le serveur de mails génère trop d'erreurs chez eux, et ce pour 24H consécutives.
2.3. Conseils pratiques
Conseil n°9 : Soyez pertinent !
Une lettre d'information trop longue ne sera pas entièrement lue, ou bien en diagonale. Préférez un extrait de vos articles avec lien vers votre site.
Conseil n°10 : Transparence dans la gestion des abonnements
Soyez transparents avec vos abonnés, indiquez-leur un moyen simple de se désabonner. Ils préfèreront passer par là plutôt que de simplement cocher « signaler en tant que Spam » dans leur webmail/client messagerie ...
Conseil n°11 : Rappelez à vos visiteurs qui leur écrit.
Une phrase du type « Vous recevez cet email parce que vous êtes abonné à une liste de diffusion sur le site XXX. Si vous souhaitez vous désinscrire, voyez la procédure en bas de ce mail » en début de lettre d'information leur permettra de situer le cadre de cet email.
3. Pour aller plus loin ...
Retrouvez ces conseils et bien d'autres sur le Web :
- How to Code HTML Email Newsletters (anglais)
- Comment vous assurer que vos emails HTML s’affichent correctement et arrivent à bon port ?
- Compatibilité des propriétés CSS dans les emails (excellent article pour comparer les solutions)
- Mon abonné opt-in m’a déclaré comme spammeur !
- Emails Standard Project (anglais)
Tags
A propos de l'auteur
Matthieu
Créateur de NewsletTux depuis 2005, je suis passé par Ingénieur Systèmes et Réseaux, et depuis peu, Directeur des Systèmes d'Information d'une PME. Un blog sur le sujet est en cours de construction ...