[RESOLU]e-mail type Newsletter répondant au mieux aux standards

Bonjour à tous

Je me suis lancé dans la réalisation d'un mail pour un ami, dans l'esprit d'une newletter.

J'ai pris quelques renseignement ici via un premier post, " rechercher" et un lien vers pompage.net

C'est ce document en fait qui me pose soucis:

a écrit :
Problème :
Certains clients affichent purement et simplement les courriels sans aucun style. J'ai d'abord attribué ceci à la mutilation de mon style, pourtant clairement apparent dans le balisage. J'ai donc passé un temps non négligeable à traquer le coupable, testant une multitude de courriels. Hélas, la solution était en fait juste sous mon nez : les styles n'étaient pas supprimés, mais les points (.) précédant leurs noms, si. En l'occurrence, .DefinitionDeStyle{} se transformait en DefinitionDeStyle{}, provoquant ainsi une définition de style sans aucune portée.

J'ai bien compris le soucis, la solution beaucoup moins:

a écrit :
Solution :
J'ai utilisé les sélecteurs de classe, qui assurent que chaque style défini commencera par une lettre plutôt que par un point. Ainsi .DefinitionDeStyle{} peu devenir td.DefinitionDeStyle{} ou div.DefinitionDeStyle{} (le cas échéant). Une solution quelque peu déconcertante, mais qui a le mérite d'être efficace et (une fois de plus) accommodante.

De même sur un autre point:

a écrit :
Problème :
Les webmails utilisent leurs propres feuilles de styles, et comme celles-ci précèdent les miennes, l'effet de cascade aboutit à une priorité de mes règles sur celles du webmail. De sorte que mes pseudo-classes et mes définitions d'éléments (tel a:link{} et td{}) altéraient par mégarde le design du webmail lui-même. Fichtre !

Ok j'ai bien compris le soucis mais la solution...

a écrit :
Solution :
J'ai paramétré précisément chaque définition. C'est ainsi que a:link{} est devenue à la fois span.DefinitionDeStyle a:link{} et td.Contenu a:link{} pour mettre en forme les liens HTML dans les deux niveaux de l'arbre du document. Cette approche peu orthodoxe alourdit le balisage, mais elle assure que mes styles seront appliqués uniquement aux éléments de mon courriel. Elle établit aussi un respect du travail, pour le designer du webmail comme pour ses utilisateurs. Mais surtout, le code qui en résulte est correct et fonctionne comme prévu.

Est ce que quelqu'un pourrait m'expliquer de façon plus simple peut être? Avec des exemples ce serait encore mieux...

Dernière question:

J'ai réalisé le code html et le css associé en suivant les conseils du même articles.
Une fois que j'aurais résolu les deux points ci-dessus, comment je dois procéder pour envoyer concrétement mon mail? Je copie-colle simplement le code dans la partie dédiée aux messages habituellement?

Merci de votre aide et de votre patience ( déjà je rame sur la conception d'un site mais le mail me complique encore plus la vie )
Modifié par Artno (11 Feb 2006 - 11:30)

Je connais mal le sujet pour tout ce qui est mail en HTML. Mais quelques remarques :

1/ pour éviter que tes styles CSS ne viennent contaminer le rendu de toute la page dans le cas d'un webmail (pour lequel le mail est affiché dans un bloc au sein de la page, mais ne prend pas toute la page : il reste des éléments de navigation du webmail, par exemple), tu peux mettre toute ta lettre dans une seule div. Ensuite, il faudra préciser des propriétés CSS pour les éléments contenus dans cette div.

<div id="mailcontent">
Tout le contenu de ma newsletter
</div>

div#mailcontent a {propriétés pour mes liens, elles n'affecteront pas les liens créés par le webmail}
div#mailcontent p {propriétés pour mes paragraphes, idem...}
div#mailcontent span.maclasse {...}
etc.

2/ Un des passages que tu cites indique un problème avec les styles CSS dont le sélecteur est un nom de classe. Un sélecteur de classe, en CSS, commence par un point. Or, un point en début de ligne est parfois supprimé par certains clients (webmail, logiciel de messagerie). Sans doute pour des questions de sécurité, pour combler certaines failles, peut-être. Bref, si on veut passer des propriétés CSS à un paragraphe de classe "maclasse", on ne pourra pas écrire

.maclasse

car cela sera réécrit en

maclasse

par certains clients.
Par contre si on écrit

p.maclasse

Plus aucun problème.

Merci mpop pour tes infos.

Pour ton point 1/ j'avais effectivement compris l'importance de mettre dans une seule div ma lettre

Par contre j'ai un doute sur un point. Tu conseille:

<div id="mailcontent">
Tout le contenu de ma newsletter
</div>

C'est effectivement ce que j'ai fais en attribuant à cette div les caractérisque d'un <body> de page html. Par contre dans le " contenu" tu peux mettre ton code html précédé d'un head avec le css et le meta relatif au codage notamment? Si j'ai bien suivi on supprime par contre toutes notions de DOCTYPE.

Tu indique:

div#mailcontent a {propriétés pour mes liens, elles n'affecteront pas les liens créés par le webmail}
div#mailcontent p {propriétés pour mes paragraphes, idem...}
div#mailcontent span.maclasse {...}
etc.

Dans le code html cela se traduit alors comment? Par:

<div id="mailcontent a"

C'est bien ça?

Hotmail semble complétement " détruire" la feuille css. Il est alors préférable de mettre directement dans le code html les infos relatifs à la mise en page.
C'est plus lourd mais n'est ce pas aussi un bon moyen de contourner le soucis rencontré avec les sélecteurs de classe qui sont supprimés par les clients webmail?

La lettre conseille tout comme toi de précéder le " . " d'un selecteur de classe dans la feuille css par une lettre.
Exemple que tu cite:

p.maclasse

Au lieu de:

p.maclasse

J'ai bien compris effectivement dans le cadre de la feuille css mais comment cela se traduit dans le code html? Cela change quelque chose ou l'on continue en indiquant dans celui-ci:

<div class="maclasse">

Concernant ma dernière question:

a écrit :
Une fois que j'aurais résolu les deux points ci-dessus, comment je dois procéder pour envoyer concrétement mon mail? Je copie-colle simplement le code dans la partie dédiée aux messages habituellement?

Je crois avoir un début de réponse à force de chercher.

Copier le code simplement comme un message ne fonctionne pas, il faut un prog. spécifique pour envoyer ce type de message ( si j'ai bien suivi!!!)
Il faut donc soit coder en php, soit faire appel à un prog. ( en php également) style "spip" ou "WAnewslette" par exemple.

Je pense faire appel au secodn car malgré la réputation de " spip" je n'ai rien compris et en me sens donc pas capable e l'utiliser.

J'ai bien suivi concernant l'expédition du message?

Encore une fois, merci de votre attention et de votre aide.
Par avance mercid e tes nouvelles réponses mpop

Bonjour,

Quand je vois avec quelle simplicité un client mail permet de suppriimer tout ce qui est HTML-CSS dans un mail pour rester en texte brut, et quand je vois le temps nécessaire pour mettre en place des mails au format HTML CSS qui ne marchent que sur trois pattes... Je me dis qu'il y a comme un problème de rationalisation des choix, là

Au passage, quelque-soit le choix retenu, pour ne pas passer à côté de l'essentiel :

a écrit :
Les newsletters sont proposées aux formats texte brut et HTML.

Le format d'envoi par défaut des newsletters est le texte brut.

Une version de la dernière newsletter envoyée est disponible en ligne.

Référentiel des bonnes pratiques qualité des services en ligne opquast

A noter: la dernière bonne pratique citée est justement l'occasion de faire de belles choses en HTML CSS
Modifié par Laurent Denis (10 Feb 2006 - 11:58)

Merci de tes infos Laurent Denis.

J'ai eu l'occasion de lire plusieurs de tes posts ici ou ailleurs concernant justement les newletter et l'intéret de privilégier le texte brut.

Je suis tout à fait d'accord avec toi sauf que le copain pour qui je réalise ça est photographe et souhaite intégrer, pour proposer ses services, deux photos à la news. C'est en fait un mail suite à un salon du mariage où il a pris des contacts qu'il souhaite relancer.

Perso j'ai prévu deux présentation: texte brut et html.

Comme j'aime faire simple je propose en plus de visualiser la letter directement sur un serveur comme pour une page web de site plutot que dans le client webmail.

Bref... Pour moi le texte brut c'est la meilleure soluce en plus d 'être la plus simple à réaliser. Mais ce n'est pas pour moi et je peux comprendre sa démarche en tant que photographe, même s'il vaut mieux une info de qualité qui invite sur un site plutot qu'un mail avec photo qui fait fuir si démoli par le webmail.

Bien différencier, comme tu le fais très bien vu ton message ci-dessus, les pratiques qualité Web que je citais (résultat d'un consensus de praticiens) et leur version un peu "monacale" (expression personnelle de ma part)

Re bonjour,

Quelques infos...

J'ai utilisé pour des tests " WAnewsletter" et aucun soucis pour l'expédition: simple à installer et à utiliser.

Pour contrer hotmail qui bloque le css j'ai mis les éléments css dans le code html.

Mes questions à mpop reste toutefois d'actualité donc n'hésiter pas à répondre. Je vous en remercie par avance.

Encore une dernière question...

Ayant incorporé les notions css au code html, je me retrouve avec une question toute bête mais je ne trouve de réponse nul part concernant les liens. Cela ne met pas utile dans le cadre du présent projet, mais cela pique ma curiosité.

Dans une css on peut donner une mise en forme aux liens avec les propriétés " a:link ", " a:visited", " a:hover" par exemple.
Est-ce que c'est également possible quand on incorpore la mise en forme directement au html ? Si oui, comment cela fonctionne t'il exactement?

Cette fois c'est bon, plus de question... Dès que j'ai els réponses je pourrais mettre le sujet en [RESOLU]

Merci par avance pour vos réponses...

Artno a écrit :
Dans une css on peut donner une mise en forme aux liens avec les propriétés " a:link ", " a:visited", " a:hover" par exemple.
Est-ce que c'est également possible quand on incorpore la mise en forme directement au html ?

À ce que je sais, les pseudo-classes :visited, :focus ou :hover ne sont pas utilisables dans les styles en ligne (lorsqu'on utilise l'attribut style directement dans la balise). Mais je ne me suis jamais vraiment penché sur la question. D'ailleurs, je ne me suis jamais penché sur la question des styles CSS incorporés aux e-mails, donc je ne suis pas compétent dans ce domaine.

Réponse à une autre question (j'ai un peu perdu le fil) :
Quand tu utilises

#mailcontent a {propriétés css}

Les propriétés seront appliquées aux éléments a contenus à l'intérieur de l'élément ayant pour attribut mailcontent. Le code HTML correspondant pourra donc être (par exemple) :

<div id="mailcontent">
	<p>Ceci est un paragraphes avec <a href="...">un lien</a></p>
</div>

Une petite révision des sélecteurs CSS ?

Ensuite, je conseillais de double le body de ton mail par une div ayant un identifiant précis, qui permettra de passer des propriétés aux paragraphes, aux liens, aux titres (,etc.) du mail et non pas de toute la page (dans le cas d'un webmail, ça peut être problématique !).
Structure de base :

<!DOCTYPE ...>
<html>
	<head>...</head>
	<body>
	<div id="mailcontent">
		Contenu de mon e-mail...
	</div>
	</body>
</html>

Quelque chose du genre. Je rappelle que je n'y connais rien en e-mail HTML, donc aucune garantie sur ce que ça peut donner.

Merci pour ton complément d'information mpop...

Concernant les styles en ligne, il me semblait bien que l'on ne pouvait pas modifier l'apparence des liens.

Mais comme dirait Laurent Denis, que je rejoins sur ce point: quel intérêt puisque cela risque d'être mal interprêté par le client webmail?! Plus cela sera sobre côté code, mieux ce sera. Et le texte brut est toujours préférable de toute façon

Pour les sélecteurs css ok je suis d'accord.
C'est juste l'ajout, devant l'annonce dans le css dans le cadre d'un mail, qui me chiffonne:

[b]div[/b]#mailcontent a {propriétés css}

Cela ne change rien dans le html donc? On retrouve toujours:

<div id="mailcontent">
<p>Ceci est un paragraphes avec <a href="...">un lien</a></p>
</div>

a écrit :
Une petite révision des sélecteurs CSS ?

Cela semble nécessaire encore, encore et toujours même ( tu noteras ma signature met en garde dès le départ )

Pour conclure, tu n'y connais peut être rien en e-mail mais tu m'as énormément aidé et si tu dois en réaliser un dans l'avenir tu auras, je pense, déjà de solide base

Encore merci de ton aide