CSS-E-Mail-Vorlage in Outlook wird nicht korrekt angezeigt

Question 1

Ich versuche, eine HTML-CSS-E-Mail-Vorlage zu erstellen, die auf allen E-Mail-Clients funktioniert. Ich schaffe es, ein einfaches hochzukriegen. Die Vorlage wird in Google Mail und Hotmail korrekt angezeigt, aber in Outlook ist alles falsch ausgerichtet. Ich weiß, dass Outlook Words verwendet, um die Vorlage zu rendern. Wie codiere ich, um es zu umgehen? Ich möchte es auch responsiv machen. Ich weiß nicht, wo ich mit dem Debuggen beginnen soll. Ich bin wirklich neu in der Programmierung von responsiven E-Mail-Vorlagen für E-Mail-Clients. Ich habe versucht, mein CSS zu inline, aber es funktioniert nicht. Ich habe versucht, Lackmus zu verwenden, um die E-Mail zu versenden, es funktioniert nicht so gut. Ich habe meinen Code in JSFiddle eingefügt, können Gurus da draußen bitte helfen. Ich brauche wirklich etwas Hilfe.

CODE

https://jsfiddle.net/hansheung/yjk309e4/2/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    Margin: 0!important;
    padding: 15px;
    background-color: #FFF;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
}

table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #727f80;
}
.outer-table {
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
    background-color: #FFF;
}
td {
    padding: 0;
}
.header {
    background-color: #C2C1C1;
    border-bottom: 3px solid #FF8800;
}
p {
    Margin:0;
}
.header p {
   text-align: center;
   padding: 1%;
   font-weight: 500;
   font-size: 11px;
   text-transform: uppercase;
}
a {
   color: #F1F1F1;
   text-decoration: none;
}

/*--- Start Two Column Sections --*/
.two-column {
    text-align: center;
    font-size: 0;
    padding: 5px 0 10px 0;
}

img {
   border: 0;
}

/*--- Start Outer Table Banner Image, Text & Button --*/
.image img {
    width: 100%;
    max-width: 670px;
    height: auto;
}
.main-table {
    width: 100%;
    max-width: 610px;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 6px;  
}
.one-column .inner-td {
   font-size: 16px;
   line-height: 20px;
   text-align: justify;
}
.inner-td {
    padding: 10px;
}


.footer {
    width: 100%;
    margin: 0 auto;
    background-color: #053D66;
    padding: 4% 2%; 
}

/*--- Media Queries --*/
@media screen and (max-width: 400px) {
    .h1 {
        font-size: 22px;
    }
    .two-column .column, .three-column .column {
        max-width: 100%!important;
    }
    .two-column img {
        width: 100%!important; 
    }
}

@media screen and (min-width: 401px) and (max-width: 400px) {

    .two-column .column {
        max-width: 50%!important;
    }
}

.section {
    width: 50%;
    text-align: center;
}
.m1{
    margin: 1%;
}
.p1{
    padding: 2%;
}
.contact-details{
    text-align: left;
}

.text{
    font-family: "Helvetica","sans-serif";
    padding: 50px 0px !important;
    line-height: 150%;
    color:#202020;
    font-size: 18px;
    text-align:inherit
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}

.image-right{
   text-align: right;
   padding-right: 2%;
}


</style>
</head>

   <body>
<div class="wrapper">
    <table class="outer-table">
        <tr>
            <td class="image">
                <img src="http://www.talent-trust.com/documents/News2020.03/covid19-ttc_header.jpg" alt="">
            </td>
        </tr>
    </table><!--End Banner Image-->
    <table class="outer-table">
        <tr>
            <td class="image">
                <img src="http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg" alt="">
            </td>
        </tr>
    </table><!--End Banner Image-->
    <table class="main-table">
        <tr>
            <td class="one-column">
                <table width="100%">
                    <tr>
                        <td class="inner-td">
                            <p class="text"> 
                                As you are aware China has been experiencing an<a href="https://talent-trust.com/documents/News2020.03/en.html"><span style="color:#FF7F30">Read More</span></a>
                            </p>
                            <!-- <p class="button-holder-center">
                                <a href="" class="btn">Learn More</a>
                            </p> -->
                        </td>
                    </tr>
                </table>
            </td>
        </tr><!--End heading paragraph and button section-->

    </table><!--End of main table-->
    <table class="footer">
        <tbody>
            <tr>
                <td class="section image-right">
                    <img width="35%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">        
                </td>
                <td class="section">
                    <div class="contact-details">
                        <p style="margin-bottom: 0;color:#ffffff;font-size: 11pt; padding-left: 5%;">Email: <a href="mailto:[email protected]">[email protected]</a></p>
                        <p style="margin-top: 0;color:#ffffff;font-size: 9pt;padding-left: 5%">Tel:+604-899-8945</p>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
            <td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
            </tr>
        </tbody>
    </table>
</div><!--End Wrapper-->
</body>
</html>

Anzeige in GMAIL OK

Alles falsch ausgerichtet in Outlook

Question 2

Dinge, die nicht funktionieren oder nicht funktionieren, wenn clientübergreifendes Rendering die Geschäftsanforderung ist (basierend auf Ihrem Codeausschnitt).

html5
Medien-Anfragen

Bindungsstile mit Klassen und IDs (alles sollte inliniert sein – mit einem programmatischen Tool oder von Hand codiert)
CSS-Paddings (eingeschränkte Unterstützung)
CSS-Ränder (eingeschränkte Unterstützung)

Absätze
max-width CSS-Regel

Wenn Sie eine clientübergreifende Vorlage wünschen, befolgen Sie diese Richtlinien. Das ist ungefähr aus der Spitze meines Kopfes, da ich vor ein paar Jahren professionell E-Mails codiert habe, aber ich habe keine “harten” Tests oder Links, um all dies zu untermauern.

Verwenden Sie HTML 4.01 doctype und seine Regeln.
Responsive (RWD) E-Mails sind wirklich fortschrittliche Sachen der nächsten Stufe. Ich würde das nicht empfehlen, bis Sie wirklich verstehen, was in Rendering-Engines vor sich geht (viele Tests). Bleiben Sie vorerst beim Fluid-Layout, das mit der hier erläuterten Tabellenstruktur erreicht werden kann. Auch Media-Queries funktionieren nicht clientübergreifend, ich würde sie fallen lassen.
Ränder, Polster haben gemischte Unterstützung, verwenden Sie sie nur auf td Elemente und verdoppeln Sie immer mit Cellpadding, wenn Sie können.

Vermeiden Sie abgekürzte CSS-Deklarationen. Anstatt borderbenutzen border-width, border-style, border-color. Die Breite sollte immer zuerst gehen.
Verwenden Sie keine Absätze (p Tags), Hebelwirkung td‘s in vollen Zügen, indem Sie Cellpadding und Cellspacing verwenden, die überall funktionieren.
Das Ausrichten von Inhalten (Text, Bilder) ist am einfachsten mit align und valign Attribute an td Stichworte. Bei richtiger Anwendung kann es beim Codieren von Layouts enorm helfen.

Sie können verwenden dieser CSS-Leitfaden und Kann ich eine E-Mail senden für die schnelle Faktenprüfung, wie von @cloned erwähnt (zu meiner Zeit gab es keine Can I E-Mail).
Versetzen Sie sich in die Denkweise: Wir schreiben das Jahr 1994 und alles, was Ihnen zur Verfügung steht, sind Tabellen (viele davon), Bilder, Standardschriftartenund Inline-CSS 🙂 Damit kann man viel erreichen.
Firefox war für mich während der Entwicklung hilfreich, da seine Rendering-Engine nahe an der Ausgabe von Thunderbird auf dem Bildschirm liegt.

Wenn Sie eine benutzerdefinierte Schriftart oder ein animiertes GIF oder ein interessantes Reaktionsverhalten einschleichen können, ist das großartig, aber verlassen Sie sich nicht darauf. Es wird definitiv keine Cross-E-Mail-Client-Erfahrung sein, und die Kunden/Manager, für die Sie arbeiten (falls vorhanden), sollten sich dessen bewusst sein. Das ist “progressive Verstärkung” für E-Mail-Rendering 🙂
Die meisten E-Mail-Clients werden schreckliche Dinge mit Ihrer Vorlage anstellen, wie z. B. Ihren Code bis zur Unkenntlichkeit verstümmeln, benutzerdefinierte IDs hinzufügen, Klassennamen überschreiben, eigene benutzerdefinierte Stile oder benutzerdefinierte Klassen hinzufügen, den gesamten Head-Bereich entfernen usw. Ein Teil davon hat mit Sicherheit zu tun, ein anderer Teil mit Rendering-Engine. Aus diesem Grund sollten Sie sich die meiste Zeit auf Tabellen und Inline-Styling verlassen und behalten, was in der ist head auf das absolute Minimum, von dem Sie wissen, dass es in den Programmen (E-Mail-Clients) funktioniert, auf die Sie abzielen.

Kurz gesagt, dies ist ein wirklich tiefgründiges Thema, das Sie verstehen werden, wenn Sie Erfahrung mit dem Testen von Ergebnissen und dem Anpassen Ihres Codes sammeln. Sie sollten in das Testen von Vorschausoftware investieren (Sie haben Lackmus erwähnt). Ich habe Email on Acid verwendet, was ebenfalls großartig ist. Sie sollten es verwenden, um Ergebnisse in verschiedenen E-Mail-Clients anzuzeigen, nicht um Ihre Kampagnen/E-Mails zu versenden.

Am wichtigsten:

Wenn Sie Ihren Code ändern, testen Sie ihn sofort (Litmus/Email on Acid), um einen Einblick zu erhalten, wie er in jedem E-Mail-Client gerendert wird. Das ist mühsam und braucht Zeit, aber nach ein paar Mal werden Sie genau wissen, was Sie tun können und was das Ergebnis sein wird. Isolieren Sie, was Sie testen, und tun Sie es oft.

Zweitwichtigste:

Definieren Sie, auf welchen Pool von E-Mail-Clients Sie abzielen. Dies sollte in Absprache mit Ihrem Kunden/Manager erfolgen (falls vorhanden). Sie haben geschrieben, dass Sie eine Vorlage wünschen, die in “allen E-Mail-Clients” funktioniert. Das ist einfach nicht realistisch. Es gibt zu viele von ihnen.

Ich habe in mehr als 60 Konfigurationen getestet, als ich ein neues Template programmiert habe. Das sind mehr als 60 Screenshots, die für jeden Test überprüft werden müssen. Sie müssen sich auf einen Pool beschränken, der “gut genug” ist und vernünftigerweise getestet werden kann. Dies sollte anhand der Statistiken der Abonnentenliste und der sichtbaren E-Mail-Adressen überprüft werden, die von Newsletter-Abonnenten verwendet werden.

Beispiel: Wenn 50 % der Abonnenten Outlook 2007 und der Rest Gmail verwenden, wissen Sie, dass Sie diese beiden Clients anvisieren und testen müssen. Der Rest ist nur “ein Bonus”. Natürlich wissen Sie das nicht immer, also sollten Sie auch die beliebtesten Kunden einbeziehen. Verwenden Sie öffentliche Statistiken, die von Lackmus oder jemand anderem bereitgestellt werden, um festzustellen, was zu diesem Zeitpunkt „beliebt“ ist.

Eine andere Sache ist, dass Sie möglicherweise bestimmte webbasierte E-Mail-Clients in Bezug auf das geografische Gebiet in Ihre Tests einschließen müssen oder nicht müssen, z. B. gmx.de oder onet.pl usw. Die meisten von ihnen haben ihre eigenen Rendering-Engines, die in Haus. Einige von ihnen haben sogar spezielle Regeln, die für Newsletter gelten, die sie an ihre Benutzer senden. In diesem Fall sollten Sie in der Lage sein, eine schriftliche Dokumentation zu erhalten, wie der Newsletter vorbereitet werden sollte (spezielle Tags, Formatierung usw.).

Denken Sie auch an obskurere E-Mail-Clients, was ist, wenn jemand Kindle oder Apple Watch zum Lesen von E-Mails verwendet? Was sollen sie sehen? Einige dieser Clients verwenden eine “Nur-Text”-Version eines Newsletters, daher sollten Sie auch eine Nur-Text-Version vorbereiten, wenn die HTML-Version nicht angezeigt werden kann oder ein Benutzer HTML ausdrücklich blockiert und nur Text anfordert.

Question 3

Ich vermute, Sie müssen eine Wrapping-Tabelle für Outlook hinzufügen und den Code inline.

Fügen Sie zuerst den Code ein: https://inliner.cm/

Zweitens fügen Sie diesen Wrapper überall dort hinzu, wo Sie ihn verwenden max-width (in Outlook nicht unterstützt). Möglicherweise möchten Sie den Code umstrukturieren, sodass Sie dies nur einmal tun müssen:

<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<!--[if (gte mso 9)|(IE)]>
  <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;">
    <tr>
      <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
      <![endif]-->
      <table ...>
      ...
      </table>
      <!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
  </table>
<![endif]-->
</center>