Envoyer une newsletter contenant des styles css

**whitespirit** · 06/11/2007, 13h08

bonjour,

J'ai construit ma newsletter depuis dreamweaver qui m'a généré des styles CSS approprié.

Mais comment faire pour intégrer les styles css ? Mon ami google de m'a pas bien aidé...

Merci de votre aide.

**Dsphinx** · 06/11/2007, 13h21

Certains clients de message ou webmail n'interpretent pas bien les CSS ! Donc faire quelques tests est nécessaire. A mettre entre les balises HEAD :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<style type="text/css">
        a {font-family: Verdana; font-size: 10; text-decoration: none; color:#ff3366;}
        a:hover {font-family: Verdana; font-size: 10; text-decoration: underline; color:#000000;}
</style>

**BnA** · 06/11/2007, 14h18

Envoyer un mail CSS correct est vraiment très complexe...

Les différents webmails/clients ne fonctionnent pas tous de la même façon, c'est pourquoi il y a quelques règles à suivre:

- Mets ta balise <style> dans le <body> (oui, oui!!), car Hotmail (lui et seulement lui) supprime totalement la balise <head> et son contenu. Donc, pas de méta ni rien. Pas besoin de spécifier de doctype non plus.
Surtout pas d'appel vers un fichier CSS externe! un autre problème existe: GMail supprime lui la balise <style>. Le mieux alors est d'utiliser les styles en ligne. C'est fastidieux, lourd et pas productif pour un sou, mais ça marche nickel. Si tu ne sais pas ce qu'est un style en ligne, c'est ceci, simplement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <p style="color:#af0024;font-weight:bold;">Ceci est un paragraphe sur lequel est appliqué un style en ligne</p>

Seul problème (d'où le manque de productivité), c'est que tu devra répéter à chaque balise la mise en page désirée.

- Surtout, ne pas utiliser du positionnement relatif et/ou absolu. Pour définir tes zones, utilise un <table> "structuré" suivant l'affichage final que tu désire.

- Toujours mettre l'attribut "alt" dans <img>, car comme la plupart des clients/web mails n'affichent pas les images par défaut, il faut que l'utilisateur puisse s'y retrouver directement.

- Dans le même ordre d'idée, n'utilise pas d'image pour les boutons, liens ou titres de ton mailing.

- Spécifie TOUJOURS la largeur et la hauteur de tes balises <img> afin d'aviter que les images de décalage s'étirent, et bousillent ta mise en page.

Si tu as d'autres problèmes, n'hésite pas à me contacter, je viens de finir de bosser sur un mailing justement (mon premier!!) donc je suis à jour vis-à-vis des problèmes possibles!

**Dsphinx** · 06/11/2007, 14h22

Excellente réponse !

**BnA** · 06/11/2007, 14h27

Comme je l'ai dit, j'ai passé ma matinée à justement traquer les soucis de compatibilité. Maintenant, mon mail passe correctement sur Yahoo, Hotmail, Gmail, Outlook (& Outlook Express), Lotus Note, AOL, Thunderbird, MacMail, Entourage et Eudora, donc je peux dire que sur le sujet, jme débrouille!

Et désolé de t'avoir démenti!

**whitespirit** · 07/11/2007, 06h36

Merci de ta réponse, j'ai essayé de mettre les styles dans le body, et ça a la'ir de marcher... Mais comment fais tu pour tester les différents webmails ? Tu crées un compte à chaque fois ?

J'utilise dreamweaver pour créer mon tableau. Existe t'il un moyen de lui dire de copier chaque style directement dans la balise... Un peu comme tu fais avec <p style...>

Merci beaucoup... A bientot.

**BnA** · 07/11/2007, 10h34

Pour tester les différents webmails, il faut en effet un compte e-mail chez chacun d'eux. Mais libre à toi de demander à tes connaissances de tester pour toi.

Ce que j'ai fait pour Yahoo!, Hotmail et quelques autres: tu envoies ta newsletter chez ta connaissance (ou tes collègues, comme moi), et tu lui demande d'en faire un screenshot (afin d'éviter les mauvaises interprétations éventuelles).

Pour ce qui est des styles en ligne, malheureusement c'est le problème. Si par exemple tu veux mettre un style particulier sur une balise <h1>, et que cette balise se retrouve plusieurs fois dans ta newsletter, tu devrais répéter les styles à chaque balise. D'où ledit manque de productivité.

Je t'ai envoyé un exemple concret et totalement compatible, pour que tu voies à quoi ça ressemble.

Bien à toi, et n'hésite pas à me PM si problèmes.

**mmarie001** · 26/02/2009, 18h13

Bonjour, grace à ce forum j'ai résolu mon problème de newsletter : le prestataire d'envoi me refusait les balises <span> (pourtant bien intégré à la page ? mais bon...) j'ai donc rajouté pour chaque paragraphe / titre / phrase les balises <p style= etc> et ça fonctionne SAUF QUE !! ça génère automatiquement des sauts de ligne alors que si je regarde mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td width="65%" valign="top"><img width="206" height="38" alt="" src="http://www./images3/legislation.png" /><h1 style="font-family: tahoma ; font-size: 11px ; color: #24B780;font-weight: bold;">titre </H1></td>

y'a pas de saut !! au secours, la maquette étant validé, il faut que ça apparaisse identique !!
merci de votre aide

**Ethyde** · 26/02/2009, 18h33

Bonjour,

un articles bien fait sur les problématiques de mail et css : Ensuring your HTML Emails Look Great and Get Delivered.

Ou l'on peut entre autre trouver deux liens : Email Standards Project qui travail pour une "normalisation" des client mail et Guide to CSS support in email clients (2008) qui regroupe la liste de toute les fonctionnalités CSS supporté par les clients mail et webmail les plus commun du marché.

En espérant que cela puisse vous aider.

**12monkeys** · 06/03/2009, 23h49

On a la même chose sur developpez : http://a-pellegrini.developpez.com/tutoriels/css/email/

Envoyer une newsletter contenant des styles css

HTML

Discussions similaires

Partager

Partager