Site avec newsletter : gabarit mail pour outlook

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par hiroshi, 17 Octobre 2011.

Tags:
  1. hiroshi
    hiroshi Nouveau WRInaute
    Inscrit:
    30 Mai 2011
    Messages:
    14
    J'aime reçus:
    0
    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.
     
  2. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 885
    J'aime reçus:
    73
    Mettre px dans les attributs height et width c'est bad.

    Pour le reste : http://www.campaignmonitor.com/css/

    A ta place, j'oublierais complètement le css. ET je me limiterais au maximum aux attributs HTML.
     
  3. hiroshi
    hiroshi Nouveau WRInaute
    Inscrit:
    30 Mai 2011
    Messages:
    14
    J'aime reçus:
    0
    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 ?
     
  4. soldiez
    soldiez WRInaute discret
    Inscrit:
    7 Février 2009
    Messages:
    191
    J'aime reçus:
    0
    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 ;)
     
  5. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 885
    J'aime reçus:
    73
    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.
     
Chargement...
Similar Threads - newsletter gabarit mail Forum Date
envoi de newsletter avec les adresse en copie Droit du web (juridique, fiscalité...) 12 Janvier 2020
Newsletter Google Débuter en référencement 19 Juillet 2018
Connaissez-vous un bon script de newsletter ? Administration d'un site Web 10 Mai 2016
Script newsletter . lequel choisir ? Développement d'un site Web ou d'une appli mobile 17 Novembre 2015
[Inscription Newsletter] Connaitre page d'origine Google Analytics 17 Août 2015
Pop up newsletter et incidence référencement Crawl et indexation Google, sitemaps 20 Juin 2015
Envoyer 5 000 newsletters par mois, quel outil ou service utiliser ? Développement d'un site Web ou d'une appli mobile 3 Avril 2015
Monétiser via ma newsletter Monétisation d'un site web 11 Mars 2015
Désinscription d'une newsletter en un seul clic ? Droit du web (juridique, fiscalité...) 4 Mars 2015
Tracker inscription à ma newsletter Google Analytics 1 Décembre 2014
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice