wiederherstellen - HTML-E-Mail für Google Mail formatieren




google mail klassische ansicht (4)

Beachten Sie, dass Dienste und Tools zum Senden von E-Mails in der Lage sein können, Ihr CSS für Sie einzubinden, sodass CSS in <style> -Tags in Google Mail funktionieren kann.

Wenn Sie zum Beispiel E-Mails mit MailChimp versenden, wird Ihr CSS von <style> -Tags standardmäßig automatisch inline angezeigt. Mit Mandrill können Sie diese Funktionalität aktivieren (obwohl sie aus Leistungsgründen standardmäßig deaktiviert ist), indem Sie das Kontrollkästchen "CSS-Stile in HTML-E-Mails einfügen" im Abschnitt "Standardeinstellungen" der Registerkarte "Einstellungen" aktivieren:

Ich erstelle eine HTML-E-Mail, die ein internes Stylesheet verwendet, dh

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

In Google Mail werden alle Stile im internen Stylesheet ignoriert. Es scheint, dass Gmail alle Formate außer Inline-Regeln ignoriert, z

 <h2 style="color: red">Email content here</foo>

Ist dies meine einzige Option zum Formatieren von HTML-E-Mails, wenn sie in Google Mail angezeigt werden?


Die Antworten hier sind ab dem 30. September 2016 veraltet. Gmail führt derzeit Unterstützung für das style Tag im head sowie Medienabfragen ein. Wenn Google Mail Ihre einzige Sorge ist, können Sie Klassen wie einen modernen Entwickler verwenden!

Als Referenz können Sie die offiziellen Google Mail-CSS-Dokumente überprüfen.

Als eine Nebenbemerkung war Gmail der einzige Haupt-Client, der den style nicht unterstützte ( reference , bis sie sowieso aktualisiert wurden). Das bedeutet, dass Sie fast sicher aufhören können, Stile inline zu setzen. Einige der obskureren Clients benötigen sie möglicherweise noch.


Ich stimme allen zu, die Klassen und Inline-Stile unterstützen. Sie haben das vielleicht schon gelernt, aber wenn es in Ihrem Stylesheet einen einzigen Fehler gibt, ignoriert Gmail es.

Du denkst vielleicht, dass dein CSS perfekt ist, weil du es so oft gemacht hast, warum hätte ich Fehler in meinem CSS? Führen Sie es durch den CSS-Validator (zum Beispiel http://www.css-validator.org/ ) und sehen Sie, was passiert. Ich habe das getan, nachdem ich auf einige Probleme mit der Anzeige von Google Mail gestoßen war. Zu meiner Überraschung tauchten einige spezielle Microsoft Outlook-Style-Deklarationen als Fehler auf.

Was für mich einen Sinn ergab, so entfernte ich sie aus dem Stylesheet und legte sie in einen only for Microsoft -Codeblock, so:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

Dies ist nur ein einfaches Beispiel, aber wer weiß, es könnte sich als nützlich erweisen.








html-email