Vous êtes à : Accueil > Nos techniques > 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.

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.

Et pour effectuer l’opération inverse, afin d’afficher votre lettre sur votre site, il convient de mettre en style externe le style que vous avez soigneusement mis en ligne. Pour cela, plusieurs outils : http://extractcss.com/ et http://cssextractor.com/. À moins que votre éditeur ne propose déjà cette fonction ?

Remettre à zéro le c.s.s.

Une fois votre lettre codée, il est plus correct d’en proposer une version à consulter dans son navigateur. Seulement, pour intégrer cette lettre à votre site, un second cauchemar s’ouvre.

Deux pépins : on ne peut pas afficher un .eml directement dans un site (ou alors si quelqu’un connaît la technique, je suis preneur), et le code qu’on affiche se voit appliqué les règles css du site, ce que l’on ne souhaite pas forcément.

Pour résoudre ce deuxième 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{border: 1px solid black; padding : 2em; border-radius:8px; box-shadow:3px 3px 2px 2px #ccccc0; background-color : white; 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:transparent; 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:normal;}
#lettre h1, h2, h3{text-shadow:none; text-align:left}
#lettre h1{margin: 8px 0px; font-size: 2.15em; font-weight: bold;}
#lettre h2{margin : 10px 0px; font-size: 1.85em; font-weight: bold;}
#lettre h3{margin : 12px 0px; font-size: 1.6em; font-weight: bold;}
#lettre h4{margin : 16px 0px; 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.