web-dev-qa-db-fra.com

Formatage des e-mails HTML pour Outlook

J'ai une newsletter html qui fonctionne dans la plupart des clients de messagerie, mais le formatage est foiré dans Outlook.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
  body {
    background-color: #98AFC7;
  } 
</style>
<title></title>
</head>
<body>
<table border="1px solid" cellspacing="0" cellpadding="10px" width="600" style="margin-left: auto; margin-right: auto; height:auto; background-color: #ffffff; margin-top: 60px;">
    <tr>
        <td align="top" style="padding: 10px; font-family: arial; font-size: 12px;" ><center>Email not displaying correctly?<a href="#"><strong> View it in your browser</strong></a></center></td>
    </tr>
    <tr>
        <td style="border: 1px solid; height: 80px; text-align: center; padding: 10px;"><img src="http://demo.frostmiller.com/email/img/banner.jpg" alt="Banner will go here" align="middle" style="border: 1px solid;"></td>
    </tr>
    <tr>
        <td>
            <table style="border: 0; cellspacing: 0; cellpadding: 10px; height: auto;">
                <tr>
                    <td valign="baseline" style="padding: 10px; width:400px; border: 1px solid; halign: top;">
                    <h3>Top Stories</h3> 
                        <ul>
                            <li>Topic 1</li>
                            <li>Topic 2</li>
                            <li>Topic 3</li>
                        </ul>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td valign="baseline" style="padding: 10px; border: 1px solid;">
                        <h3>Latest News</h3>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,  
                        </p>
                    </td>
                </tr>
            </table>                
        </td>
    </tr>
    <tr>
        <td cellpadding="10px" style="border: 1px solid; cellspacing: 0;  width: 100%; height: auto; text-align: center;">
            <strong>Copyright &copy 2011 Frost Miller Group </strong>
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid; cellspacing: 0; cellpadding: 10px; width: 100%; height: auto">
            <center>
            <a href="#">Contact Us</a>
            &nbsp;
            <a href="#">Terms of Use</a>
            &nbsp;
            <a href="#">Trademarks</a>
            &nbsp;
            <a href="#">Privacy Statement</a>
            &nbsp;
            <a href="#">Site Feedback</a>
            </center>
        </td>
    </tr>
    </table>
</body>
</html>

Quelles modifications dois-je apporter pour qu'il s'affiche correctement dans Outlook?

htmlcssoutlook
30
user544079

Pour pouvoir vous donner spécifique aide, vous devez expliquer quelles parties particulières spécifiquement "se foutre en l'air", ou peut-être offrir une capture d'écran. Il est également utile de savoir dans quelle version d'Outlook vous rencontrez le problème.

Quoi qu'il en soit, le guide CSS de CampaignMonitor.com m'a souvent aidé à déboguer les incohérences du client de messagerie.

À partir de ce guide, vous pouvez voir plusieurs choses qui ne fonctionnent pas bien ou pas du tout dans Outlook , voici quelques faits saillants des plus importants:

  • Différents types de sélecteurs plus sophistiqués , par ex. E:first-child, E:hover, E > F (Combinateur enfant), E + F (Combinateur frère adjacent), E ~ F (Combinateur général de frères et sœurs). Cela signifie malheureusement recourir à des solutions de contournement comme les styles en ligne.
  • Certaines propriétés de police, par exemple white-space ne fonctionnera pas.
  • Le background-image la propriété ne fonctionnera pas.
  • Il y a plusieurs problèmes avec les propriétés du modèle de boîte, notamment height, width et max- les versions ne sont pas utilisables ou comportent des bogues pour certains éléments.
  • Problèmes de positionnement et d'affichage (par exemple display, floats et position sont tous éliminés).

En bref: combiner CSS et Outlook peut être pénible . Soyez prêt à utiliser de nombreuses solutions de contournement laides.

PS. Dans votre cas spécifique, il y a deux problèmes mineurs dans votre html qui peuvent vous causer un comportement étrange. Il y a "align=top "où vous vouliez probablement utiliser vertical-align. Également: cell-padding pour tds n'existe pas.

44
Jeroen

Vous devriez certainement consulter le MSDN sur ce qu'Outlook prendra en charge en ce qui concerne le CSS et le HTML. Le lien est ici: http://msdn.Microsoft.com/en-us/library/aa338201 (v = office.12) .aspx . Si vous n'avez pas au moins Office 2007, vous devez vraiment mettre à niveau car il existe des différences majeures entre 2007 et les éditions précédentes. Essayez également d'enregistrer l'e-mail résultant dans un fichier et examinez-le avec Firefox, vous verrez ce qui est modifié par Outlook et vous aurez peut-être une question plus spécifique à poser. Vous pouvez également utiliser Word pour afficher l'e-mail comme une sorte d'aperçu (mais vous n'obtiendrez pas d'informations sur les styles qui sont/ne sont pas appliqués).

15
scrappedcola

J'ai utilisé un formatage basé sur VML (Vector Markup Language) dans mon modèle de courrier électronique. En VML, vous avez écrit votre code dans le commentaire J'ai pris l'aide de ce site.

https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design#supporttable

1
Arsh Khan