Css - BG - Newsletter - Hotmail

FranZz

FranZz

Membre actif
19 Juillet 2007
462
12
Namur
Salut,

Je suis en train de rafraichir une newsletter pour le boulot ...

Elle Correspond à ce qui est demandé, elle passe au w3c ...

MAIS quand je l'envois avec le prog (Max Bul Mailer ), tout s'affiche, sauf le css !!!

Je suis sur MAIL ( mac ) et l'affichage est nickel, mais tout ce qui est Hotmail, Gmail, Yahoo, y'a quedalle qui s'affiche, le texte est quesi brut... ex ci dessous

1 // Tout est ok sous "MAIL" | Outlook


2// Sous hotmail


Toutes mes images sont des liens absolus vers mon site, la page XHTML ne contient aucune image ... Il y a juste deux images qui s'affichent, celles que je n'ai pas mis en BG ...

C'est quoi la soluce?
 
Salut Gloup _> Sympa le mail ... Au début je pensais que c'était une boutade, puis je suis allé lire l'artikel ...

Tssss - Ben jusqu'ici , c'est pas ok poour moi !

J'ai bien inséré ( ici à titre d'exemple) du style dans le Body, mais ça change pas, absolument rien ... Je vais relire l'article !

<body>
<style type="text/css">

#contenudroit {
font-family:Geneva, Arial, Helvetica, sans-serif;
margin-right:auto;
margin-left:auto;
color:#666;
font-weight:lighter;
margin-top:0;
width:260px;
float:right;
padding-top:10px;
padding-bottom:20px;
list-style-type:lower-roman;
}
</style>
</body>
 
C'est toutes la section <style></style> que tu dois mettre dans le body, hotmail la fait sauter quand il la rencontre dans le head. Puis l'affichage dans les webmails, c'est pas encore ça faut pas trop se prendre la tête la-dessus, si tu as fais ta lettre en utilisant bien la sémantique html (ce qui semble être le cas), c'est bon.

Et ne pas oublier aussi que si une image n'est pas destiné à être décorative mais informative, elle ne doit pas se retrouver dans les css mais bien incorporée dans la page (avec l'attribut alt qui va bien). ;)

En fait, il faut toujours penser son document nu (sans css), regarder ce que ça donne, et puis ajouter les css pour décorer&#8230;
 
Bah,

j'essaie j'essaie, mais simplement la couleur des liens, impossible à gérer !!!

Le Hotmail me "nie" tout cce qui est autre que le texte brut et les liens absolus..;

Pas de BG / Pas de couleurs de liens / même <h1></h1> n'est pas coloré...

tsssss _> Je continue la lecture !:) :rateau: :rateau:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="La cellule, Les tissus" />
<meta name="DC.title" content="En savoir plus *" />
<meta name="description" content="Le corps Humain " />

<title>..::E-Newsletter bancalle::..</title>

</head>
<body>
<style type="text/css">

h1 {
font-size:30px;
color:#FFF;
text-align:center;
font-weight:lighter;
}


</style>
<h1>ma Newsleter qui marche pas</h1>
</body>
</html>
 
Les background sautent dans hotmail, on ne peut rien y faire, tu peux prévoir une couleur d'arrière-plan au cas où l'image saute. :)

Pour le reste il faut bien hiérarchiser les css pour éviter de faire référence à des styles existants dans la page hotmail et ne pas commencer des classes par des points mais les lier avec l'élément correspondant. Exemples :

Pas bon :

Bloc de code: 
.mesliens {color: red}
Bon :

Bloc de code: 
a.mesliens {color: red}
Très bon

Bloc de code: 
#contenu a.mesliens {color: red}
Ou #contenu serait un div englobant toute ta mise en page, l'ID étant un mot français il y a peu de chance que l'on retrouve cet id dans le code de la page hotmail. Donc pas d'interférences. :)

Et toujours bien utiliser effectivement les chemins absolus pour les images :

Bloc de code: 
http://monsite.com/newsletter/img/bebe.jpg
Il est aussi conseillé de placer une copie de la newsletter sur le site et dans le mail donner le lien au cas où ça s'afficherait mal. :)
 
LAlalaaaaaaaaaaaaa

Oui oui, j'utilise le #...

mes id quoi !

ceci fait partie de ma page, mais bon, j'ai simplifié ...

<div id="contenudroit">
<h3>&gt;&gt; Acc&egrave;s Rapide</h3>
<ol class="contenudroit" >
<li><a href="encyclo/x1.htm">Notre site health and Food.be </a></li>
<li><a href="encyclo/x2.htm">Toutes les News </a></li>
<li><a href="encyclo/x3.htm">Le dernier sommaire de la revue </a></li>
<li><a href="encyclo/x4.htm">Les archives </a></li>
<li><a href="encyclo/x5.htm">Les &quot;Di&eacute;t&eacute;-tocs&quot;</a></li>
<li><a href="encyclo/x6.htm">Les &quot;En-brefs&quot; </a></li>
<li><a href="encyclo/x7.htm">Les organes des sens</a></li>
</ol>
<h3>[&bull;] Liens &agrave; ne pas manquer </h3>
<div class="a">La Margarine | Choix v&eacute;g&eacute;tal <img src="http://www.xxxxxxx/test/promo.jpg" alt="vegetal" width="240" height="80" class="b" /></div>
<div class="a">Le corprs et son fonctionnement <img src="http://www.xxxx.be/test/super2.jpg" alt="corps" width="240" height="73" class="b" /></div>
</div>

'Fin soit ... Faut que je bouquinne, parce que même avec mes <div id="chose"></div> non, ça ne marche pas .. ET je ne parle même pas du Float ..
 
Bon si je reprend le code que tu viens de donner, ceci devrait marcher :

Bloc de code: 
#contenudroit ol li a {color: red}

Puis c'est difficile de se faire une idée avec des bouts de code, tu n'as pas une page en ligne?
 
>_

Ok, très sympa la proposition , mais la page en question, vu les modifications que j'essaie de lui apporter depuis une heure, n'est plus une page, mais un chantier ou les ouvriers sont pas en accord avec le contremaître (...) ...

Je dois boucler la MEP d'une revue, d'ici 1/2 h cela sera fait, je t'indiquerai le lien!

Merci d'avance, et sympa de te pencher sur cette ************ de question !!
 
C'est quand même lourd des lire ça et de se rendre compte, qu'en gros, pour le moment, y'a pas vraiment de soluce..........

Merci du lien ...
 
Pour avoir fait pas mal de newsletters "pro" dans ma vie et pour discuter tous les jours avec des intégrateurs qui ne font que ça de la journée (gros site européen de commerce en ligne), le plus rapide et ce qui passe le mieux pour les newsletters graphiques :

HTML3. Avec tableaux imbriqués et tags <font>. Aucune CSS, qui de toute façon vont être zappées (ou pas) au bon vouloir du webmail, comme tu as pu t'en apercevoir.

C'est moche, c'est lourd, mais ça passe très bien sur tous les webmails. Par contre, faire des pages relativement légères avec ces techniques est, à mon humble avis, un art qui s'est perdu.

A l'heure de l'ADSL et des connaissances des clients qui payent ces news, et du souci de rentabilité absolue des web agencies, tout le monde s'en fout un peu de la lourdeur des pages.
 
Tiens c'est bizarre, au boulot on fait des newsletters en html + css et ça se passe très bien*. On a bien sûr encore des newsletter en mode tableaux imbriqués mais c'est une horreur chaque fois qu'il faut mettre à jour le contenu.

Et tout le monde ne se fout pas de la lourdeur des pages, encore pas mal de personnes surfent en RTC. Chez nous, nous essayons de ne pas dépasser les 30Ko par mail.



*Sauf outlook 2007 qui utilise dorénavant le moteur html de&#8230; Word 2007. :rolleyes: Et gmail si on ne met pas les styles en ligne. Mais là on s'en fout : si c'est sémantique la personne recevra son mail nu avec les styles par défaut pour les éléments. Et puis la grosse partie utilisateurs gmail doivent consulter leur mail dans un client moderne (Mail, Outlook pas 2007, thunderbird, etc&#8230;) et là ça s'affiche correctement. Le tout est, un, que la mise en page se dégrade correctement et deuxièmement mettre en première phrase du mail un lien vers le site pour lire le tout avec la mise-en-page originale.
 
gloup gloup a dit:
Tiens c'est bizarre, au boulot on fait des newsletters en html + css et ça se passe très bien*.
Cliquez pour agrandir...
Promis, on ne commence une polémique un dimanche soir à minuit hein ? :) Le fait qu'il y ait une question à ce sujet montre bien que des personnes ont des problèmes et s'étonnent de voir leur CSS zappées.

On a bien sûr encore des newsletter en mode tableaux imbriqués mais c'est une horreur chaque fois qu'il faut mettre à jour le contenu.
Cliquez pour agrandir...
Je n'ai jamais dis que c'était joli ou une excellente technique. C'en est juste une qui marche bien au regard des contraintes actuelles (généralement le temps et l'exigence des clients).

Et tout le monde ne se fout pas de la lourdeur des pages, encore pas mal de personnes surfent en RTC. Chez nous, nous essayons de ne pas dépasser les 30Ko par mail.
Cliquez pour agrandir...
Perso, les echos que j'avais eu c'était plutôt des raisonnements du style "RTC ? Ils m'intéressent pas. Moi, mes clients, je veux qu'ils en prennent plein la vue avec mon mailing !" On est d'accord ou pas.

Pour info, le dernier mailing que j'ai fait, c'était pour SFR Pro, les specs que j'avais étaient entre 100 Ko et 150 Ko, il y a à peu près un an mais je doute que cela est changé entre temps.

*Sauf outlook 2007 qui utilise dorénavant le moteur html de… Word 2007. :rolleyes: Et gmail si on ne met pas les styles en ligne. Mais là on s'en fout : si c'est sémantique la personne recevra son mail nu avec les styles par défaut pour les éléments. Et puis la grosse partie utilisateurs gmail doivent consulter leur mail dans un client moderne (Mail, Outlook pas 2007, thunderbird, etc…) et là ça s'affiche correctement. Le tout est, un, que la mise en page se dégrade correctement et deuxièmement mettre en première phrase du mail un lien vers le site pour lire le tout avec la mise-en-page originale.
Cliquez pour agrandir...
Si t'arrive à faire comprendre à un gros client (genre SFR) qui estime que son image est la chose la plus importante du monde (à tord ou à raison, mais c'est pas le problème ici), que c'est pas grave que SA mise en page se dégrade dans Gmail (même si c'est normal, que c'est les standards du web, et que c'est une bonne chose en fait), tant mieux pour toi. Perso, j'avais exactement le contraire.

A près on peut discuter sur le pourcentage d'utilisateurs de webmail qui utilisent un vrai client desktop mais par définition (webmail), je ne pense pas que cela soit la majorité (mais aucune stat qui pourrait valider mon sentiment)
 
damien_t a dit:
Promis, on ne commence une polémique un dimanche soir à minuit hein ? :) Le fait qu'il y ait une question à ce sujet montre bien que des personnes ont des problèmes et s'étonnent de voir leur CSS zappées.
Cliquez pour agrandir...

À minuit? Ah non! :D Je vais dormir moi… :eek: Pour ne pas avoir les css zapées, il n'y a qu'une seule solution (un peu contraignante, il est vrai) mettre les styles sur les éléments :

Bloc de code: 
<h1 style="color:red; font-size: 120%">Titre<h1>

damien_t a dit:
Je n'ai jamais dis que c'était joli ou une excellente technique. C'en est juste une qui marche bien au regard des contraintes actuelles (généralement le temps et l'exigence des clients).
Cliquez pour agrandir...

On est d'accord mais je parie qu'on arrive aussi rapidement à faire une newsletter html&css. Évidemment faut avoir un peu d'expérience… ;)

damien_t a dit:
Perso, les echos que j'avais eu c'était plutôt des raisonnements du style "RTC ? Ils m'intéressent pas. Moi, mes clients, je veux qu'ils en prennent plein la vue avec mon mailing !" On est d'accord ou pas.

Pour info, le dernier mailing que j'ai fait, c'était pour SFR Pro, les specs que j'avais étaient entre 100 Ko et 150 Ko, il y a à peu près un an mais je doute que cela est changé entre temps.

Si t'arrive à faire comprendre à un gros client (genre SFR) qui estime que son image est la chose la plus importante du monde (à tord ou à raison, mais c'est pas le problème ici), que c'est pas grave que SA mise en page se dégrade dans Gmail (même si c'est normal, que c'est les standards du web, et que c'est une bonne chose en fait), tant mieux pour toi. Perso, j'avais exactement le contraire.
Cliquez pour agrandir...

Heu attends là… Plein la vue… :hein: Tu ne vas quand même pas me dire que vous envoyez des mails avec du flash ? :eek: Ou alors c'est des gifs animés partout? :confused:

damien_t a dit:
A près on peut discuter sur le pourcentage d'utilisateurs de webmail qui utilisent un vrai client desktop mais par définition (webmail), je ne pense pas que cela soit la majorité (mais aucune stat qui pourrait valider mon sentiment)
Cliquez pour agrandir...

Pas de stats non plus, mais si on lit les témoignages sur ce forum, la première chose que les switcheurs demandent c'est comment lire leur courrier hotmail et gmail dans Mail ou Thunderbird. Mais c'est vrai que ça n'a aucune valeur. ;)
 
gloup gloup a dit:
...Chez nous, nous essayons de ne pas dépasser les 30Ko par mail.
Cliquez pour agrandir...

Pour la newsletter de la sncf c'est entre 150 et 300 Ko minimum :siffle:

Ce que dis damien_t me semble réaliste d'un état d'esprit qui règne dans les agences, petites ou grandes. Si ces dernières prenaient en considération l'utilisateur (c'est-à-dire l'internaute), cela se saurait.

Ceci est regrettable à tout point de vue, mais je confirme que ça se passe comme ça.

Enfin, d'un point de vue technique, je vais dans le même sens que damien_t : html 3 et css embeded (comme disent les anglo-saxon). C'est l'assurance que la lettre d'information passe à peu près partout.
;)
 
fredmac75 a dit:
Enfin, d'un point de vue technique, je vais dans le même sens que damien_t : html 3 et css embeded (comme disent les anglo-saxon). C'est l'assurance que la lettre d'information passe à peu près partout.
;)
Cliquez pour agrandir...

Pour l'html 3 je ne vois pas bien la raison, ici on envoie même du xhtml transitionnal et ça marche, la plupart des clients mail ont un moteur de rendu moderne capable d'afficher les pages les plus complexes (outloook 2003 : IE6, Thunderbird : firefox, etc). ;) Mais je le répète, les css sur les éléments ça fonctionne dans 99% des cas.
 

Sujets similaires

M
Newsletter HELP : JPG ne s'affichent PAS!
Réponses
4
Affichages
2K
Développement web
momo-fr
momo-fr
Tonio the best
Newsletter, problèmes affichage dans les webmail
Réponses
17
Affichages
4K
Développement web
gloup gloup
G
K
[Tutoriel] Créer ses modèles de Mail pour Mac OS X
Réponses
6
Affichages
14K
FAI et réseau Mac
nedgral
N
Haut Bas
Back