Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
6 Conseils pour créer une infolettre réussie

6 Conseils pour créer une infolettre réussie

6 mai 2014Par Olivier Lussier
Catégories :

Une infolettre peut revêtir une apparence très différente selon le système de messagerie utilisé, qu’il s’agisse de Gmail, Outlook ou du mail d’Apple. Grâce aux quelques règles suivantes, vous serez assuré que votre récepteur ouvrira une infolettre fidèle à celle que vous avez envoyée.

1. Simplifier le design

D’abord, le design. Un visuel épuré aidera à concevoir le code de l’infolettre.

  1. Une structure simple
  2. Une image d’entête
  3. Un contenu principal

[img]infolettre-nmedia-solution-avril-2014.jpg|400||true|Infolettre d'avril de Nmédia|[/img]

Plus le design sera simple, plus facile sera l’intégration de l’infolettre.

2. Structurer le HTML en tableau

La conception d’une infolettre doit se faire avec des TABLES. L’utilisation des balises <table>, <tr> et <td> est essentielle, alors oubliez les DIV, les NAV, etc. Les systèmes de messagerie sont archaïques et fonctionnent encore sous le HTML 3. Pour ce faire, je suggère de faire des tableaux de sorte à diviser chaque section de l’infolettre. Vous pouvez imbriquer des TABLES jusqu’à 5 niveaux maximum pour une bonne gestion du code.

3. Styliser l'apparence visuelle de l'infolettre

Pour styliser l’infolettre, je recommande d’ajouter du CSS. Le CSS doit être ajouté « inline » sur chaque élément à être modifié. Ne pas placer les CSS dans l’entête puisque quelques messageries suppriment l’entête des infolettres. Au besoin, un outil tel que Premailer aidera à modifier le style externe en style « inline ». Référez-vous au site Campaign Monitor, il contient un guide complet sur les CSS supportés par les différents systèmes de messagerie.

4. Intégrer les images

Dans le cas où nous avons des images à intégrer dans notre infolettre, il faut préciser les dimensions exactes des images. De plus, quelques messageries créent des espaces blancs inutiles autour des images. Ceux-ci seront évités par la précision « DISPLAY : BLOCK ». Dernier point, mais non le moindre sur les images, évitez de les utiliser en arrière-plan.

5. Optimiser l'infolettre

La balise <p> est supportée par les messageries, mais je conseille de ne pas l’utiliser. En effet, cette balise ajoute du padding au texte, ce qui crée des espaces non désirés. Pour obtenir une précision maximum du montage, je conseille de gérer la hauteur de ligne de notre <td>.

Quelques points rapidesà noter

  • Le tableau conteneur doit avoir une largeur de 100 %.
  • La largeur dans chaque <td> doit être définie.
  • À l’intérieur de chaque <td>, ne pas utiliser le padding, mais plutôt le Cellpadding pour chaque <table>.

6. Vérifier avant l'envoi final

Avant l’envoi officiel, je vous conseille fortement de tester l’infolettre dans différents systèmes de messagerie pour voir le résultat. Comme les messageries ne fonctionnent pas toutes de la même manière, certaines anomalies visuelles peuvent survenir et entraîner des variations dans le design. Comment tester? Soit on s’abonne à plusieurs messageries, soit on utilise des systèmes d’essai tels que Litmus ou Campaign Monitor.

Selon les statistiques de Litmus de mars 2014, au top 5 des messageries les plus populaires se trouvent : Apple iPhone, Outlook, Apple Ipad, Gmail et Apple Mail. En regroupant ces 5 messageries, nous obtenons 71 % de la clientèle. Notre infolettre doit être parfaite pour avoir le meilleur impact possible.

Pour les statistiques complètes, visitez la section statistique du site de Litmus.

Vous pouvez également consulter le guide complet du CSS supporté par les messageries.

Enfin, une infolettre ne saurait être performante sans un contenu pertinent qui touche les besoins de vos abonnés. En analysant les préférences de vos abonnés quant au contenu partagé, vous serez en mesure de calculer le retour sur investissement véritable de votre infolettre et améliorer votre recette en continu!

Pour toute remarque ou question, je vous invite à laisser un commentaire!