Vous êtes à :
  1. Acceuil  > 
  2. Nos techniques  > 
  3. Coder une lettre de neuve
Passer le menu Aller au pied de page

Licences Joueb English version Accessibilité

Coder une lettre de neuve

La lettre de neuve (ou newsletter) est le cauchemar des développeurs oueb : la mauvaise interprétation des règles CSS et la variété des moyens de consultation de ses courriels obligent à rédiger des codes qui rappellent les années 90, à base de table et de style inline. Un rapide coup d'œil à cette table de compatibilité devrait vous en convaincre.

micr0lab apporte un grand soin à sa lettre de neuve, et vous propose ici quelques conseils pour aboutir plus facilement à une lettre compatible.

 

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.

Contact :

Contact Plan Lettre F.a.q. C.G.U.