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 :

DémoFichiers 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="http://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="http://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="http://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="http://webdesignweb.fr/sources/email-html/img/1px.png" style="padding:0px 0px 0px 0px;">
			<tr>
				<td>
					<a href="http://www.webdesignweb.fr" target="_blank"><img src="http://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="http://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="http://www.webdesignweb.fr" target="_blank"><img src="http://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="http://webdesignweb.fr/sources/email-html/img/1px.png" style="padding:30px 0px 40px 0px;">
			<tr>
				<td>
					<a href="http://www.webdesignweb.fr" target="_blank"><img src="http://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="http://webdesignweb.fr/sources/email-html/img/bas.jpg" style="padding:0px 0px 0px 0px;">
			<tr>
				<td>
					<a href="http://www.webdesignweb.fr" target="_blank" style="margin-left: 107px;border:none;"><img src="http://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="http://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="http://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) :
email2

1) Créez un compte et connectez-vous, vous devriez avoir cet écran (cliquez pour agrandir) :
email3

2) Cliquez sur Add Client et remplissez le formulaire comme sur l’image mais avec vos données (cliquez pour agrandir) :
email4

3 ) Cliquez sur Add Client en bas à gauche et vous devriez voir votre nouvelle campagne apparaître comme ci dessous (cliquez pour agrandir) :
email5

4) Cliquez sur le nom de votre campagne puis cliquez sur Create a new campaign (cliquez pour agrandir) :
email6

5) Vous verrez cet écran apparaître (cliquez pour agrandir) :
email7

6) Remplissez les champs comme sur l’image avec vos paramètres (cliquez pour agrandir) :
email8

7) Cliquez sur Next. Laissez « HTML and plain text » coché et cliquez sur Next (cliquez pour agrandir) :
email9

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) :
email10

9) OU taper directement l’URL de votre mail html si vous l’avez hébergé sur un serveur (cliquez pour agrandir) :
email11

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) :
email12

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) :
email13

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) :
email14

16) Vous pouvez ensuite accéder aux statistiques (mails reçus ou non, ouverts ou non, etc…) (cliquez pour agrandir) :
email15

J’espère que ce tuto vous aura plu, n’hésitez pas à partager et à poser des questions si vous en avez…

22 comments
Eric
Eric

Bonjour, Merci pour le tuto, il m'a bien aidé. J'ai plutôt utilisé un sample du site "Campaign Monitor" que j'ai hébergé sur un serveur chez OVH. Pour finaliser la mise en place de la campagne, il est proposé de faire un test d'envoi du mailling. (Maximum 5 adresses e-mail). Malheureusement, aucun e-mail n'a été reçu. Voici le message reçu : Hello, this is the mail server on mx5.g.outbound.createsend.com. I am sending you this message to inform you on the delivery status of a message you previously sent. Immediately below you will find a list of the affected recipients; also attached is a Delivery Status Notification (DSN) report in standard format, as well as the headers of the original message. delivery failed; will not continue trying Savez-vous pourquoi ? Cordialement, EG

admin
admin

Bonjour, ma question est simple et peut etre trop mais avez-vous renseigné une adresse valide ?

Ludo
Ludo

Ahhhh enfin des explications clairs pour construire un emailing j'ai mis le temps mais j'ai enfin trouvé!!! merci beaucoup pour toutes ces précisions

Miki
Miki

Bonjour, Merci pour le tuto. Pour ma part, je voudrais faire un mail html pro comme le tiens et juste l'envoyer à quelques clients via mon logiciel de messagerie habituel. J'ai copié le code dans Note++ sur un fichier "vierge" et je l'ai ouvert via explorer pour voir. Je n'ai que les codes, rien ne s'affiche. Tu peux me dire comment procéder stp ?

admin
admin

Bonjour, De rien pour le tuto. Il faut que ton client mail supporte le html et que tu héberges tes images en ligne.

Miki
Miki

ok, entre temps je me suis inscrit, j'ai fais un beau petit newsletter. Maintenant y'a des trucs que je saisis pas trop : 1) peuvent-ils utiliser les adresses mails pour spamer mes cibles ? 2) le service est il payant pour des petites campagnes ? 3) probablement qu'on peut reprendre les codes et envoyer les mails à la main via mon logiciel de messagerie 4) l'avantage de l'interface n'est elle pas qu'elle évite d'envoyer 2 fois le même newsletter au même client ? Désolé c'est brouillon mais efficace, merci.

admin
admin

Bonjour, 1) vos mails ne seront pas spamés 2) non justement pas pour des petites campagnes. Je ne l'ai pas testé récemment 3) quel client mail utilisez-vous ? Cependant ce n'est plus la même méthode après 4) ce n'est pas seulement ça, elle permet de centraliser des newsletter (campagnes)

admin
admin

Vous pouvez me faire un petit don alors ^^ je plaisante. Mais plus sérieusement, MailChimp est un très bon outils également ;)

Plantagruel
Plantagruel

Très bon article merci pour le partage de votre savoir-faire

admin
admin

Merci beaucoup :)

_____ _____ ____
_____ _____ ____

Great blog here! Also your website so much up fast! What web host are you the usage of? Can I am getting your associate hyperlink on your host? I wish my site loaded up as quickly as yours lol

Roscoe
Roscoe

Howdy, There's no doubt that your site might be having web browser compatibility problems. Whenever I look at your site in Safari, it looks fine however, if opening in IE, it has some overlapping issues. I just wanted to provide you with a quick heads up! Apart from that, wonderful site!

Breith
Breith

Bonjour, merci. Très complet ! Ceci dit, quel est le nom de la coloration syntaxique que vous utiliser ? J'aime bien.

vadé
vadé

Bonjour, très bon site, bon tuto continue comme sa. Cordialment

admin
admin

Merci beaucoup :) bonne journée et à bientot

Deborah
Deborah

Very nice, i suggest webmaster can set up a forum, so that we can talk and communicate.

Ludovic
Ludovic

Très bon site. J'ai eu du mal à trouver un article pour la création d'emails. Par contre j'ai entendu parler autour de moi une sorte de testeur en ligne qui vérifie que le codage est propre et que le mail ne partira pas dans les spams. Ca vous dit quelque chose ?

admin
admin

Bonjour, merci beaucoup. Pour ce qui est des spams je ne pourrais pas vous dire mais je sais qu'avec Litmus gratuit vous pourrez avoir un aperçu de vos mails dans différents clients mail (Outlook, Gmail, etc...) J'espère que cela vous aidera :) Bonne continuation

admin
admin

Merci pour ton commentaire. ça fait plaisir d'avoir des retours positifs...

comparateur mutuelle
comparateur mutuelle

Merci pour ce billet. J'ai également abordé cette thèmatique sur mon site. J'ai par la même occasion d'ajouter votre lien vers ce post.