it-swarm.com.de

HTML-E-Mail für Google Mail gestalten

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>

Bei der Anzeige in Google Mail scheinen alle Stile im internen Stylesheet ignoriert zu werden. 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 Möglichkeit, HTML-E-Mails zu gestalten, wenn sie mit Google Mail angezeigt werden?

83
Dónal

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

61
substate

Google Mail hat grundlegende Unterstützung für Style-Tags im Kopfbereich gestartet. Nichts offizielles gefunden, aber Sie können es leicht selbst versuchen.
Es scheint Klassen- und ID-Selektoren zu ignorieren, aber grundlegende Elementselektoren 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 E-Mail-Text enthält

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

Die Antworten hier sind seit heute, dem 30. September 2016, veraltet. Google Mail ist derzeit Roll-Out-Support für den Tag style in der Variable head sowie für Medienanfragen. Wenn Google Mail Ihre einzige Sorge ist, können Sie Klassen wie einen modernen Entwickler verwenden!

Als Referenz können Sie die OFFIZIELLE GMAIL CSS-DOKUMENTE überprüfen.

Nebenbei bemerkt war Google Mail der einzige große Client, der style ( reference nicht unterstützte, bis sie trotzdem aktualisiert wurden). Das heißt, Sie können fast sicher aufhören, Styles inline zu setzen. Einige der obskureren Clients benötigen sie möglicherweise noch. 

11
Matthew Johnson

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

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

Image showing how to do this in Mandrill

2
Mark Amery

Ich stimme jedem zu, der Klassen UND Inline-Styles unterstützt. Möglicherweise haben Sie dies inzwischen bereits gelernt. Wenn jedoch in Ihrem Stylesheet ein einziger Fehler auftritt, wird dies von Gmail ignoriert.

Sie denken vielleicht, dass Ihr CSS perfekt ist, weil Sie es so oft gemacht haben. Warum sollte ich CSS-Fehler haben? Führen Sie es durch den CSS-Validator (zum Beispiel http://www.css-validator.org/ ) und sehen Sie, was passiert. Ich tat das, nachdem ich einige Probleme mit der Anzeige von Google Mail hatte. Zu meiner Überraschung zeigten sich einige Microsoft Outlook-spezifische Stildeklarationen als Fehler.

Was für mich Sinn machte, also entfernte ich sie aus dem Stylesheet und legte sie wie folgt in einen only for Microsoft-Codeblock:

<!--[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.

1
Shawn Spencer

Wie andere schon gesagt haben, werden einige E-Mail-Programme die CSS-Stile nicht lesen. Wenn Sie bereits eine Web-E-Mail geschrieben haben, können Sie das folgende Tool von zurb verwenden, um alle Ihre Stile zu integrieren:

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

Dies ist äußerst hilfreich, wenn Sie Vorlagen wie die oben genannten von Mailchimp, Kampagnenmonitor usw. verwenden, da diese in einigen E-Mail-Programmen nicht funktionieren. Dieses Tool hinterlässt den Style-Bereich für die E-Mail-Programme, die es lesen werden, und setzt alle Styles inline, um die Lesbarkeit in dem gewünschten Format zu verbessern.

0
Chad Dupuis