Styling von HTML-E-Mails für Google Mail

99

Ich generiere eine HTML-E-Mail, die ein internes Stylesheet verwendet, d. H.

<!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 anscheinend alle Stile im internen Stylesheet ignoriert. Es scheint, dass Google Mail alle Stile außer Inline-Regeln ignoriert, z

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

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

— Dónal
quelle

14

Ja, dies ist die einzige, da viele webbasierte E-Mail-Clients interne Stylesheets nicht erkennen. Tatsächlich ist das Inline-Styling die empfohlene Methode zum Entwerfen von HTML-Newslettern.

— Mike

Soweit ich weiß, wird von E-Mail-Lesern erwartet, dass sie HTML 3.2 und CSS 1.1 unterstützen.

Wie haben Sie Ihre E-Mail generiert? Ich meine, wenn Sie den Code zum Erstellen der Absicht hinzufügen?

— RaphMclee

7

Es ist im Allgemeinen eine gute Praxis, ein Eröffnungs- <html>Tag zu verwenden;)

— Zaz

1

Google Mail ist scheiße. iOS App und Web Based App auch!

— Adrian Florescu

19

Die Antworten hier sind zum heutigen 30. September 2016 veraltet. Google Mail bietet derzeit Unterstützung für das styleTag in headsowie Medienabfragen an. Wenn Google Mail Ihr einziges Anliegen ist, können Sie sicher Klassen wie einen modernen Entwickler verwenden!

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

Nebenbei bemerkt war Google Mail der einzige große Client, der nicht unterstützt wurde style( Referenz , bis sie trotzdem aktualisiert werden). Das bedeutet, dass Sie fast sicher aufhören können, Stile inline zu setzen. Einige der dunkeleren Clients benötigen sie möglicherweise noch.

— Matthew Johnson
quelle

1

Es sieht so aus, als ob es immer noch nicht funktioniert. Wir haben es in Lackmus versucht, aber es funktioniert nicht. Gibt es einen besonderen Grund?

— Arian

@ArianHosseinzadeh Was funktioniert nicht? Es wurde ein Verweis auf ihre Dokumentation zu diesem Thema hinzugefügt.

— Matthew Johnson

Wir haben es in Lackmus versucht und es ignoriert die Nicht-Inline-Stile. Haben Sie <style> für Google Mail ausprobiert, nachdem sie es angekündigt haben? hat es funktioniert ?

— Arian

1

@ArianHosseinzadeh Ich habe ein Copy-n-Paste aus ihrem Beispiel in ihren Dokumenten erstellt und es über Putsmail ausgeführt . Stile werden in Google Mail angezeigt. Ich habe die Android-Google Mail-App und Google Mail in einem Chrome-Browser überprüft. Ich vermute, dass die Lackmus-Vorschau nicht aktualisiert wurde, um die Änderung widerzuspiegeln.

— Matthew Johnson

1

Ich fragte mich, warum meine Stile nicht funktionierten, und stellte fest, dass ich sie innerhalb des bodyTags anstelle des headTags platziert hatte.

— Palswim

67

Verwenden Sie Inline-Stile für alles. Diese Site konvertiert Ihre Klassen in Inline-Stile: http://premailer.dialect.ca/

— Unterzustand
quelle

2

Diese Seite ist großartig. Zeigt Warnungen an und gibt Ihnen eine Nur-Text-Ausgabe sowie die Neuerstellung Ihres HTML-Codes.

— Jamesbar2

1

Dieser Premailer befindet sich in Ruby, Quelle: github.com/premailer/premailer . Es gibt noch eine andere in Python: premailer.io Quelle: github.com/peterbe/premailer , beide sind Open Source.

— Maxime R.

1

Diese Antwort ist nicht mehr korrekt. Google Mail unterstützt Stile und Klassen und verfügt über offizielle Dokumente zu diesem Thema - siehe Matthew Johnsons Antwort unten.

— Mikemaccana

12

Google Mail hat die grundlegende Unterstützung für Stil-Tags im Kopfbereich gestartet. Es wurde noch nichts offizielles gefunden, aber Sie können es einfach selbst ausprobieren.
Es scheint Klassen- und ID-Selektoren zu ignorieren, aber grundlegende Element-Selektoren funktionieren.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

Es wird ein Style-Tag in seinem eigenen Kopfbereich erstellt, der auf das Div beschränkt ist, das den Mail-Body enthält

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— fuchs777
quelle

Es werden jedoch immer noch keine Medienabfragen unterstützt, was etwas schade ist. Klassen und IDs sind auch irgendwie nützlich :)

— Eoin

2

Sie führen jetzt auch Medienabfragen durch und unterstützen das CSS-Styling umfassender. stackoverflow.com/questions/39759764/…

— Crowmagnumb

7

Ich stimme allen zu, die Klassen UND Inline-Stile unterstützen. Möglicherweise haben Sie dies bereits gelernt, aber wenn Ihr Stylesheet einen einzelnen Fehler enthält, wird er von Google Mail ignoriert.

Sie denken vielleicht, dass Ihr CSS perfekt ist, weil Sie es so oft gemacht haben. Warum sollte ich Fehler in meinem CSS haben? Führen Sie es durch den CSS-Validator (z. B. http://www.css-validator.org/). ) und sehen Sie, was passiert. Ich habe dies getan, nachdem einige Probleme mit der Google Mail-Anzeige aufgetreten waren, und zu meiner Überraschung wurden mehrere Microsoft Outlook-spezifische Stildeklarationen als Fehler angezeigt.

Was für mich Sinn machte, also entfernte ich sie aus dem Stylesheet und fügte sie only for Microsoftwie folgt in einen Codeblock ein:

<!--[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 irgendwann als nützlich erweisen.

— Shawn Spencer
quelle

Vielen Dank, der Teil über ungültiges CSS hat mir viel Zeit gespart. Wenn Sie noch da sind, lassen Sie es mich bitte wissen.

— Schatten-Assistent ist Ohr für Sie

1

Hey @ShadowWizard. Ich war eine Weile weg, bin aber zurück. Ich bin froh, dass es dir Zeit gespart hat.

— Shawn Spencer

Prost, wollte nur sicherstellen, dass das Kopfgeld nicht verschwendet wird. :-)

— Shadow Wizard ist Ear For You

2

Wie andere gesagt haben, lesen einige E-Mail-Programme die CSS-Stile nicht. Wenn Sie bereits eine Web-E-Mail geschrieben haben, können Sie mit dem folgenden Tool von zurb alle Ihre Stile einbinden:

http://zurb.com/ink/inliner.php

Dies ist äußerst praktisch, wenn Sie Vorlagen wie die oben genannten von Mailchimp, Kampagnenmonitor usw. verwenden, da diese, wie Sie festgestellt haben, in einigen E-Mail-Programmen nicht funktionieren. Dieses Tool belässt Ihren Stilabschnitt für die Mail-Programme, die ihn lesen, und fügt alle Stile inline ein, um eine universellere Lesbarkeit in dem gewünschten Format zu erzielen.

— Chad Dupuis
quelle

Vielen Dank für den Inliner-Link.

— Shawn Spencer

2

Beachten Sie, dass Dienste und Tools zum Senden von E-Mails möglicherweise Ihr CSS für Sie einbinden können, sodass CSS aktiviert wird <style> Tags in Google Mail funktionieren kann.

Wenn Sie beispielsweise E-Mails mit MailChimp senden, wird Ihr CSS von <style>Tags standardmäßig automatisch eingefügt. Mit Mandrill können Sie diese Funktion aktivieren (obwohl sie aus Leistungsgründen standardmäßig deaktiviert ist ), indem Sie das Kontrollkästchen "Inline-CSS-Stile in HTML-E-Mails" im Abschnitt " Standardeinstellungen senden" der Registerkarte "Einstellungen" aktivieren:

Bild zeigt, wie das in Mandrill geht

— Mark Amery
quelle

0

Ich hatte das gleiche Problem beim Entwerfen einer Vorlage in Mailjet. Die Lösung des Problems war minimierter CSS-Code in <style>Tags.

— Vojtěch Remiš
quelle