Quelques articles et outils
Un article d'Alsacréations vous donnera quelques pistes pour comprendre comment se fabrique un courriel. Pour savoir quels sélecteurs css sont pris en compte, Campaign Monitor est là pour vous. Pour transformer directement une page html en courriel, c'est du côté de premailer. Enfin, passer automatiquement tous les styles en styles inline peut se faire en ligne à cette adresse. Un excellent modèle, sans doute compliqué, mais également complet ! Les guides mailchimp ? Pourquoi pas.
Afficher votre lettre sur votre site
Convertir le eml en html
La seule méthode que je connaisse emploie MHonArc. C’est, il faut le dire, un outil vieillissant, mais qui rends service. L’otpin single permets de convertir un message en html. Cependant, le code produit n’est pas de très bonne facture, et certainement pas conforme, si bien qu’un passage par tidy est plus ou moins obligatoire pour obtenir du code exploitable.
Remettre à zéro le c.s.s.
Une fois le html obtenu, vous pouvez l’intégrer sur votre site, mais le style de votre site y sera appliqué, ce que l'on ne souhaite pas forcément.
Pour résoudre ce problème, a été mis en place un « reset css selectif », qui remets à zéro certaines règles. Nous vous le donnons, mais il n'a de sens qu'intégré correctement à votre site.
Dans notre cas, nous collons le code html de la lettre dans une balise div ayant l'identifiant « lettre ».
#lettre{position:relative;border:1px solid #000;padding:2em;border-radius:8px;box-shadow:3px 3px 2px 2px #ccccc0;background-color:#fff;font-family:Sans-Serif}
#lettre a{color:#4963EE;text-decoration:underline;border-radius:0}
#lettre a[href^=http]:after{background-image:none;width:0}
#lettre a:hover{background-color:inherit;color:#4963EE}
#lettre pre{background:0 0;border:none;box-shadow:none;color:#1f2322}
#lettre li:before{content:""}
#lettre ul{list-style-type:disc}
#lettre p{font-size:100%;font-style:normal;font-weight:400}
#lettre h1,#lettre h2,#lettre h3{text-shadow:none}
#lettre h1{margin:8px 0;font-size:2.15em;font-weight:700}
#lettre h2{margin:10px 0;font-size:1.85em;font-weight:700}
#lettre h3{margin:12px 0;font-size:1.6em;font-weight:700}
#lettre h4{margin:16px 0;font-size:1.4em}
Vous pouvez profiter des très bon conseils de CSS Reset pour remettre à zéro votre css.