Nous allons aujourd’hui créer un email html et l’envoyer par le biais de Campaign Monitor qui est un logiciel d’envoi de campagne e-mail. Un email html est un fichier au format html mis en page comme vous le souhaitez, et dont les images sont hébergées en ligne afin de pouvoir les voir directement sur votre client mail.
J’ai donc créé un template spécialement pour ce tutoriel et vous retrouverez ci-dessous la démo en ligne et les fichiers sources :
Je vous donne le code si vous souhaitez le copier coller directement dans votre fichier html :
Un seul fichier .html est nécessaire et on se sert de tableaux pour la mise en forme afin d’être le moins embêté possible. L’important est ici de toujours utiliser des images en ligne et non pas en absolu.
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Template Email-HTML</title> <body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: Trebuchet MS, Arial, Verdana, sans-serif;"> <!-- Start Main Table --> <table width="100%" height="100%" cellpadding="0" style="padding: 20px 0px 20px 0px" background="https://www.webdesignweb.fr/sources/email-html/img/img_home3.jpg" > <tr align="center"> <td> <table> <tr> <td> <span style="font-size:10px; color:#000;">Si cet email ne s'affiche pas correctement, <a href="https://www.webdesignweb.fr/sources/email-html/index.html" target="_blank" style="font-size:10px; color:#22baba;">cliquez-ici</span> </td> </tr> </table> <!-- Start Header --> <table style="width:580px; height:108px;" background="https://www.webdesignweb.fr/sources/email-html/img/haut.jpg" border="0"> <tr> <td valign="top" style="width:456px;"> <h1 style="font-size:22px; color:#22baba;margin-left:20px; margin-top:26px;">Email HTML WebDesignWeb</h1> </td> <td valign="top"> <p style="color:#aeaeae; font-size:11px; margin-top:34px;">publié 28 Juin 2011</p> </td> </tr> </table> <!-- fin header --> <!-- start image --> <table cellpadding="0" cellspacing="0" width="580" background="https://www.webdesignweb.fr/sources/email-html/img/1px.png" style="padding:0px 0px 0px 0px;"> <tr> <td> <a href="https://www.webdesignweb.fr" target="_blank"><img src="https://www.webdesignweb.fr/sources/email-html/img/macbookpro.jpg" width="500" height="332" style="border:none;margin-left:60px;" /></a> </td> </tr> </table> <!-- end image --> <!-- start texte --> <table cellpadding="0" cellspacing="0" width="580" background="https://www.webdesignweb.fr/sources/email-html/img/1px.png" style="padding:30px 0px 0px 0px;"> <tr> <td valign="top" style="color:#808080; font-size:11px; padding:0px 39px 0px 47px; text-align:justify; line-height:25px;"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The poin t of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors.</p> </td> <td> <a href="https://www.webdesignweb.fr" target="_blank"><img src="https://www.webdesignweb.fr/sources/email-html/img/imac.jpg" width="230" height="162" style="border:none;margin-left:0px;" /></a> </td> </tr> </table> <!-- end texte --> <!-- start texte --> <table cellpadding="0" cellspacing="0" width="580" background="https://www.webdesignweb.fr/sources/email-html/img/1px.png" style="padding:30px 0px 40px 0px;"> <tr> <td> <a href="https://www.webdesignweb.fr" target="_blank"><img src="https://www.webdesignweb.fr/sources/email-html/img/ipad.jpg" width="208" height="219" style="border:none;margin-left:70px;" /></a> </td> <td valign="top" style="color:#808080; font-size:11px; padding:0px 18px 0px 19px; text-align:justify; line-height:25px;"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The poin t of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors. The poin t of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p> </td> </tr> </table> <!-- end texte --> <!-- début footer --> <table style="width:580px; height:148px;" width="580" cellpadding="0" cellspacing="0" background="https://www.webdesignweb.fr/sources/email-html/img/bas.jpg" style="padding:0px 0px 0px 0px;"> <tr> <td> <a href="https://www.webdesignweb.fr" target="_blank" style="margin-left: 107px;border:none;"><img src="https://www.webdesignweb.fr/sources/email-html/img/rond.jpg" style="border:none" width="132" height="131" /></a> </td> <td> <a href="http://twitter.com/#!/stratweb" style="border:none" target="_blank"><img src="https://www.webdesignweb.fr/sources/email-html/img/twitter.jpg" width="52" height="41" style="border:none" /></a> <a href="https://www.facebook.com/pages/stratisbakascom/127543690653530?sk=wall" target="_blank" style="margin-left: 17px; border:none;"><img src="https://www.webdesignweb.fr/sources/email-html/img/fb.jpg" style="border:none" width="52" height="44" /></a> </td> </tr> </table> <!-- fin du footer --> </body> </html>
Pour ce qui est de l’envoi de la campagne nous allons utilisé Campaign monitor comme je vous l’ai dit précédemment (cliquez pour agrandir) :
1) Créez un compte et connectez-vous, vous devriez avoir cet écran (cliquez pour agrandir) :
2) Cliquez sur Add Client et remplissez le formulaire comme sur l’image mais avec vos données (cliquez pour agrandir) :
3 ) Cliquez sur Add Client en bas à gauche et vous devriez voir votre nouvelle campagne apparaître comme ci dessous (cliquez pour agrandir) :
4) Cliquez sur le nom de votre campagne puis cliquez sur Create a new campaign (cliquez pour agrandir) :
5) Vous verrez cet écran apparaître (cliquez pour agrandir) :
6) Remplissez les champs comme sur l’image avec vos paramètres (cliquez pour agrandir) :
7) Cliquez sur Next. Laissez “HTML and plain text” coché et cliquez sur Next (cliquez pour agrandir) :
8 ) À cette étape vous avez le choix entre envoyer votre fichier html en parcourant votre machine et envoyer dans un zip les fichiers images et css (cliquez pour agrandir) :
9) OU taper directement l’URL de votre mail html si vous l’avez hébergé sur un serveur (cliquez pour agrandir) :
10) Vous devriez avoir cet écran, laissez cocher la case qui dit de rajouter un lien pour se désabonner et cliquez sur Next (cliquez pour agrandir) :
11) À l’étape 2.4 cliquez pour continuer
12) À cette étape vous choisissez si vous voulez rentrer une liste déjà prête de destinataires ou si vous voulez les taper ou même les copier coller vous même, je vais ici choisir de les rentrer moi-même (cliquez pour agrandir) :
13) Cliquez sur Next. Tapez les adresses mail de vos destinataires dans le cadre blanc comme indiqué à droite, c’est-à-dire une adresse par ligne. Cliquez sur import these recipients puis sur Next.
14) Tout devrait être bon, cliquez sur test and define delivery pour recevoir le mail de test et définir d’un envoi direct ou différé.
15) Si vous voulez l’envoyer direct cliquez sur send campaign immediately (cliquez pour agrandir) :
16) Vous pouvez ensuite accéder aux statistiques (mails reçus ou non, ouverts ou non, etc…) (cliquez pour agrandir) :
J’espère que ce tuto vous aura plu, n’hésitez pas à partager et à poser des questions si vous en avez…