Ressources d'email marketing

Comment créer vos propres newsletters

La structure et le contenu sont les aspects primordiaux du design d’une newsletter. Pour ces deux aspects, il existe des règles très importantes à suivre et des, afin de mettre en place une vraie stratégie d'emailing.

Règle numéro 1 : la taille

  • Créez vos newsletters HTML avec une largeur maximum de 600 pixels, afin de les rendre visibles dans la majorité des webmails et logiciels de messagerie. Limitez également la taille de votre email à 150ko, images comprises, afin d’éviter des temps de téléchargement trop longs.

Règle numéro 2 : Utilisez des tableaux

Les webmails tels que Gmail ou les logiciels tels Outlook gèrent mal les balises HTML telles que « float », « margin », ou « padding ». Les tableaux sont la meilleure stratégie pour agencer la structure de votre newsletter. Pour un résultat optimal, gardez à l’esprit :

  • D’éditer la taille de chaque cellule, et non du tableau dans son intégralité.
  • D’utiliser un tableau « conteneur » pour la couleur d’arrière plan.
  • D’éviter les espaces blancs non nécessaires dans vos cellules.

Règle numéro 3 : Utilisez du CSS inline

Gmail est particulièrement concerné par ce conseil, car il supprime tout lien vers du CSS dans chaque email. Dès lors, tout CSS doit être « inline ». La bonne nouvelle, c’est que cela peut être fait presque automatiquement. Grâce à certains services tels que Premailer, vous pouvez placer tout votre contenu CSS en inline, simplement en cliquant sur un bouton.

Règle numéro 4 : : Concentrez le plus important sur les 300 premiers pixels du haut de votre mail

Les outils de prévisualisation de nombreux logiciels et webmails n’affichent que la partie haute de l’email. Assurez-vous que votre message soit explicite dans les 300 pixels du haut de votre newsletter.

Règle numéro 5 : Ne supposez pas que vos images seront visibles

De nombreux webmails et logiciels de messagerie bloquent le téléchargement des images par défaut. Par conséquent :

  • Réglez la hauteur et la largeur de vos images afin que votre email garde sa structure même si les images ne s’affichent pas.
  • N’utilisez jamais d’images pour diffuser un message important comme les titres ou les liens.
  • Utilisez des messages alternatifs à vos images (alt tags).
  • Testez votre design dans une fenêtre de prévisualisation, en plein écran et sans les images, et ajustez votre structure en conséquence.

Images : Trucs et astuces

  • Créez vos images en .gif ou en .jpg (jamais en png) et incluez les paramètres de hauteur et de largeur pour que leur taille reste correcte.
  • Pour vos destinataires utilisant Gmail, il est important de se souvenir que Gmail affiche le texte du début de votre email dans la ligne de prévisualisation. Si le début de votre email est une image, c’est le « alt tag » qui sera affiché.
  • Utilisez une couleur d’arrière plan à la fois dans le body et dans vos tableaux, afin de vous assurer que votre couleur s’affiche dans tous les webmails et logiciels.
  • Outlook 2007 ne gère pas les images d’arrière plan. Si vous souhaitez utiliser une image d’arrière plan dans votre design, incluez également une couleur d’arrière plan. Cela résout simultanément le problème du blocage d’images et le problème d’Outlook 2007.
  • N’utilisez pas de cartes car elles ne sont pas totalement supportées par les webmails.
  • HTML : Trucs et astuces

    • Vérifiez tout votre code pour vous assurer de sa validité.
    • Evitez le CSS car beaucoup de webmails le négligent ou le modifient. Préférez-y le CSS inline. N’utilisez pas java, JavaScript, ActiveX, ASP, PHP. N’utilisez pas non plus de caches ou de frames, ni de Dynamic HTML, car de nombreux webmails ne supportent pas ces langages.
    • N’utilisez pas de formulaires car ils pourraient être supprimés de vos emails par les webmails, et ne peuvent de toute façon pas collecter de données via un webmail.
    • N’incluez pas de Flash ou autres medias ou vidéos dans vos emails. Vous pouvez toutefois insérer des liens qui redirigeront vos destinataires vers les pages contenant ces fichiers.
    • Supprimez les Meta tags de votre code, ils ne sont pas pris en compte par les webmails.
    • Supprimez tout code HTML superflu. L’utilisation de programme tels que Dreamweaver ou autres éditeurs WYSIWYG peuvent générer du code inutile, qui peuvent causer des problèmes d’affichage.Si vous avez des balises de personnalisation, vérifiez leur code. S’il est incorrect, les utilisateurs verront un mauvais message s’afficher.

    Supprimez tout code HTML superflu. L’utilisation de programme tels que Dreamweaver ou autres éditeurs WYSIWYG peuvent générer du code inutile, qui peuvent causer des problèmes d’affichage.Si vous avez des balises de personnalisation, vérifiez leur code. S’il est incorrect, les utilisateurs verront un mauvais message s’afficher.

    Supprimez tout code HTML superflu. L’utilisation de programme tels que Dreamweaver ou autres éditeurs WYSIWYG peuvent générer du code inutile, qui peuvent causer des problèmes d’affichage.Si vous avez des balises de personnalisation, vérifiez leur code. S’il est incorrect, les utilisateurs verront un mauvais message s’afficher.


Retour aux articles ressources