10 astuces indispensables à savoir sur l’envoi d’e-mails HTML
La création d’e-mails HTML peut sembler simple au premier abord, après tout ce n’est « que du html ». Cependant les logiciels de messagerie sont bien plus exigeants que les navigateurs web et se lancer à l’aveugle dans cette aventure peut vite se transformer en cauchemar.
Voici donc 10 trucs à savoir pour vous faire gagner du temps dans vos envois d’emails HTML
1. Utilisez des tableaux
Alors que depuis des années, on fait la « chasse aux tableaux » dans le domaine du développement web, dans le cas particulier des e-mails HTML c’est tout l’inverse. Il est plus facile d’obtenir la mise en page souhaitée en utilisant des tableaux plutôt que des « div ». En effet, la gestion des styles CSS étant plus que limitée et leur interprétation propre à chaque logiciel de messagerie , il est plus sûr de gérer les espacements et les positionnements grâce aux tableaux.
2. Ne dépassez pas 600 pixels de large
Pour permettre au maximum d’internautes de lire aisément votre e-mail, et ce sur n’importe quelle plateforme (ordinateur, tablette, smartphone), nous vous conseillons de ne pas dépasser une largeur de 600 pixels. En effet, il sera beaucoup moins contraignant pour votre lecteur de scroller vers le bas que de scroller en largeur.
3. Évitez certaines balises
Certains webmails (Hotmail notamment) interprètent à leur sauce les balises Hn, en ajoutant des marges par défaut malgré tous les styles que vous pouvez appliquer à votre balise. Pour éviter toute surprise, nous vous conseillons donc de vous limiter à des <p></p> et des <span></span> pour mettre en forme les textes de votre e-mail.
4. Utilisez les styles CSS en ligne
Dans un e-mail HTML, les appels aux feuilles de styles externes ne sont tout simplement pas pris en compte. Évitez donc les :
<link rel= »stylesheet » href= »masupercss.css »type= »text/css » />
Ils ne vous seront d’aucun secours !
À bannir également, les déclarations dans le <head> du document, elles ne sont pas toujours (ou alors partiellement) prises en compte. Le plus sûr est de styler directement chaque balise de texte.
Exemple :
<p style= »color:#1986BF; font-size:17px; font-weight:bold;margin:0;font-family:’Trebuchet MS’, Arial, Helvetica, sans-serif; »>LA RÉALISATION D’UNE VIDÉO D’ENTREPRISE POUR <span style= »font-size:25px; »>990</span>€ HT C’EST POSSIBLE !</p>
5. Conservez un bon ratio texte/images
Un autre point problématique concernant l’envoi d’e-mails HTML est la classification en spam. Pour éviter cela, il s’agit de trouver le bon compromis entre la quantité d’images et de texte. N’utilisez les images qu’à des fins illustratives, toutes les informations importantes devraient idéalement être en texte. Il est important que le lecteur puisse comprendre le message principal de votre e-mail, même si son logiciel de messagerie bloque les images.
6. Complétez les attributs « alt » et « title » sur les images
Toujours concernant le blocage des images, il est important de renseigner les attributs « alt » et « title » des images, car il sera affiché malgré tout si le client mail bloque une image et permettra au lecteur d’avoir une idée du contenu de l’image qu’il ne voit pas. Cela l’incitera peut-être à débloquer l’affichage des images et à profiter de toute la splendeur de votre e-mail HTML.
7. Ne joignez pas de fichiers
De manière générale, il est important d’optimiser le poids final de votre e-mail. Pour cela, quelques conseils :
- Utilisez des images distantes, plutôt que d’embarquer les images dans l’e-mail (exemple : <img src= »http://www.votredomaine.com/images/image.jpg » alt= »Descriptif de l’image » /> et optimisez-les pour accélérer leur affichage (et accessoirement pour épargner le forfait data de vos lecteurs sur mobile !)
- Si vous souhaitez joindre un fichier « lourd » (une vidéo, un son, un fichier PDF par exemple), ne le joignez pas dans l’e-mail mais proposez un lien pour accéder à ce contenu en ligne. Ainsi, vous ne forcez pas l’internaute à charger un fichier qu’il ne souhaite peut-être pas voir, et en bonus, vous pourrez consulter les statistiques de consultation de votre lien (si votre plateforme d’envoi vous le permet).
8. Proposez une version online
Proposez toujours une version de votre e-mail visible en ligne, cela ne demande pas beaucoup de travail supplémentaire et augmente vos chances d’être lu.
9. N’oubliez pas le lien de désabonnement
N’oubliez jamais d’ajouter au bas de l’e-mail un lien de désabonnement, c’est obligatoire et c’est indispensable pour préserver votre réputation.
10. Testez sur le plus de plateformes possibles
Dernier conseil : ne lésinez pas sur les tests ! N’hésitez pas à tester votre e-mail sur le plus grand nombre de logiciels et de webmails possibles car, comme vous l’aurez compris, ils ont chacun leurs petites spécificités et vous réservent parfois de (mauvaises) surprises.
