Site avec newsletter : gabarit mail pour outlook

Nouveau WRInaute
Bonsoir,
Voila, j'ai réalisé un site avec un module de news, envoie, tracking etc...

J'ai presque tout fini, le dernier souci (raison d'une pendaison prochaine) c'est cette m**** d'outlook
déjà j'aimerai soulevé la question non productive : Pourquoi Outlook ? (oui oui je ne vois toujours pas pourquoi régresser dans le au fil des mise à jour... m'enfin).

Bon je dérive un peu.

Voila, j'ai mon joli mail calé en tableau au pixel près qui s'afiche très très bien sur thunderbird, mail(de mac), outlook pour mac, entourage, et même hotmail.

Mais voila, grand malheur pour moi, la cliente est sur outlook 2010 sur pc... donc j'ai testé sur mon pc se cher outlook et là c'est le drame.

Code:
<p><style type="text/css">
			body{
				margin:0px;
				padding:0px;
				background-color:#0b0101;
				color:#FFFFFF;
				font-size:11px;
				font-family:Arial, sans-serif;
			}
			#content{
				background-color:#504134;
			}
			a{
				color:#DE5801;
				text-decoration:none;
			}
			#footer{
				background-image:url('http://www.mon_domaine.com/images/newsletter/foot.jpg');
				background-repeat:no-repeat;
			}
			h1{
				font-size:15px !important;
				font-weight:bold !important;
				color:#DE5801 !important;
			}
			h2{
				font-size:12px !important;
				font-weight:bold !important;
				color:#DE5801 !important;
			}
			h3{
				font-size:14px !important;
				font-weight:bold !important;
				color:#FFFFFF !important;
			}
			p{
				font-size:11px !important;
			}
			div{
				font-size:11px !important;
			}
		</style></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100% !important; max-width:499px !important;">
    <tbody>
        <tr>
            <td align="center" style="background-color:#0b0101;">
            <table width="499px" border="0" cellspacing="0" cellpadding="0" style="width:499px !important; max-width:499px !important;">
                <tbody>
                    <tr>
                        <td align="center"><a href="http://www.mon_domaine.com/?userid=[USERID]"><img width="499px" height="115px" alt="mon alt" title="mon titre" src="http://www.mon_domaine.com/images/newsletter/head.jpg" /></a></td>
                    </tr>
                    <tr>
                        <td height="8px">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="content">
                        <table width="499px" border="0" cellspacing="0" cellpadding="0" style="width:499px !important; max-width:499px !important;">
                            <tbody>
                                <tr>
                                    <td width="15px">&nbsp;</td>
                                    <td width="469px" style="width:469px !important;">&nbsp;</td>
                                    <td width="15px">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="15px">&nbsp;</td>
                                    <td width="469px" style="width:469px !important;">
                                    <div style="width:469px !important;">[CONTENT]</div>
                                    </td>
                                    <td width="15px">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="15px">&nbsp;</td>
                                    <td width="469px" style="width:469px !important;">&nbsp;</td>
                                    <td width="15px">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="8px">&nbsp;</td>
                    </tr>
                    <tr>
                        <td id="footer">
                        <table width="499px" border="0" cellspacing="0" cellpadding="0" style="width:499px !important; max-width:499px !important;">
                            <tbody>
                                <tr>
                                    <td height="5px" width="15px">&nbsp;</td>
                                    <td height="5px" width="269px">&nbsp;</td>
                                    <td height="5px" width="200px">&nbsp;</td>
                                    <td height="5px" width="15px">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="15px">&nbsp;</td>
                                    <td width="269px" align="left"><a style="font-size:11px;" href="http://www.mon_domaine.com/?userid=[USERID]">www.mon_domaine.com</a></td>
                                    <td width="200px" align="right"><a href="http://www.moon_lien.com/"><img width="15px" height="15px" alt="" src="http://www.mon_domaine.com/images/newsletter/fb.jpg" /></a></td>
                                    <td width="15px">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        <table width="499px" border="0" cellspacing="0" cellpadding="0" style="width:499px !important; max-width:499px !important;">
                            <tbody>
                                <tr>
                                    <td width="299px" align="left" style="font-size:9px;text-align:left !important;">bla bla bla bla bla bla bla bla.<br />
                                    bla bla bla bla bla bla bla bla bla bla bla bla</td>
                                    <td width="200px" align="right" style="font-size:9px;text-align:right !important;">[FOOTER][USERTRACK]</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

Mais mon contenu (remplacé à la place de [CONTENT]) est du text brut... et sur ce cher Outlook 2010 le width est interprété comme du min-width et le contenu est roi... donc il pousse la taille du tableau a la taille maximal du mail...

en gros au lieu d'avoir le tout calé au centre sur une largeur de 499px j'ai le header et le footer à 499px et le centre à 600 ou 700px (en gros la taille de la zone d'affichage du mail) suivant comment est affiché le mail dans outlook...

Alors y'a une solution autre que la corde ???

thx d'avance.
 
Nouveau WRInaute
Oui je sais que mettre tout plein de width partout c'est le mal... mais comment veux tu calé un mail de 500px de large en position center ???
J'ai vu que certain mail (notamment ceux de l'internaute) il on du contenu qui ne dépasse pas mais je ne trouve pas comment il on fait. tout se qu'il on c'est un class="controlwidth" avec aucun style définit pour ça...

Moi tout se que je vois, c'est que mon mail ne doit pas se resize comme une m**** sauf que Outlook 2007-2010...

Pourquoi avoir choisi le moteur de work à la place d'IE ??? déjà que IE ce n'était pas fameux... alors là...

Alors si quelqu'un à la solution de faire en sorte que mon corps de mail ne fasse pas n'imp, j'aimerai bien la solution miracle...

Et une autre question, y'a un listing de la compréhention des style css pour outlook 2011 ?
 
WRInaute discret
et tu devrais expliquer (source GA à l'appui au besoin) qu'Outlook n'est pas forcément une référence en matière de lecteur de mail... beaucoup d'internaute utiliser les webmail et autre service en ligne, les solutions mobiles etc... il faut chercher à optimiser pour l'ensemble des membres et non pas uniquement pour ton client, même si je comprends bien la démarche ;) laisse tomber les CSS, et mets tout le code dans la page directement... à l'ancienne quoi ! avec une structure simple... et une version en ligne c'est important car chez moi par exemple ça génère à peu près 1 clic sur 3 ;)
 
WRInaute accro
Si ça passe sur le 2010, j'aurai tendance à dire que ça passe sur le 2011. Les valeurs de width="" et height="", en tant qu'attribut html, ne doivent pas contenir de mention de type px. Tu mets directement width="500".

+1 pour la version en ligne, avec un lien en header du mail.
 
Discussions similaires
Haut