Intégrer du CSS dans un Emai

2 pièce(s) jointe(s)

Bonjour à toutes et à tous,

Je souhaite créer un site qui pourra envoyer des e-mails en automatique.
La partie "fond" est opérationnelle.
En revanche, la partie "forme" du mail me pose quelques soucis...
S'agissant d'un e-mail, j'ai intégré directement le css dans le code (je ne fais pas appel à une feuille de style au risque de faire baisser la note du mail et que ce dernier se retrouve en spam).

Lorsque j'affiche le résultat sur une page web, j'obtiens cela:
Pièce jointe 629038

Lorsque je transmets le message, voila comment il s'affiche en tant qu’e-mail:
Pièce jointe 629039

Il y a une légère différence (et ce jaune flashy qui pique aux yeux n'est pas le seul responsable!).

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div style="background-color:#FFFFFF; border-radius:5px;">
				<div style="display: flex; flex-direction:column; border-radius:5px;">
					<div style="background-color:#000000; text-align:center; border-top-left-radius: 5px;border-top-right-radius: 5px;"><p style="color:yellow; font-size:xxx-large; font-weight:bold;">TITRE</p></div>
					<div style="background-color:#000000; border-bottom: 2px solid; border-color:yellow;"></div>
					<div style="background-color:#000000; border-color:yellow; border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;">
						<div style="background-color:yellow; width:20%; border-radius:5px; margin: 0 auto;">
						<p style="color:#000000; font-size:x-large; border-radius: 10px; text-align:center">Message stylé</p>
						</div>
					</div>
				</div>
					<div style="color:#000000; margin: 100px;">
 
						<h1 style="background-color:yellow; border-radius:5px;text-align:center;font-size:xx-large;">TITRE PRINCIPAL</h1>
						</br>
						<h2 style="background-color:#FFFFFF; border: 2px solid; border-color:black; border-radius:5px; color:#000000; font-size:x-large; text-align:center">Sous Titre 1</h2>
 
						<p style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
						<p>
						<p style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
						<p>
						<p style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
						<p>
						<p style="text-align:justify;">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
						<p>
						</br>
 
					</div>
					<div style="background-color:#000000; text-align:center; border-radius:5px;"><p style="color:#FFFFFF; padding:20px 0 20px 0";>Désinscription</p></div>
			</div>

Des idées sur la manière d'améliorer cela?

D'avance merci pour vos retours

la prise en compte des règles css dépend du client e-mail ou du webmail utilisé donc il faudra nous dire quels sont les tests que vous avez faits.

ensuite le "é" de "stylé" qui est mal affiché vient d'un souci d'encodage. donc soit vous n'avez pas indiqué dans l'e-mail que l'encodage est de l'utf-8. ou alors c'est encore une fois une particularité du client e-mail ou du webmail utilisé.

Bonjour,

Merci pour votre retour.
J'avoue que c'est un domaine que je découvre progressivement la partie email.
Du coup en tant que tests, pour le moment j'ai juste testé sur une page web et sur une messagerie outlook.

S'il existe une batterie de tests je suis preneur de la liste.

Après la j'ai du mal c'est à intégrer directement le css dans le html.
C'est quelque chose que je n'ai jamais fait (toujours lié une feuille de style).
Du coup je l'écris un peu au "feeling".
Et mes recherches sur les emails amènent la majeure partie du temps sur comment envoyer un email plûtot que sur les bonnes pratiques en la matière pour écrire un code email qui s'adapte aux messageries.
Je vais continuer de fouiller sur le net.

EDIT: Je recherche les emails "multi écrans" pour le moment. J'imagine que je vais trouver mon bonheur de ce côté la.
EDIT2: A priori je dois revenir au codage des débuts... l'utilisation de tableaux afin que le design soit compris par la majorité des boites mails. Je vais faire un test en ce sens.