18039 sujets

Questions générales et questions de débutants

Problème d'affichage dans outlook

Bonjour,

j'ai terminé de développer un e mailing, et tout à l'air de bien fonctionner lorsque j'affiche l'apercu sur un navigateur

le problème se pointe lorsque j'effectue mon envoi test sur mon adresse mail outlook !!

Voici mon code 

<html>
<head>
<meta charset="utf-8">
<title>E-mailing Planning 2020</title>
<link href="[HTML]Planning 2020.css" rel="stylesheet" type="text/css">
<style>
.intro{
	color:#018EB9;
	font:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	font-size:18px;
}
#Button{
	margin-top:25px;
	width:300px;
	line-height:75px;
	background-color: #018EB9;
	vertical-align:middle;	
	font:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	font-size: 18px;
	color:#FFFFFF;
	text-decoration: none;}
 a{
	width:300px;
	line-height:75px;
	text-decoration:none;
	font-family:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	font-size:18px;
	color:#FFFFFF;
}
em{
	font-size: 9px;
	color:#484E4E;;
	margin-top: 3px;
}
.adispo{
	color:#018EB9;
	font:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
}
.coordonnees{
	display:inline-flex;
	width:500px;
	justify-content:space-between;
}
.name{
	font-family:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	color:#018EB9;
	font-size: 18px;
}
.info{
	font-family:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	font-size: 14px;
	color:#484E4E;
	margin:0;
}
hr{
	width:617px;
}
.pln{
	color:#484E4E;
	font-family:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	font-size: 18px}

.adress{
	color:#484E4E;
	font-family:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
}
.footer{
	width:617px;
	height:75px;
	background-color:#484E4E;
	display:flex;
	flex-direction:row;
	align-items: center;
	padding:21px;
}
.footer>img{
	width:200px;
	margin-left:21px;
	margin-top:0vh;
}
.socialmedia{
	display:flex;
	width:inherit;
	justify-content:space-between;
	color:#FFFFFF;
	align-items:center;
	margin-left:100px;
}
.socialmedia>img{
	max-height:15%;
	max-width:15%;
	object-fit:contain;
}
.socialmedia>p{
	color: #FFFFFF;
	font-size: 22px;
	font:"Avenir LT Std 35 Light", "Avenir LT Std 45 Book", "Avenir LT Std 55 Roman", "Avenir LT Std 65 Medium";
	}
.desinscription p{
	color:#484E4E;
	font-size: 11px;	
}
</style>
</head>
<center>
<body>
	<img src="https://www.campus-promotrans.fr/wp-content/uploads/2020/01/Header.png" alt="Planning 2020 ruche" width="617" class="header">
	<p class="intro">
	<strong>Le planning du centre ... est disponible*</strong>
	</p>
	<div id="Button" >
	  <a href="https://www.campus-promotrans.fr/wp-content/uploads/2020/01/Planning.pdf">Je découvre le planning ?</a>
	</div>
	<em> *sous réserve de modifications</em>
	<p class="adispo">
	L'équipe pédagogique du centre ... reste à votre disposition pour plus d'infos
	</p>
	<div class="coordonnees">
	<div class="Contact 1">
	 <p class="name"><strong> Nom du contact 1</strong></p>
	 <p class="info">Fonction</p>
	 <p class="info"> adresse mail</p>
	 <p class="info">Numéro de Tel</p>	
	</div>	
	<div class="Contact 2">
	 <p class="name"><strong> Nom du contact 1</strong></p>
	 <p class="info">Fonction</p>
	 <p class="info"> adresse mail</p>
	 <p class="info">Numéro de Tel</p>			
	</div>	
	</div>	
<hr>
	<p class="pln"><strong>PLAN D'ACCES</strong></p>
	<p class="adress">
	adresse du centre
	</p>
<div>
Plan d'accès google map	
</div>
</body>
<div class="footer">
	<img src="https://www.campus-promotrans.fr/wp-content/uploads/2020/01/Logo-premium3.png" alt="Groupe Promotrans" width="200" href="https://www.promotrans.fr/">
	<area shape="rect" coords="524,31,549,59"href="https://www.promotrans.fr/" target="_self"/>
	<div class=socialmedia>
		<p>Suivez nous</p>
		<img src="https://www.campus-promotrans.fr/wp-content/uploads/2020/01/facebook.png" alt="Facebook" height="100">
		<area shape="rect" coords="524,31,549,59" title="Campus Promotrans" alt="Campus Promotrans" href="https://www.facebook.com/GroupePromotrans/" target="_self" />
		<img src="https://www.campus-promotrans.fr/wp-content/uploads/2020/01/Linkedin.png" alt="Linkedin" height="100">
	</div>
</div>

<p class="desinscription">Si vous ne souhaitez plus recevoir d'e-mail de la part du Groupe Promotrans, cliquez ici.</p>
<img src="https://www.campus-promotrans.fr/wp-content/uploads/2019/08/Nouveau-logo-OPQF.jpg">
</center>

</html>


et voici le resultat obtenu sur outlook !! : les boutons prennent toute la width, et les elements en flex se mettent en block Smiley fache

merci de m'aider !!
Modifié par adeschamps (27 Jan 2020 - 11:59)
Salut

Et oui, sur navigateur ET/OU sur mail c'est pas pareil, il faut prendre en compte que OUTLOOK, GMAIL, HOTMAIL etc... n'ont pas le même moteur de rendu. il te faut adapter ton CSS pour tous.
Les outils comme Outlook ou GMail utilisent des versions de HTML très anciennes.
Le code HTML d'un mail doit donc être généré en tenant compte de ces limites.
J'ai déjà demandé dans ce forum si on connaissait exactement ces limites. Il semble hélas que ce ne soit pas clairement documenté, on travaille donc par essais et erreurs, tout en n'étant jamais sûr qu'un outil quelconque va accepter ce qu'on a écrit.
En ce qui me concerne, je ne mets pas de feuille de style dans les mails, ce qui veut dire que je dois rappeler les informations de style dans les balises appropriées.
Pour faire une présentation, il est préférable d'utiliser des balises <table>, pratique que même des anciens dans mon genre essaient d'éviter au maximum dans des pages HTML.
Une méthode pourrait être d'afficher le code HTML des mails que tu reçois et de t'inspirer de la façon dont ils sont faits.
PapyJP a écrit :
Il semble hélas que ce ne soit pas clairement documenté, on travaille donc par essais et erreurs, tout en n'étant jamais sûr qu'un outil quelconque va accepter ce qu'on a écrit.


Très bon résumé Smiley smile
Bonjour,

Je ne sais pas ce qu'il en est aujourd'hui mais le HTML des e-mails est encore ancien, et pour s'assurer qu'il soit correctement lu sur tous les clients, on utilise la bonne vieille disposition en tableaux. Je ne pense pas que ça ait beaucoup évolué aujourd'hui.

On évite aussi d'utiliser les balises <style>, on préférera insérer le CSS directement dans l'attribut style d'une balise HTML... donc pas de class ou d'ID.

Et flexbox, je pense que tu peux oublier pour un email, il y a de très fortes chances que ça ne soit pas pris en charge.

Bienvenue en 1995 Smiley smile

Bon courage ^^

Edit : Le temps d'aller faire chauffer un plat et PapyJP a dégainé la réponse Smiley smile
Modifié par Loraga (27 Jan 2020 - 12:47)
En effet tu ne pourras pas utiliser flexbox mais plutôt les tableaux à l'ancienne.

Outlook a eu x moteurs de rendu dont certains s'apparentant à word, d'autre à IE et aujourd'hui que sais-je.

Perso j'utilise l'éditeur wysiwyg de mailchimp pour avoir au moins le code de base.
Modifié par bacasable (27 Jan 2020 - 14:26)
Sujet clos
Aller à