Prob email / plateforme

Bonjour à tous .. je suis occuper à me prendre la tête sur la création d'email html...
quelqu'un aurait une solution qui marche partout...

pour l'instant mon html est correct en ff, ie6 , ie7 , mais pas dans word...

et office 2007 ouvre les email html via word
Modifié par gaylover (03 Oct 2007 - 15:25)

Bonjour,

Une solution qui marche partout? Aucune.
Bienvenue dans le monde prise de tête du design d'e-mails HTML, qui a fait un bond de cinq ans en arrière grâce à nos amis de Microsoft.

Voir: A Guide to CSS Support in Emai: 2007 Edition.

Solution: design à base de tableaux, et tentatives de limitation des dégâts.

Salut,

J'ai une question pour rebondir sur le sujet, je ne veux pas le dévier c'est juste une parenthèse, quelle est la proportion des internautes n'ayant pas acrobat reader? Car ça pourrait résoudre le problème de mise en forme.

c'est clair cela pour etre une altenative mais c'est un peu lourd envoyer un pdf pour du contenu(une info )que t'as voulu rendre joli....
de plus la visualisation ne se fait pas de suite ...


as-t'on la proportion des gens qui utilisent
Live Mail ,Gmail,Outlook 07,Notes 6 et Eudora qui sont les plus mauvais interprete de support css

car les autres (Thunderbird, Mac Mail ,Old Yahoo,Outlook 03,New Yahoo,AOL,Entourage,Hotmail) supporte les css au minimum à 80 %...

gaylover a écrit :
as-t'on la proportion des gens qui utilisent
Live Mail ,Gmail,Outlook 07,Notes 6 et Eudora qui sont les plus mauvais interprete de support css

À priori non, pas de statistiques fiables à ce sujet, comme le souligne David Greiner de Campaign Monitor.

a écrit :
Another big differentiator is the fact that there were 2 or 3 browsers to consider back then and we knew exactly which web browsers were popular, making it much easier to know where to focus our energies. There is almost no data like this for the email world. Are more of my subscribers using Thunderbird or Apple Mail? It's almost impossible to know.

Juste un ptit truc sur lequel je voulais redondir...

j'essaye comme vous l'avez compris un mail qui passe partout et qui sois joli...

evidement vu les posibilité qu'il nous reste c'est énorme découpage et utilisation de background color en style embarqué dans les td et images dans les td...

evidement y'a pas moyen d'utisisé un dégradé et de mettre une texte par dessus ,a moins que je me trompe?

gaylover a écrit :
evidement y'a pas moyen d'utisisé un dégradé et de mettre une texte par dessus ,a moins que je me trompe?

Ben si, tu peux utiliser une image en background via l'attribut style par exemple. En gardant à l'esprit que ça ne passera bien sûr pas partout.

non... j'aimerais que cela passe sur outlook2007 et donc pas d'utilisations de background images...

pouvez vous m'indiquer comment creer une table avec des bords de 16px de chaque cote

j'ai fais plusieurs essai mais rien ne fonctionne sous ie...

<table  width="597"  border="0" cellpadding="0" cellspacing="0">
	<tr><td colspan="9"><img src="topde597.gif" width="597" height="194" alt=""></td></tr>
	<tr>
	<td width="16" style="background-color:#808080;width:16px;"></td>
	<td colspan="7" width="565" style="background-color:#3971b2">titre document</td>
	<td width="16" style="background-color:#808080"></td>
	</tr>

	<tr><td colspan="9"><img src="basde597.gif" width="597" height="16" alt=""></td></tr>
</table>

Modifié par gaylover (10 Oct 2007 - 16:38)

gaylover a écrit :
non... j'aimerais que cela passe sur outlook2007 et donc pas d'utilisations de background images...

Comme disent nos amis anglo-saxons: Well, you're fucked.

gaylover a écrit :
pouvez vous m'indiquer comment creer une table avec des bords de 16px de chaque cote

En CSS, oui.
À l'ancienne, non, je ne connais rien à ces anciennes technologies.

Mais il y a par ici des vieux de la vieille qui s'en souviennent peut-être encore, de la mise en page par tableau.

c'est clair que c'est pas cool d'ecrire des tableaux.. ça fait lgt aussi...

j'espere reveiller un ou deux dinosaures alors ...
Modifié par gaylover (10 Oct 2007 - 17:20)

il faut faire une definition avant....
tel que

<tr style="background-color:#808080;">
    <td width="16"></td>
    <td width="22"></td>
    <td width="14"></td>
    <td width="16"></td>
	<td width="461" ></td>
	<td width="16"></td>
	<td width="14"></td>
	<td width="22"></td>
	<td width="16"></td></tr>

Une autre solution qui commence a se répandre de plus en plus, tu fait ta newsletter en images ...C'est pas top, mais ca limite largement la casse ...

Il est vrai que d'aucuns limitent largement les coûts de production en faisant des newsletters qui se résument à:
- un lien «si cet e-mail ne s'affiche pas correctement, cliquez ici...»;
- une grande image qui est le «contenu» de la newsletter (peut-être une image map?);
- les mentions légales et lien de désinscription qui va bien à la fin.

C'est sûr que là c'est rapide.
Pour limiter les dégâts, on écrira peut-être une version texte brut, que l'on enverra en même temps (courriel au format MULTIPART).

J'ai tout récemment fait une newsletter pour un client très exigeant, j'ai suivi les recommandations de Campaign Monitor. Et ma newsletter semble 100% compatible, même si le rendu diffère un peu selon les clients mails.

Opte pour un codage tableaux avec css en ligne. C'est une vieille méthode, mais pour les newsletter c'est ce qu'il y'a de plus compatible.



Pour une marge de 10px par exemple, il faut ajouter des td avec un height ou un width de 10 px. Car les marges ne sont pas acceptés chez certains clients mails. (gmail par exemple).

Je te mets un petit bout du code pour que tu puisse regarder comment ça marche. Du coup, c'est primitif, mais bon ça marche.

Pour ça :


Voici mon code :

<table align="center" cellpadding="0" cellspacing="0" style="width:608px; margin:0 21px 0 21px;">
          <tr>
            <td colspan="2" height="10"></td>
          </tr>
          <tr>
            <td colspan="2" height="11"><img src="http://www.maximelebreton.com/forumalsa/border.png" alt="" width="608" height="11" /></td>
          </tr>
          <tr>
            <td align="left" valign="top"><table cellpadding="0" cellspacing="0" style="width:296px;">
                <tr>
                  <td height="120" rowspan="3" style="width:120px; padding:4px; background:#DACBA5 url(http://www.maximelebreton.com/forumalsa/cadre-produit.png);"><a href="#"><img src="http://www.maximelebreton.com/forumalsa/produit4.jpg" width="120" height="120" border="0" /></a></td>
                  <td height="4"></td>
                </tr>
                <tr>
                  <td height="110" valign="top" style="border-top:1px solid #DDD0AD; border-right:1px solid #DDD0AD; border-bottom:1px solid #DDD0AD; padding:8px 8px 0 8px;"><p style="font:11px Arial, Helvetica, sans-serif; color:#333; padding:0 0 4px 0; margin:0; height:78px; text-align:left; overflow:none;"> <span style="font:bold 12px Arial, Helvetica, sans-serif; color:#333; margin:0; padding:0;"><a href="#" style="color:#333; text-decoration:none;">Cadeau pour une Maman : Stylos personnalisés</a></span>
				  <br />
				  <!-- Ce <br /> sert à passer la description à la ligne après le titre -->
                    Un bracelet original pour un cadeau personnalisé avec un cœur bombé de 2 cm monté</p>
                      <table cellspacing="0" cellpadding="0" style="width:150px;">
                        <tr>
                          <td><div style="display:block; float:left; background:#FFF; border:1px solid #FCC; font:bold 12px Arial, Helvetica, sans-serif; color:#C03; padding:1px 4px 1px 4px; text-align:center;">39,00 €</div></td>
                          <td align="right"><div style="width:74px; height:19px; display:block; background:#D34057; font:8px Arial, Helvetica, sans-serif; color:#FFF;"><a style="color:#FFF;" href="#" title="Commander"><img alt="Commander" title="Commander" src="http://www.maximelebreton.com/forumalsa/commander.png" width="74" height="19" border="0" /></a></div></td>
                        </tr>
                    </table></td>
                </tr>
                <tr>
                  <td height="4"></td>
                </tr>
            </table></td>
            <td align="right" valign="top"><table cellpadding="0" cellspacing="0" style="width:296px;">
                <tr>
                  <td height="120" rowspan="3" style="width:120px; padding:4px; background:#DACBA5 url(http://www.maximelebreton.com/forumalsa/cadre-produit.png);"><a href="#"><img src="http://www.maximelebreton.com/forumalsa/produit5.jpg" width="120" height="120" border="0" /></a></td>
                  <td height="4"></td>
                </tr>
                <tr>
                  <td height="110" valign="top" style="border-top:1px solid #DDD0AD; border-right:1px solid #DDD0AD; border-bottom:1px solid #DDD0AD; padding:8px 8px 0 8px;"><p style="font:11px Arial, Helvetica, sans-serif; color:#333; padding:0 0 4px 0; margin:0; height:78px; text-align:left; overflow:none;"> <span style="font:bold 12px Arial, Helvetica, sans-serif; color:#333; margin:0; padding:0;"><a href="#" style="color:#333; text-decoration:none;">Bijou personnalisé : Médaille ronde</a></span>
				  <br />
				  <!-- Ce <br /> sert à passer la description à la ligne après le titre -->
                    Un bracelet original pour un cadeau personnalisé avec un cœur bombé de 2 cm monté</p>
                      <table cellspacing="0" cellpadding="0" style="width:150px;">
                        <tr>
                          <td><div style="display:block; float:left; background:#FFF; border:1px solid #FCC; font:bold 12px Arial, Helvetica, sans-serif; color:#C03; padding:1px 4px 1px 4px; text-align:center;">39,00 €</div></td>
                          <td align="right"><div style="width:74px; height:19px; display:block; background:#D34057; font:8px Arial, Helvetica, sans-serif; color:#FFF;"><a style="color:#FFF;" href="#" title="Commander"><img alt="Commander" title="Commander" src="http://www.maximelebreton.com/forumalsa/commander.png" width="74" height="19" border="0" /></a></div></td>
                        </tr>
                    </table></td>
                </tr>
                <tr>
                  <td height="4"></td>
                </tr>
            </table></td>
          </tr>
        </table>

Tu peux copier le code et le coller dans une page html pour voir le rendu, mes liens image sont en dur.

J'espère t'avoir aidé !