La Partie Technique

Temps d'étude : 3h. Niveau : Facile.
Tags : La Partie Technique
Fichier(s) utile(s) pour ce cours : /

Techniquement, comment créer une newsletter ?

Une newsletter se construit à l'aide du langage Html, il est possible d’intégrer des graphismes, des photos, images, des liens hypertextes. fléche Elaborer une charte graphique (photoshop)

fléche Ecrire le code pour concevoir la newsletter (au format HTML)

fléche Intégrer des images

fléche Choisir un modèle (template)

Si vous n'avez pas de connaissance technique, des logiciels peuvent vous fournir du code Html déjà prêt. On appelle ça des modèles (template).

Création d'une newsletter personnalisée en Html et Css


De nombreux design et modèles existent pour créer une newsletter cependant il peut être utile de créer sa propre newsletter personnalisée pour avoir un rendu qui ressemble davantage à vos exigences. Avoir une compétence technique permet également de modifier plus facilement du code que vous pourrez récupérer sur le web sous forme de modèle (template).

Lorsque vous enverrez une newsletter, vous ne pourrez pas joindre d'un côté un fichier Html (structure) et de l'autre un fichier Css (mise en forme). Tout sera contenu dans un seul message. Nous devrons mélanger le Html et le Css au sein du même contenu.

Avant d'aller plus loin et d'intégrer du texte ou des images, il faut imaginer le zoning (les zones) de votre page web de newsletter. Le zoning permet le découpage des zones pour reserver des emplacements dans lesquels vous pourrez déposer des textes ou des images.

Zoning

newsletter1.html
	<table border="1" align="center" style="border-collapse: collapse;">
		<tr>
			<td width="650" height="150" colspan="5" align="center"> Espace 1 </td>
		</tr>
		<tr>
			<td align="center">Espace 2</td>
			<td align="center">Espace 3</td>
			<td align="center">Espace 4</td>
			<td align="center">Espace 5</td>
			<td align="center">Espace 6</td>
		</tr>
		<tr>
			<td colspan="5" align="center" height="50">Espace 7</td>
		</tr>
		<tr>
			<td colspan="5" align="center" height="50">Espace 8</td>
		</tr>
		<tr>
			<td colspan="3" rowspan="2" align="center" height="170" style="color: #ff0000; font-weight: bold; font-size: 20px; font-family: verdana;" valign="top"> Espace 9 
			</td>
			<td colspan="2" align="center" height="170">Espace 10</td>
		</tr>
		<tr>
			<td align="center">Espace 11</td>
			<td align="center">Espace 12</td>
		</tr>
		<tr>
			<td colspan="5" align="center">Espace 13</td>
		</tr>
	</table>
	
Decryptons le code Html :
  • TABLE est un tableau

  • TR est une nouvelle ligne

  • TH est une cellule d'entête

  • TD est une cellule

  • COLSPAN permet de fusionner des cellules dans le sens horizontal

  • ROWSPAN permet de fusionner des cellules dans le sens vertical

  • L'attribut STYLE permet de préciser la mise en forme à appliquer sur chaque élément.

  • Height représente la hauteur

  • Width représente la largeur

  • L'espace 9 a volontairement été changé au niveau de sa mise en forme pour présenter un exemple d'application de style Css directement dans le code Html
    color: #ff0000; : couleur
    font-weight: bold; : gras
    font-size: 20px; : taille du texte
    font-family: verdana; : police de texte

Le Résultat
explications Html / Css

Exemple d'une newsletter simple pour une carte de voeux

newsletter2.html
		<table border="0" style="border-collapse: collapse; border: 1px solid #dedede;" align="center">
			<tr>
				<td width="650" height="341" colspan="5"><img src="img/htmlcss52.jpg"></td>
			</tr>
			<tr>
				<td align="center" colspan="5"> </td>
			</tr>
			<tr>
				<td colspan="5" align="center"><span style="font-size:11.5pt;font-family:Arial;color:#8a8a8a; font-weight: bold;">De la part de XXXXXXXXX</span></td>
			</tr>
			<tr>
				<td colspan="5"> </td>
			</tr>
			<tr>
				<td colspan="5"> </td>
			</tr>
			<tr>
				<td colspan="5" align="center"><a href="" style="text-decoration: none; color: #ee3939; font-weight: bold; border-radius: 10px; padding: 15px; border: 1px solid;">Découvrez nos voeux ></a></td>
			</tr>
			<tr>
				<td colspan="5"> </td>
			</tr>
			<tr>
				<td rowspan="2"> </td>
				<td> </td>
				<td> </td>
				<td> </td>
				<td rowspan="2"> </td>
			</tr>
			<tr>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>
			<tr>
				<td colspan="5" align="center"><a href=""><img src="img/htmlcss53.jpg"></a></td>
			</tr>
			<tr>
				<td colspan="5" align="center"> </td>
			</tr>
			<tr>
				<td colspan="5" align="center"><a href="" style="text-decoration: none; color: #ee3939;">Lire cette newsletter en ligne</a></td>
			</tr>
			<tr>
				<td colspan="5" align="center"> </td>
			</tr>
		</table>
	
  • TABLE est un tableau

  • TR est une nouvelle ligne

  • TH est une cellule d'entête

  • TD est une cellule

  • COLSPAN permet de fusionner des cellules dans le sens horizontal

  • ROWSPAN permet de fusionner des cellules dans le sens vertical

  • L'attribut STYLE permet de préciser la mise en forme à appliquer sur chaque élément.

  • Height représente la hauteur

  • Width représente la largeur

Le Résultat
explications Html / Css

fléche Attention
N'oubliez pas d'uplaoder vos images en ligne sur le web !


En effet, vous ne pourrez pas mettre des chemins pointant vers le dossier de votre ordinateur car l'internaute qui ouvrira l'email n'aura pas accès au dossier de votre ordinateur, par conséquent une image ne s'affichera pas sur son écran.

L'internaute qui ouvrira votre email aura accès au web, il faudra impérativement faire pointer sur une adresse commençant par http://.

Autres exemples

Et, pour finir, voici quelques exemples de newsletters plus abouties que vous pourrez remodifier selon vos souhaits :

newsletter3.html
		<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#f7f2e4">
		<tr>
			<td>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td valign="middle" align="center" height="45">
						<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">Voir le contenu de ce mail en ligne <a style="color: #bc1f31; text-decoration: none;" href="#">mon-url.com</a></p></td>
					</tr>
				</table>
				<table style="background:url(img/htmlcss60.jpg); background-repeat: no-repeat; background-position: center; background-color: #fffdf9;" width="684" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
						<td>
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td valign="top" width="173">
									<!--ribbon-->
									<table border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td height="120" width="45"></td>
											<td background="img/htmlcss67.jpg" valign="top" bgcolor="#c72439" height="120" width="80">
												<table width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td valign="top" align="center">
															<p style="font-size: 36px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;">31</p>
														</td>
													</tr>
													<tr>
														<td valign="bottom" align="center" height="35">
															<p style="font-size: 14px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;">Janvier</p>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
								<td valign="middle" width="493">
									<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
											<td height="60"></td>
										</tr>
										<tr>
											<td>
											<h1 style="color: #333; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, 'Times New Roman', Times, serif">Newsletter <em>n°2</em></h1>
											</td>
										</tr>
										<tr>
											<td height="40">
											</td>
										</tr>
									</table>
									<!--date-->
									<table border="0" cellspacing="0" cellpadding="0">
										<tr>
										<td valign="top" align="center" bgcolor="#312c26" background="img/htmlcss61.jpg" width="357" height="42">
										<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="5"></td></tr></table>
										<p style="font-size: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;">ASSCOM</p>
										</td>
										</tr>
									</table>
								</td>
								<td width="18"></td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
				
				<table bgcolor="#fffdf9" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
					<tr>
						<td>
							<table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
								<tr>
									<td>
										<table cellspacing="0" border="0" cellpadding="0" width="100%">
											<tr>
												<td valign="top" align="center">
													<img src="img/htmlcss66.jpg" alt="image dsc" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="622">
													<!--line break-->
													<table width="100%" border="0" cellspacing="0" cellpadding="0">
														<tr>
															<td valign="bottom" height="50"><img src="img/htmlcss64.jpg" width="622" height="27"></td>
														</tr>
													</table>
													
													<h1 style="font-size: 36px; font-weight: normal; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; margin-top: 0px; margin-bottom: 20px;">Lorem ipsum <em>dolor sit amet</em></h1>
													<p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a> a ipsum a risus volutpat placerat in nec mauris. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>, semper id tempor et, varius pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et.</p>
												</td>
											</tr>
										</table>
										
										<table cellspacing="0" border="0" cellpadding="0" width="100%">
											<tr>
												<td height="72"><img src="img/htmlcss65.jpg" width="622" height="72">
												</td>
											</tr>
										</table>
										
										<table cellspacing="0" border="0" cellpadding="0" width="100%">
											<tr>
												<td valign="top" width="378">
													<h1 style="font-size: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin-top: 0px; margin-bottom: 12px;">Sed blandit dolor id elit dignissim varius id non lectus.</h1>
													<p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a>. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>. Maurtis commodo urna at dui bibendum quis euismod velit egestas. <a style="color: #bc1f31; text-decoration: none;" href="#">Lire la suite »</a></p>
												</td>
												<td valign="top" width="246"><img src="img/htmlcss62.jpg" align="right" alt="img8" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333; float: right;" width="216"></td>
											</tr>
										</table>
										
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td valign="bottom" height="50"><img src="img/htmlcss64.jpg" width="622" height="27"></td>
											</tr>
										</table>
										
										<table cellspacing="0" border="0" cellpadding="0" width="100%">
											<tr>
												<td valign="middle" width="246"><img src="img/htmlcss63.jpg" align="left" alt="img8" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333; float: left;" width="216"></td>
												<td valign="top" width="378">
													<h1 style="font-size: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin-top: 0px; margin-bottom: 12px;">Sed blandit dolor id elit dignissim varius id non lectus.</h1>
													<p style="font-size: 16px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. <a style="color: #bc1f31; text-decoration: none;" href="#">Phasellus</a>. Fusce sit amet enim erat, in sagittis arcu. <a style="color: #bc1f31; text-decoration: none;" href="#">Aliquam dolor dolor</a>. Maurtis commodo urna at dui bibendum quis euismod velit egestas. <a style="color: #bc1f31; text-decoration: none;" href="#">Lire la suite »</a></p>
												</td>

											</tr>
										</table>
										
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td valign="bottom" height="50"><img src="img/htmlcss64.jpg" width="622" height="27"></td>
											</tr>
										</table>
										
										<table cellspacing="0" border="0" cellpadding="0" width="100%">
											<tr>
												<td>
													<table cellspacing="0" border="0" cellpadding="8" width="100%" style="margin-top: 10px;">
														<tr>
															<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="img/htmlcss68.jpg" height="108" alt="img2" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138"></p>
															<p style="color: #333333; font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
															<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
															</td>

															<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="img/htmlcss68.jpg" height="108" alt="img3" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138"></p>
															<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
															<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
															</td>

															<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="img/htmlcss68.jpg" height="108" alt="img4" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138"></p>
															<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
															<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
															</td>

															<td valign="top"><p style="font-size: 17px; line-height: 22px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;"><img src="img/htmlcss68.jpg" height="108" alt="img5" style="border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333;" width="138"></p>
															<p style="font-size: 18px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; margin: 12px 0px; font-weight: bold;">Lorem ipsum dolor sit amet</p>
															<p style="font-size: 16px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #333; margin: 0px;">Consectetur adipiscing elit. Phasellus a ipsum a risus volutpat placerat in nec mauris. Fusce sit</p>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td valign="bottom" height="50"><img src="img/htmlcss64.jpg" width="622" height="27"></td>
											</tr>
										</table>
									</td>
								</tr>	
							</table>
						</td>
					</tr>
				</table>
				<table width="680" border="0" align="center" cellpadding="30" cellspacing="0">
					<tr>
						<td valign="top">
							<p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;"> Vous recevez cette newsletter, car vous avez souscrit à notre newsletter.<br> Vous ne voulez plus recevoir de newsletter de notre part? <a style="color: #bc1f31; text-decoration: none;" href="#">Désabonnement immédiat</a></p>
						</td>
						<td valign="top"><p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #b0a08b; margin: 0px;">Adresse, Cp Ville France</p></td>
					</tr>
					<tr>
						<td height="30"></td>
						<td height="30"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
Le Résultat
explications Html / Css

Observons à présent le résultat avec bordures pour une meilleure compréhension :

Le Résultat avec bordures (pour une meilleure compréhension) explications Html / Css

Une newsletter créée pour une entreprise qui commercialise l'accès à un système (en SaaS) :

newsletter4.html
	<table style="" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td> 
				<div align="center">
					<table border="0" cellpadding="0" cellspacing="0" width="770px" style="border:1px solid #ddd">
						<tbody>
							<tr>
								<td align="center"> 
									<table style="font-size:12px;font-family:Arial,Helvetica,sans-serif" border="0" cellpadding="0" cellspacing="0" width="700px">
										<tbody>
											<tr>
												<td width="350px">
													<a href="" target="_blank" style="font-size:27px; font-family:Arial,Helvetica,sans-serif;color:#ff6600; margin: 0; text-decoration:none;">Z o n e   L o g i c i e l</a>
												</td>
												<td width="350px">	
													<p style="font-size:xx-small;font-family:Arial,Helvetica,sans-serif;color:#3c3c3c; margin: 0; text-align: right;"><a href="" style="COLOR:#000000" target="_blank">Visualiser cette invitation en ligne</a></p><br><br><br>
												</td>
											</tr>

											<tr>
												<td colspan="2" style="text-align:left;font-size:15px;font-family:Arial,Helvetica,sans-serif"><br>
													<table style="font-size:15px;font-family:Arial,Helvetica,sans-serif; background-color: #eeefee;" border="0" cellpadding="0" cellspacing="0" width="700px">
														<tbody>
															<tr>
																<td>        </td>
															</tr>
															<tr>
																<td colspan="5">
																	<p style="font-size:27px; font-family:Arial,Helvetica,sans-serif;color:#ff6600; margin: 0;">  Devenez un professionnel ZoneLogiciel en 30 minutes</p>
																</td>
															</tr>
															<tr>
																<td>        </td>
															</tr>
															<tr>
																<td style="font-size:20px;text-align:justify; font-family:Arial,Helvetica,sans-serif;">
																	  Tirez pleinement profit de votre période<br>  de test avant de vous engager<br><br><br>
																</td>
																<td>        </td>
																<td>        </td>
																<td style="background-color:#fb8003;  border:1px solid #ae5a21;" align="center">
																	<table style="font-size:15px;font-family:Arial,Helvetica,sans-serif" border="0" cellpadding="0" cellspacing="0" width="260px">
																		<tbody>
																			<tr>
																				<p style="font-size: 1px; margin: 0;">        </p>
																				<a href="" target="_blank" style="color: #ffffff; text-decoration: none; font-size: 18px; line-height: 25px;">DEMONSTRATION<br> GRATUITE ET<br> PERSONNALISEE</a>
																				<p style="font-size: 1px; margin: 0;">        </p>
																			</tr>
																		</tbody>
																	</table>
																</td>
															</tr>
														</tbody>
													</table>
													
													 
													
													<table style="font-size:15px;font-family:Arial,Helvetica,sans-serif" border="0" cellpadding="0" cellspacing="0" width="700px">
														<tbody>
															<tr>
																<td width="350px">
																	<p style="margin: 0;font-family:Arial,Helvetica,sans-serif; line-height:20px;">Vous avez souscrit aux 30 jours d’essai ZoneLogiciel mais vous ne savez pas vraiment comment vous y prendre ?<br><br>

																	<a href="" target="_blank" style="color: #0081c2;">Contactez notre spécialiste</a> pour une présentation sur-mesure et apprenez à :<br><br>
																	<ul style="margin: 0;">
																		<li>Gagner du temps et maximiser votre productivité</li><br><br>

																		<li>Structurer et organiser vos actions</li><br><br>

																		<li>Favoriser la collaboration au sein de votre organisation</li><br><br>
																	</ul>

																	En seulement 30 minutes, vous allez découvrir comment optimiser votre travail au quotidien et améliorer la gestion de projet au sein de votre organisation.<br><br>

																	Demandez une démonstration en ligne gratuite dès maintenant ou <a href="" target="_blank" style="color: #0081c2;">convenez d’un rendez-vous</a> avec Pascal. <br><br>
																	</p>
																</td>
													
																<td width="60px">        </td>

																<td width="290px" align="center">
																	<table style="font-size:15px;font-family:Arial,Helvetica,sans-serif" border="0" cellpadding="0" cellspacing="0" width="290px">
																		<tbody>
																			<tr>
																				<td colspan="4">
																					<a href="" target="_blank" style="color: #0081c2; font-weight: bold;">Contactez notre spécialiste</a><p style="margin: 0;"> </p>
																				</td>
																			</tr>
																			<tr>
																				<td style="background-color:#eeefee;">    </td>
																				<td style="text-align:left; background-color:#eeefee;">
																					 <br>
																					<p style="color: #fb8003; font-weight: bold; margin: 0;font-family:Arial,Helvetica,sans-serif; line-height:20px;">Pascal THOYER</p>
																					<p style="margin: 0;font-family:Arial,Helvetica,sans-serif; line-height:20px;">Responsable Support<br>	ZoneLogiciel</p><br>
																				</td>

																				<td style="background-color:#eeefee; text-align: right;"><br><img src="img/htmlcss70.png" alt="Technicien Support" title="Technicien Support"></td>
																				<td style="background-color:#eeefee;">    </td>
																			</tr>
																			<tr>
																				<td style="background-color:#eeefee;">    </td>
																				<td colspan="2" style="background-color:#eeefee;">
																					<p style="margin: 0;font-family:Arial,Helvetica,sans-serif; line-height:20px; font-weight:bold;"><br>Déroulement de la présentation :</p><br>
																					<p style="margin: 0;font-family:Arial,Helvetica,sans-serif; line-height:20px; text-align: left;">- Prise de connaissance de vos besoins et de vos attentes<br>
																					- Diagnostic de votre problématique<br>
																					- Présentation de ZoneLogiciel et de ses avantages<br>
																					- Questions / Réponses <br> </p>
																				</td>
																				<td style="background-color:#eeefee;">    </td>												
																			</tr>
																			<tr>
																				<td style="background-color:#eeefee;">    </td>
																				<td colspan="2" style="background-color:#fb8003; text-align: center; color: #ffffff; padding: 10px 0; font-weight: bold; border:1px solid #ae5a21;">30 minutes seulement </td>
																				<td style="background-color:#eeefee;">    </td>												
																			</tr>
																			<tr>
																				<td style="background-color:#eeefee;">    </td>
																				<td colspan="2" style="background-color:#eeefee; text-align: center; font-weight: bold;"><p style="color: #0563c1; font-size: 18px;"><br>demo@ZoneLogiciel.com</p><p style="font-size: 18px;">01 46 10 15 40<br> </p></td>
																				<td style="background-color:#eeefee;">    </td>												
																			</tr>
																		</tbody>
																	</table>
																</td>
															</tr>
														</tbody>
													</table>
													
													 
													
													<table style="line-height:150%;font-size:15px;background-color:#eeeeee;font-family:Arial,Helvetica,sans-serif" border="0" cellpadding="0" cellspacing="0">
														<tbody>
															<tr>
																<td>        </td>
																<td style="text-align:left" valign="top" width="33%"><br>
																	<strong style="color:#ff6600">SUPPORT TECHNIQUE</strong><br>
																	Notre équipe Support est disponible depuis le bouton "Feedback" de votre <span class="il">ZoneLogiciel</span>.<br><br>
																	<a href="" title="Support technique" target="_blank"><img alt="Se connecter" src="img/htmlcss71.jpg" border="0"></a><br>
																	 
																</td>
																
																<td><img alt="trait" src="img/htmlcss72.png" height="160px" width="40px"></td>

																<td style="text-align:left" valign="top" width="33%"><br>
																	<strong style="color:#ff6600">BESOIN D'AIDE ?</strong><br>
																	Découvrez toutes nos FAQs et tutoriels pour vous aider à mieux comprendre <span class="il">ZoneLogiciel</span>.<br>
																	<br>
																	<a href="" title="Besoin d'aide ?" target="_blank"><img alt="En savoir plus" src="img/htmlcss74.jpg" border="0"></a><br>
																	 
																</td>

																<td><img alt="trait" src="img/htmlcss72.png" height="160px" width="40px"></td>

																<td style="text-align:left" valign="top" width="30%"><br>
																	<strong style="color:#ff6600">SUIVEZ-NOUS</strong><br>
																	Retrouvez toute l'actualité <span class="il">ZoneLogiciel</span> sur nos portails communautaires.<br>
																	<a href="" title="Suivez-nous sur Twitter" target="_blank"><img alt="Twitter ZoneLogiciel" src="img/htmlcss77.png" border="0" width="50px"></a>
																	<a href="" title="Découvrez notre Blog" target="_blank"><img alt="Blog ZoneLogiciel" src="img/htmlcss76.png" border="0" width="50px"></a>
																	<a href="" title="Suivez-nous sur Linkedin" target="_blank"><img alt="Linkedin ZoneLogiciel" src="img/htmlcss75.png" border="0" width="50px"></a><br>
																	 
																</td>

																<td> </td>
															</tr>
														</tbody>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<p style="font-size:xx-small;font-family:Arial,Helvetica,sans-serif;color:#3c3c3c"><a href="" style="color:#ff6600" target="_blank">Désinscription</a></p>
				</div>
			</td>
		</tr>
	</tbody>
</table>
	
Le Résultat
explications Html / Css


Assurer la compatibilité d'une newsletter

Vous devez faire une multitude de tests avant d'envoyer et de diffuser votre newsletter / emailing au plus grand nombre.
Voici quelques suggestions :

fléche Messagerie : gmail, yahoo, hotmail, orange, sfr, laposte, etc.

fléche Navigateur : firefox, chrome, safari, internet explorer.

fléche Logiciel : outlook 2003, outlook 2007, outlook 2010, outlook express, thunderbird, windows mail.

fléche Support : tablette, smartphone (mobile), ordinateur.

Liste non exhaustive

Il est conseillé de faire plusieurs tests avant l'envoi et de proposer un lien vers la newsletter au format de page web : "Voir la newsletter sur notre site web". Ce lien permettra à l'internaute de l'ouvrir dans une meilleure qualité si jamais il y a des problèmes d'affichage.