Un template HTML pour votre newsletter par e-mail

Un e-mail en texte brut convient pour un petit mot, mais une newsletter, une offre ou un e-mail de bienvenue demande généralement plus : votre logo, une image, un bouton bien visible. C'est un e-mail HTML. Il ressemble à une petite page web, mais il obéit à des règles très différentes, car les logiciels de messagerie sont bien plus stricts que les navigateurs. Voici ce que contient un bon template et comment le préparer.

Pourquoi un e-mail n'est pas une page web

Gmail, Outlook, Apple Mail et les applis mobiles affichent chacun le HTML un peu différemment, et beaucoup ignorent le code web moderne. C'est pourquoi les e-mails se construisent à l'ancienne :

• Des tableaux pour la mise en page, pas les mises en page web modernes.
• Des styles écrits sur chaque élément, car de nombreux logiciels suppriment les blocs de styles.
• Des polices système, car les polices web personnalisées ne se chargent souvent pas.
• Ni scripts, ni formulaires, ni vidéo. Les messageries ne les exécutent pas. Utilisez plutôt une image ou un bouton qui mène à votre vidéo ou à votre formulaire.

Les éléments d'un bon e-mail

• Texte d'aperçu : le court texte affiché à côté de l'objet dans la boîte de réception. C'est votre deuxième ligne d'objet : ne le gaspillez pas avec « Voir dans le navigateur ».
• En-tête : votre logo, petit, avec un lien vers votre site.
• Titre et image principale : le sujet de l'e-mail en un coup d'œil.
• Texte court : deux ou trois paragraphes au maximum.
• Un seul bouton principal : « Découvrir la collection », « Réserver une table ». Un bouton construit comme un lien fonctionne partout.
• Pied de page : nom de l'entreprise, adresse, contacts et lien de désinscription.

Largeur et mobiles

La largeur standard est d'environ 600 pixels, ce qui convient à un écran d'ordinateur et au volet de lecture de la plupart des logiciels. Sur téléphone, la mise en page doit passer sur une seule colonne, avec un texte assez grand pour être lu et des boutons assez grands pour être touchés. Plus de la moitié des e-mails sont ouverts sur mobile : vérifiez donc d'abord la version mobile.

Images et texte alternatif

Certains logiciels bloquent les images jusqu'à ce que le lecteur les autorise. Rédigez un texte alternatif pour chaque image, afin que l'e-mail reste compréhensible sans elles, et ne mettez jamais un texte important uniquement dans une image. N'utilisez que des images dont vous avez les droits. Les images sont hébergées sur votre service d'e-mailing ou sur votre site, et l'e-mail renvoie à leurs adresses.

Le lien de désinscription

Les services d'e-mailing et la réglementation de nombreux pays exigent un moyen simple de se désinscrire dans chaque e-mail marketing. Les templates contiennent généralement un repère à remplacer par le lien ou la balise de désinscription de votre service.

Comment préparer le contenu

• Le sujet de l'e-mail et ses destinataires.
• Les faits : prix, dates, codes promo, exactement tels quels.
• La destination de chaque bouton : des adresses de pages complètes.
• Les informations du pied de page exactement comme elles doivent apparaître.
• Les couleurs et le style, ou un e-mail que vous aimez comme repère.

Testez avant d'envoyer

Envoyez-vous l'e-mail sur Gmail, sur Outlook et sur un téléphone. Cliquez sur chaque lien et chaque bouton, vérifiez le texte d'aperçu et regardez l'e-mail avec les images désactivées.

En bref

Un bon e-mail HTML utilise des tableaux et des styles en ligne, fait environ 600 pixels de large, passe sur une colonne sur mobile et comporte un bouton bien visible et un vrai pied de page. Si vous préférez ne pas le construire vous-même, commandez un e-mail HTML : vous décrivez l'e-mail, l'offre et la destination des boutons, et vous recevez une archive avec le HTML prêt et les images créées pour lui, à importer dans Mailchimp, Brevo ou un autre service d'e-mailing. Le paiement n'est versé qu'une fois que vous avez validé le travail.