5568 sujets

Sémantique web et HTML

Décallage newsletter

Bonjour à tous,

Voilà mon problème, j'exporte mon html depuis photoshop sur lequel j'ai effectué mes découpage, et fini de le coder sous dreamweaver. Quand je teste ma newsletter sur outlook, elle fonctionne très bien mais sur hotmail et gmail mes images se décalent sur la hauteur se qui fait que j'ai des blanc entre mes images. Pouvez-vous me dire pourquoi?

Merci =)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>S30-2014-decoupe</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (S30-2014-decoupe.psd) -->
<table width="600" height="71" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td width="267" height="30" align="center" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #666666;"><p>Si cet email est illisible, <a href="http://www.zeina-alliances.com/newsletter/S30-2014.html" title="visitez la page en ligne">visitez la page en ligne</a>.</p>
    <span style="text-align: center; color: #000000; font-size: larger;">Le premier concept store dédié aux alliances et aux bagues de fiançailles</span></td>

  </tr>

</table>
<table id="Tableau_01" width="691" align="center" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img id="S30_2014_01" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_01.gif" width="2" height="64" alt="" /></td>
		<td colspan="2">
			<a href="http://www.zeina-alliances.com/?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_02" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_02.png" width="345" height="64" border="0" alt="Zeina Alliances" /></a></td>
		<td>
			<img id="S30_2014_03" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_03.gif" width="2" height="64" alt="" /></td>
		<td colspan="4">
			<a href="http://www.zeina-alliances.com/108-alliances-mariage?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_04" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_04.gif" width="119" height="64" border="0" alt="Alliance Mariage" /></a></td>
		<td colspan="2">
			<a href="http://www.zeina-alliances.com/6-bagues-de-fiancailles?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_05" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_05.gif" width="137" height="64" border="0" alt="Bague de Fian&#231;ailles" /></a></td>
		<td>
			<a href="http://www.zeina-alliances.com/109-bijoux?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_06" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_06.gif" width="85" height="64" border="0" alt="Bijoux" /></a></td>
		<td rowspan="4">
			<img id="S30_2014_07" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_07.gif" width="1" height="991" alt="" /></td>
	</tr>
	<tr>
		<td colspan="11">
			<img id="S30_2014_decoupe_08" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014-decoupe_08.png" width="690" height="816" alt="Soldes" /></td>
	</tr>
	<tr>
		<td colspan="11">
			<a href="http://www.zeina-alliances.com/magasins?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_10" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_10.gif" width="690" height="75" border="0" alt="Rendez-vous" /></a></td>
	</tr>
	<tr>
		<td colspan="2">
			<a href="https://www.facebook.com/zeina.alliances">
				<img id="S30_2014_11" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_11.gif" width="344" height="36" border="0" alt="Facebook" /></a></td>
		<td colspan="3">
			<a href="https://twitter.com/zeina_alliances">
				<img id="S30_2014_12" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_12.gif" width="62" height="36" border="0" alt="Twitter" /></a></td>
		<td>
			<a href="https://www.youtube.com/user/ZeinaAlliances">
				<img id="S30_2014_13" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_13.gif" width="60" height="36" border="0" alt="Youtube" /></a></td>
		<td>
			<img id="S30_2014_13014" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_13-14.gif" width="1" height="36" alt="" /></td>
		<td colspan="2">
			<a href="http://www.pinterest.com/zeinaalliances/">
				<img id="S30_2014_15" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_15.gif" width="57" height="36" border="0" alt="Pinterest" /></a></td>
		<td colspan="2">
			<a href="http://instagram.com/zeina_alliances">
				<img id="S30_2014_16" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_16.gif" width="166" height="36" border="0" alt="Instagram" /></a></td>
	</tr>
	<tr>
		<td>
			<img id="S30_2014_16017" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_16-17.gif" width="2" height="82" alt="" /></td>
		<td colspan="11">
			<a href="http://www.zeina-alliances.com/?utm_source=newsletter-zeina&utm_medium=newsletter&utm_campaign=interne">
				<img id="S30_2014_18" src="http://www.zeina-alliances.com/newsletter/S30-2014/S30-2014_18.png" width="689" height="82" border="0" alt="Zeina Alliances" /></a></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="2" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="342" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="3" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="2" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="57" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="60" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="56" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="81" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="85" height="1" alt="" /></td>
		<td>
			<img src="http://www.zeina-alliances.com/newsletter/S30-2014/spacer.gif" width="1" height="1" alt="" /></td>
	</tr>
</table>
<table width="267" height="30" border="0" align="center" cellpadding="0" cellspacing="0"bordercolor="#000000">

  <tr>
		<td align="center" style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #666666;">
    </td></tr><br />
	<tr> <td> <p style="text-align: center"><a href="[[UNSUB_LINK_FR]]">Cliquez ici pour vous d&eacute;sabonner</a></p></td></tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Modérateur
Bonjour,

Voici le point-clé (ou plutôt le talon d'achilles) de l'envoi de newsletter : la compatibilité avec les différents services de lecture de courriel...
Il vaut mieux construire une newslettre à la main en apliquant un formatage très spécifique (et hautement obsolète, beurk) pour obtenir un résultat comparable dans chaque service. Voir à ce sujet un article récent de Stéphanie sur alsacreations (que je ne retrouve pas) et un autre article de Chuck Norris : http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html
Tu peux aller voir sur le site de campaignmonitor et en particulier la ressource suivante pour obtneir des infos css pour chaque client : A guide to CSS support in email clients

Tiens je viens de trouver cette ressource également qui résume les bonnes pratiques en terme d'envoi d'email : https://www.campaignmonitor.com/guides/coding/guidelines/
Modifié par jojaba (23 Jul 2014 - 09:47)
Modérateur
webirds a écrit :
Bonjour à tous,
Pouvez-vous me dire pourquoi?

Difficile de répondre à ça.
Essaie par exemple de définir un vertical-align, et de suivre le conseil que j'ai trouvé dans la ressource que j'indique dans mon message précédent :
« Even when margins and padding are supported by most email clients, results will be inconsistent. If the spacing is critical to you, try nesting tables inside your main table instead. Old school! »
En résumé, il faut utiliser des tableaux imbriqués pour gérer au mieux l'espacement...
Merci de ta réponse mais j'ai fini par m'en sortir en méttant style="display:block;" border="0" dans toutes les <img> Smiley cligne et si j'encore des bugs met style="vertical-align: top;" dans les <td>
Je code des NL 2 fois par semaine depuis deux ans et je ne rencontre jamais de problèmes sur Outlook, Thunderbird, Yahoo, Hotmail et Gmail.

les quelques fondamentaux sont à mon sens et de part mon expérience les suivants :

- largeur de la NL : max 600px
- toujours appliquer un border="0" style="display:block;" à tes tes images
- reporter la taille d'une image dans ta balise td contenant l'image (td width="x" height="x")

puis non obligatoire mais conseillé :
- appliquer un style="outline:none;" à tout les liens
- veiller à remplir les balises alt si toutefois il y aurait un pb avec les images, et oui il y a des gens qui lisent même quand ca marche pas
- éviter les background-color, ca passe pas sur tous les clients mails.

Après chacun fait à sa sauce, c'est un peu la jungle, il existe des tableaux de recap des possibilités de chaque client mail, à consulter si cela t'intéresse.
webirds a écrit :
Merci de ta réponse mais j'ai fini par m'en sortir en méttant style=&quot;display:block;&quot; border=&quot;0&quot; dans toutes les &lt;img&gt; Smiley cligne et si j'encore des bugs met style=&quot;vertical-align: top;&quot; dans les &lt;td&gt;


Reporte la taille de ton image sur la balise td contenant l'image plutôt que vertical-align
Sujet clos
Aller à