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.
Version imprimable
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.
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:
2
3
4
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:
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.Code:<p style="color:#af0024;font-weight:bold;">Ceci est un paragraphe sur lequel est appliqué un style en ligne</p>
- 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! ;)
:mouarf1:
Excellente réponse ! :king:
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! :king:
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.
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.
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 :
y'a pas de saut !! au secours, la maquette étant validé, il faut que ça apparaisse identique !!Code:<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>
merci de votre aide
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.
On a la même chose sur developpez : http://a-pellegrini.developpez.com/tutoriels/css/email/