28111 sujets

CSS et mise en forme, CSS3

[RESOLU] Integration e-mailing

Bonjour à tous,

Je me suis lancé dans l'intégration emailing professionnellement.
J'ai lu déjà beaucoup de ressources et j'ai des tableaux des propriétés css acceptés selon les webmails.

Je ne comprend cependant toujours pas ceci :

Comment gérer l'interlignage naturel des textes dans un e-mailing pour qu'il soit identique sur tous les webmails ?

Je ne veux pas faire d' interlignage spécial, d'ailleurs je n'indique pas d'interlignage avec line-height.
Simplement, Je voudrais juste que l'ecart entre 2 lignes de texte soit pareil que sur word ou quand j'ecris sur photoshop.
Sur les webmail (hotmail et gmail) il semble que quelques soit la taille taille du texte en pixel l'interlignage reste le meme au lieu de s'adapter proportionnellement.
Ca fait un grand interlignage sur des tout petits textes de footer par exemple.


J'ai tenté d'ecrire mes textes dans une balises font. Il y a des differences enorme d'interlignage entre gmail, hotmail d'un coté et outlook de l'autre. C'est correct sur outlook express, les autres doubles l'interlignage.

J'ai essayé avec du texte dans une balise span avec le texte en 10px. toujours sans indiqué de line-height et rien ne change.

j'ai aussi essayé d'indiquer un line-height mais cette propriété css n'est apparemment comprise que par outlook express qui sait déjà adapter correctement les interlignages proportionnellement à la taille du texte lui.
Hotmail et gmail continuent de me mettre un interlignage trop gros.

D'ailleurs l'augmentation bizarre de l'interlignage naturel des texte dans hotmail et gmail et surement d'autre à des conséquences.
En effet, du coup ces webmails en profite pour augmenter la taille des td qui les contienne puisaue la taille prévue n'est alors plus suffisante pour caser le texte.


Y a t'il un moyen d'homogéneiser ce bordel ?


Voila un exemple.
Il faut regarder le texte tout en haut sur fond bleu et qui est plus petit :

Sur cette premiere image j'ai simplement previsualisé l'email sur firefox
C'est l'interlignage que je voudrais obtenir.
http://www.francois-rosenbaum.com/images_emailings/affichage-de-mon-mail-sur-firefox.jpg

Sur cette 2eme image on voit que gmail transforme l'interlignage du texte ecrit petit sur fond bleu. L'interlignage est trop grand.
http://www.francois-rosenbaum.com/images_emailings/affichage-de-mon-mail-sur-gmail.jpg

HELP HELP !
J'ai 7 emails à rendre pour demain à mon client.
Modifié par boucdur00000 (24 Sep 2010 - 14:31)
Voile code tres simple de mon email en exemple :


<html>
<body topmargin="0" leftmargin="0" bgcolor="#E2E2E2">

<table align="center" width="580" border="0" cellspacing="0" cellpadding="0">    
  <tr bgcolor="#00bbed">
  <td width="24"></td>
    <td valign="middle" height="57">
        <span style="color:#00366d; font-family:Arial, Helvetica, sans-serif; font-size:10px;">
            Vous recevez ce message car vous &ecirc;tes abonn&eacute; &agrave; notre lettre d'information sur l’adresse suivante :<br/>
am.martel@gmail.com<br/>
Si le message ne s'affiche pas correctement, acc&eacute;dez &agrave; la version en ligne.<br/>
Si vous souhaitez ne plus recevoir d'e-mail de notre part, d&eacute;sabonnez-vous.
        
        </span>
    </td>
  </tr>
  
<tr>
    <td colspan="2">
        <img src="http://www.francois-rosenbaum.com/images_emailings/surfrider_foundation_j_0/image_logo_merci.gif" alt="Surfrider Foundation Europe : Merci du fond du coeur de rejoindre notre combat" height="118" width="580">
    </td>
  </tr>
  
    <tr bgcolor="#ffffff">
  <td width="24"></td>
    <td valign="top" height="27">
        <font color="#5a5b5b" size="2" face="Arial, Helvetica, sans-serif">
            Bonjour,
        </font>
    </td>
  </tr> 
  
</table>  

</body>
<html>
Salut,

Le rendu dans les emails fait partie des choses les moins contrôlables : il faut que tu conçoives ton email en considérant que l'interlignage sera celui par défaut de l'outil utilisé pour voir le mail, et tu peux éventuellement rajouter une propriété css inline sur line-height pour ceux qui le comprennent.
Bonjour lapin rouge,

Oui effectivement c'est très aléatoire mais quand on connais les trucs on peut prévoir à peu près le résultat.
Je viens de passer 20 heures de travail d'acharné vissé à mon bureau pour comprendre les règles liées à l'intégration d'emailing.
Le problème est le manque de ressource fiable sur le net. tout le monde dit n'importe quoi à ce sujet c'est incroyable.
J'ai lu une dizaine d'articles précis sur le sujet. Et pourtant la plupart de ces sources se contredisent ou annonce des informations fausses.

Mon problème venait du fait qu'un site à l'allure très fiable m'annoncait que les balises p dans les emails n'etaient pas prises en compte par hotmail. J'utilisais donc des spans à la place.

J'ai réalisé des heures de test et je suis heureux d'annoncer que les balises p sont prises en compte par tous les principaux webmails.

J'en profite pour partager le grand secret de l'integration emailing. Ca a bien failli me rendre cinglé hier soir ce problème.
Pour régler le problème des espaces étranges entre les tableaux html sur hotmail il faut faire ce ceci : rajouter style="display:block" directement dans les balises img
Hé oui ce problème vient des images.

Au revoir, merci, le problème à été réglé (dans la douleur).
Bonjour lapin rouge,

Oui effectivement c'est très aléatoire mais quand on connais les trucs on peut prévoir à peu près le résultat.
Je viens de passer 20 heures de travail d'acharné vissé à mon bureau pour comprendre les règles liées à l'intégration d'emailing.
Le problème est le manque de ressource fiable sur le net. tout le monde dit n'importe quoi à ce sujet c'est incroyable.
J'ai lu une dizaine d'articles précis sur le sujet. Et pourtant la plupart de ces sources se contredisent ou annonce des informations fausses.

Mon problème venait du fait qu'un site à l'allure très fiable m'annoncait que les balises p dans les emails n'etaient pas prises en compte par hotmail. J'utilisais donc des spans à la place.

J'ai réalisé des heures de test et je suis heureux d'annoncer que les balises p sont prises en compte par tous les principaux webmails.

J'en profite pour partager le grand secret de l'integration emailing. Ca a bien failli me rendre cinglé hier soir ce problème.
Pour régler le problème des espaces étranges entre les tableaux html sur hotmail il faut faire ce ceci : rajouter style="display:block" directement dans les balises img
Hé oui ce problème vient des images.

Au revoir, merci, le problème à été réglé (dans la douleur).
Modifié par boucdur00000 (24 Sep 2010 - 14:32)
Premièrement : coïncidence, je vois dans ton code que tu travailles en ce moment sur un email de remerciement à destination de Surfrider Foundation Europe. C'est marrant car je travaille à Surfrider et je suis sûrement la personne qui validera les emails sur lesquels tu es en train de t'arracher les cheveux.

L'anecdote passée, on va essayer d'être pertinent.

Pour commencer, un excellent article qui m'a rendu bien des services quand j'ai commencé la création d'emailing, c'est celui de pompage.net Email HTML - Dompter la bête.

Une autre url ultra utile, les compatibilités CSS de Outlook 2007.

Ensuite, je vais prendre exemple sur ce que je fais pour Surfrider, la newsletter.
Dans les grandes lignes il faut :
* Programmer à l'ancienne, avec des tableaux, des attributs de balise, des styles inline
* Quasiment doubler chaque attribut avec son équivalent en style css, surtout pour tout ce qui est marge, largeur, hauteur, padding
* Redéclarer la famille, la taille et la couleur de la police chaque fois que tu intègres un nouveau <table>. Sinon ça crée un bug sur Outlook 2007 qui réinitialise la font avec la font par défaut.
* Ne pas utiliser de background image
* Le padding marche pas chez tout le monde
* Utiliser des urls absolues comprenant le domaine : http://www.tonsite.com/images/header.jpg et pas images/header.jpg, ça crée des bugs avec certains webmail

Il y a toujours des variables que tu ne maitriseras pas, car les clients mail et les webmails ont des comportements trop différents. Oublie la compatibilité avec Lotus, c'est mort.
Personnellement, je suis partisan du bon compromis. Je teste le rendu sur un panel de clients email populaire (outlook, Mail, Entourage, gmail, live, yahoo, thunderbird). Si j'ai un rendu parfait ou très proche de ce que je voulais, je valide. Un différence de padding ou de line-height sur un texte c'est un défaut acceptable.

S'il te faut 2h pour convertir ta maquette PSD en HTML et que le rendu est acceptable sur la majorité des clients email, tu vas pas passer 8h de plus à perfectionner la chose pour un ROI supra faible car les destinataires finaux ne verront pas la différence.

Pour rentrer plus dans le code :
La balise <body>

<body link="#eb8a00" alink="#000000" vlink="#eb8a00" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" bgcolor="#000" style="margin:0;padding:0;color:#111;font-size:10px;font-family:Arial,Verdana, Helvetica, sans-serif;background:#000">

La balise <table> : Je te conseille de déclarer les styles de texte et font dans un attribut style de ta balise table de la manière suivante :
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0;font-size: 12px; font-family:Arial,Verdana, Helvetica, sans-serif;">

les liens : l'idéal est de définir la couleur du lien directement dans un style inline, mais de doubler ça avec un span où tu définis la même propriété. C'est lourd mais certains navigateurs surclasse le style css du lien. (Gmail en tête je crois, mais j'ai un doute)
<a href="#" style="color:#ff0000"><span style="color:#ff0000">Mon lien</span></a>

les images : toujours border=0 et display:block, le premier évite de se retrouver avec des bordures si on fait un lien sur l'image, le deuxième évite un bug sur certains clients email qui rajoute une marge sous l'image.

Voilà les quelques billes que je peux te donner. Ca répond pas vraiment à tes problèmes mais c'est mon expérience et cette manière de programmer mes emails me donne plutôt satisfaction. J'attends ces emails avec impatience et j'espère que le fameux "am.martel@gmail.com", destinataire de ton emailing, ne sera pas trop sévère Smiley cligne
Modifié par trigun (25 Sep 2010 - 07:25)
Salut Trigun,

Arnaud Masselin que je viens d'avoir au téléphone vient de me surprendre en me disant qu'une réponse m'attendait sur Alsacréations.

Alors ça c'est extraordianaire !
C'est bien la première fois qu'un client répond à un de mes messages sur alsacréations.
C'est franchement drôle mais aussi un peu embarassant.

Impossible de nier qu'il m'a fallu une petite période de réadaptation pour me remettre 100% au point sur la technique d'intégration emailing.
Aucun soucis désormais, je suis complètement au point sur le sujet.

Merci pour le message que je ne lis que maintenant.

A bientot, peut etre aurais je le plaisir de te parler de vive voix un jour au téléphone.

Francois
Bonjour,

Il y a un côté le style="display:block;" à ajouter à toutes les balises images mais il reste le souci de l'interligne pour les parties découpées en texte.
Il est beaucoup plus grand sous Gmail qu'Outlook par exemple, et donc parfois quand la zone de texte est couplée à une image sur le côté, ça casse le tout...

Auriez vous une solution pour 'forcer' l'interligne sur Gmail svp ?
Pour les problème d'interlignage je m'y prend de cette facon :
J'utilise soit des span soit des p ou je place les texte directement dans les td.
Je n'ai pas encore trouvé la règle précise et universelle qui m'évite tout probleme d'interlignage.
Je tatonne donc entre ces solutions.
Pour les tous petits paragraphes j'ai deja resolu un probleme d'interlignage en placant chaque ligne dans un tr different.
Enfin je reviens sur ce que j'ai dis au dessus, on peux s'aider de line-height.

Il me semble sans en etre bien sur que c'est quand je place le texte est directement dans le td sans utiliser ni span ni p que j'obtiens la meilleure homogeinisation des interlignages. Je place le style du texte dans le td

Je te conseille d'utiliser les ressources de trigun ci dessus
Modifié par boucdur00000 (29 Sep 2010 - 13:14)
Bonjour
nouveau sur le site
je debarque un peu, pas sur que ce soit le bon post..

voila l'affaire, je réalise des newlettres depuis quelques temps pour une asso,
je bute toujours sur le meme problème :
a savoir l'affichage "line-height" sous hotmail..

je cherche depuis un bout de temps sur la toile, j'essaie diffèrent truc glaner ici ou la
mais j'ai toujour le meme problème, (je suis sous osx, utilise FF et teste les envois sur Gmail, Yahoo et hotmail).

j'ai réussi a integrer mes tableaux, mes couleurs de font de tableaux, de fond de body, mes images, mes liens cliquable, mes couleurs de font, les tailles de font sur les 3 clients..

par contre j'ai toujour une difference d'interligne sur hotmail ?
et la je bute..

j'ai essayer differente "valeur" pourcentage, pt, px etc
different "style" <p>, <span>, <div>

ex :
<table width="700" border="0" cellspacing="0" cellpadding="10"bgcolor="#000000" align="center"><tr><td class="standard"><font face="Helvetica,sans-serif" size="2" color="#ffffff" style="font-size:15px;line-height:16px" ><div style="text-align: justify; "></div><div style="text-align: center; "></div><div style="text-align: justify; ">

si quelqu'un peu m'aiguiller
merci
Salut noar,

La propieté css en l:igne line-height ne fonctionne pas.
De plus tu n'a pas besoin de <font face="..... les propriété dansstylesuffisent. il faut simplement utiliser uniquement les styles compatibles.

Pour gérer la line height quand c'est important je crois que je fais comme ceci.
C'est à dire que je met les différentes lignes sur des lignes différentes de tableau et je gère les hauteur et les alignement verticaux.

<table width="700" border="0" cellspacing="0" cellpadding="0 align="center">
   <tr>
        <td style="font-size:24px;font-familly:arial helvetica sans-serif;" [#red]height="XXpx" valign="bottom"[#]>
              Mon titre ligne 1
        </td>
   </tr>
  <tr>
        <td style="font-size:24px;font-familly:arial helvetica sans-serif;" [#red]height="XXpx" valign="top"[#]>
              Mon titre ligne 2
        </td>
   </tr>
</table>


Je ne suis pas sur à 100% de mon coup.
Ca pourrait ne pas marcher.

Tiens moi au courant.

Line-height n'est pasune propriété compatible avec les emailing sur hotmail.
Donc tu peux abandonner l'utilisation de la propriété css line-height.
Uniquement sur hotmail, elle ne fonctionne pas.

Voilà un site que je trouve pratique pour tester les emails litmus.com
Sujet clos
Aller à