🥇 ▷ Entwickeln von HTML-E-Mails für Gmail: 14 Tipps zum Codieren ✅

Hinweis: Der folgende Artikel hilft Ihnen weiter: Entwickeln von HTML-E-Mails für Gmail: 14 Tipps zum Codieren

Während Outlook wegen seiner Launen am meisten kritisiert wird, gibt es bei Gmail eine Reihe von Problemen, die HTML-E-Mail-Entwicklern Kopfzerbrechen bereiten.

Gmail ist eine der beliebtesten E-Mail-Plattformen der Welt über 1,8 Milliarden Nutzer. Es ist auch der zweitbeliebteste E-Mail-Client 28 % des Weltmarktanteils. Schauen Sie sich Ihre E-Mail-Analyse an und sehen Sie, wie viel Prozent der Adressen von Gmail stammen (das ist wahrscheinlich eine Menge). Wenn Ihre HTML-E-Mail in Gmail nicht richtig angezeigt wird, entgehen Ihnen möglicherweise wichtige Leads und Einnahmen.

Allerdings kann es schwierig sein, dafür zu sorgen, dass Ihre HTML-E-Mails in Gmail-Clients gut aussehen. Wenn Sie daran denken, Ihre E-Mails zu testen, können Sie einige dieser Probleme erkennen. Wenn Sie jedoch mit dem richtigen Code und etwas Wissen über Gmail-spezifische Probleme beginnen, können Sie stundenlange Fehlerbehebungen vermeiden.

Beim Codieren für Gmail-Benutzer gibt es einige Dinge zu beachten

Springen Sie zu einem Abschnitt, um mehr zu erfahren:

1. Gmail hat mehrere E-Mail-Clients

Obwohl Gmail seine Benutzeroberfläche im Laufe der Jahre vereinfacht hat, gibt es immer noch verschiedene E-Mail-Clients verschiedene Ebenen der CSS-Unterstützung und andere skurrile Variationen beim Rendern von HTML-E-Mails.

Gmail-Webmail für den Desktop
Gmail-Webmail für Mobilgeräte
Gmail für iOS
Gmail für Android
(Es gibt keine eigenständige Desktop-Version)

Am problematischsten ist der Android-Client von Gmail, wenn er für den POP/IMAP-Zugriff konfiguriert ist (siehe Tipp Nr. 2), aber auch die Probleme von Gmail mit dem Dunkelmodus in iOS sind ein großes Problem (siehe Tipp Nr. 14).

2. Gmail-Apps für Nicht-Gmail-Konten (GANGA) unterstützen keine eingebetteten Stile

Sowohl Android- als auch iOS-Gmail-Apps enthalten eine Funktion für den Zugriff auf Nicht-Gmail-Konten (z. B. Yahoo! Mail, Proton Mail usw.) über POP und IMAP. Leider unterstützen E-Mails, auf die über dieses Setup zugegriffen wird, eingebettete Stile (

Um dies zu umgehen, können Sie Kurzschrift-CSS verwenden, das unterstützt wird:

Hintergrund: URL(image.jpg) Mitte/Cover ohne Wiederholung 3ab97d;

Wenn Sie dies testen und feststellen, dass Ihr Hintergrundbild für GANGA-E-Mails in der Android- oder iOS-App von Gmail immer noch nicht gerendert wird, kann dies an einer weiteren kleinen Render-Eigenart liegen. In beiden Apps sind Bilder standardmäßig für GANGA-E-Mails blockiert.

Normalerweise sehen Sie einen Link zum Anzeigen der blockierten Bilder. Wenn Ihre E-Mail jedoch nur ein Hintergrundbild verwendet und keine anderen Bilder enthält, wird dieser Link nicht angezeigt. Stellen Sie sicher, dass Sie bei Verwendung eines Hintergrundbilds auch ein normales Bild einfügen, damit der Link „Bilder anzeigen“ angezeigt wird.

3. Gmail schneidet Nachrichten ab, die größer als 102 KB sind oder Sonderzeichen enthalten

Wenn die Größe Ihrer E-Mail 102 KB überschreitet, zeigt Gmail die ersten 102 KB zusammen mit einer Meldung an, die lautet:

[Message clipped] Gesamte Nachricht anzeigen

Wenn der Abonnent klickt, um die gesamte Nachricht anzuzeigen, wird Ihre E-Mail in einem neuen Fenster angezeigt.

Wenn Sie fast 102 KB groß sind, können Sie ein paar Bytes sparen, indem Sie unnötige Leerzeichen, Zeilenumbrüche oder Kommentare entfernen. Außerdem sollten Sie beim Versenden von HTML-E-Mails eingebettete Bilder und Dokumente vermeiden.

Wenn Ihre E-Mail außerdem Sonderzeichen enthält, die nicht ordnungsgemäß codiert sind, wird sie von Gmail ausgeschnitten. Stellen Sie sicher, dass alle Sonderzeichen korrekt codiert sind, um dies zu verhindern. Nachfolgend finden Sie einige Beispiele für die Kodierung von Sonderzeichen.

Copyright-Symbol ©: &Kopieren;
N Strich: –

Erfahren Sie mehr darüber, wie Sie E-Mail-Clipping vermeiden können.

4. Gmail unterstützt nur ]]>

Gmail unterstützt eingebettete Stile ( beim Rendern von E-Mails, die über Nicht-Gmail-Konten abgerufen werden (GANGA), überhaupt nicht.]]>

5. Gmail entfernt Ihren gesamten ]]>

Gmail entfernt die HTML-Formatierung vollständig, wenn auch nur ein Fehler auftritt. Zum Beispiel, Gmail mag keine „@“-Deklaration innerhalb einer „@“-Deklaration. Es gibt einige Situationen, in denen Sie möglicherweise ein „@“ innerhalb eines „@“ deklarieren – beim Deklarieren einer Webschriftart und beim Deklarieren eines Ansichtsfensters für Windows Telefon 8.1. Wenn Sie diese Deklarationen in Ihrem Code verwenden, packen Sie sie in ihre eigenen Stil-Tags ein und fügen Sie die Stile, die Gmail-sicher sind, in den oberen Block ein.

Beispiel für eine Web-Font-Deklaration:

@media { @font-face {font-family: Roboto; src: url(roboto-regular-webfont.woff) format(woff), url(roboto-regular-webfont.ttf) format(truetype); Schriftstärke: normal; Schriftstil: normal; Farbe:3ab97d; } }

Beispiel einer Viewport-Deklaration:

Nur @media-Bildschirm und (max-width:320px) { @viewport { width:320px; } }

Gmail entfernt auch Ihren Stilblock, wenn er 8192 Zeichen überschreitet. Wenn Ihr Stilblock diese Zeichenbeschränkung überschreitet, teilen Sie ihn in zwei Teile auf. Gmail entfernt den ersten Block, der den Schwellenwert von 8192 Zeichen überschreitet, sowie alle darauf folgenden Blöcke (die Zeichenanzahl umfasst alle Ihre Stilblöcke).

6. Gmail unterstützt keine anderen Web-Schriftarten als Roboto und Google Sans

Die Vorstellung, dass Googles eigene Web-Schriftarten in Gmail nicht funktionieren, erscheint überraschend und verwirrend, aber sie ist wahr. Die einzigen Web-Schriftarten, die Gmail unterstützt, sind Roboto und Google Sans. Sie können in Ihren E-Mails natürlich weiterhin Web-Schriftarten verwenden. Denken Sie jedoch daran, einen Schriftartenstapel zu verwenden, um Schriftarten in der Reihenfolge ihrer Präferenz zu deklarieren und die unterschiedliche Schriftartenunterstützung verschiedener E-Mail-Clients zu berücksichtigen.

Beispiel für einen Schriftartenstapel:

style=“Schriftfamilie: ‚Roboto‘, Helvetica, Arial, Sans-Serif;“

Erfahren Sie mehr über Schriftartenstapel und die besten Schriftarten für E-Mails.

Wie bei vielen modernen Clients wird der E-Mail-Preheader automatisch nach dem Betreff im Vorschautext von Gmail angezeigt, ohne dass der Empfänger die Nachricht öffnen muss. Preheader-Text kann ein sichtbarer Teil Ihres E-Mail-Textes sein oder speziell so gestaltet sein, dass er erst angezeigt wird, bevor der Abonnent Ihre E-Mail öffnet (versteckte Preheader).

Erfahren Sie mehr über das Codieren versteckter Preheader.

8. Gmail unterstützt keine Attributselektoren und die meisten Pseudoklassen

Gmail-CSS funktioniert nicht richtig? Überprüfen Sie, ob Sie in Ihrem Code Attributselektoren und Pseudoklassen verwenden. Obwohl Attributselektoren (wie die folgende) mehr Flexibilität bei der Auswahl von Elementen in CSS ermöglichen, werden sie von Gmail nicht unterstützt.

div[class=content]{ Farbe Rot }

Gmail unterstützt auch keine Pseudoklassen wie :überprüft Und :aktiv und nur unterstützt :schweben in ihrem Webmail-Client. Daher ist die interaktive E-Mail-Unterstützung in Gmail sehr eingeschränkt oder gar nicht vorhanden, es sei denn, Sie verwenden AMP für E-Mail.

Während AMP-E-Mail bei anderen Clients nur begrenzte Unterstützung bietet (Gmail, Yahoo! und Mail.ru unterstützen es, Outlook hat die Unterstützung jedoch bereits im Jahr 2020 eingestellt), ist es dennoch eine großartige Option, wenn Sie viele Abonnenten haben, die Gmail, Yahoo! und Mail.ru.

Schauen Sie sich einige an Beispiele für interaktive E-Mails mit AMP für E-Mail. Dann können Sie diesen Leitfaden aus dem Open-Source-AMP-Projekt verwenden Beginnen Sie mit AMP-E-Mails.

9. Gmail zeigt über großen, nicht verknüpften Bildern ein Bild-Download-Symbol an

Wenn ein Bild nicht in eine URL eingeschlossen ist, wird in Gmail ein Symbol eingeblendet, über das Empfänger das Bild herunterladen können. Im schlimmsten Fall könnte dieses Symbol wichtige Informationen in Ihrem Bild verdecken. Im besten Fall sieht es nur ablenkend aus.

Die einfachste Lösung besteht darin, dafür zu sorgen, dass Bilder, die größer als 300 x 150 sind, mit einem Link umschlossen werden. Es gibt jedoch mehrere andere Möglichkeiten, mit denen Sie versuchen können, die Gmail-Schaltfläche zum Herunterladen von Bildern in HTML-E-Mails zu verhindern.

10. Gmail erlaubt keine negativen CSS-Randwerte

Wenn Sie versuchen, Seitenelemente in Ihrer HTML-E-Mail mit negativen Randwerten zu überlappen, werden Sie feststellen, dass das Gmail-CSS nicht wie beabsichtigt funktioniert. Während in CSS für die Webentwicklung häufig negative Randwerte verwendet werden, werden sie in den meisten Webmail-Clients wie Gmail, Outlook.com oder Yahoo! nicht unterstützt. Post.

Um eine Überlappung der Elemente zu erreichen, können Sie versuchen, Folgendes zu verwenden: falsche absolute Positionierungobwohl diese Methode nicht für Gmail-Apps mit Nicht-Gmail-Konten (GANGA) funktioniert.

11. Gmail wandelt Telefonnummern, E-Mail-Adressen und URLs automatisch in Links um

Gmail wandelt Telefonnummern, E-Mail-Adressen und URLs automatisch in Links um – vermutlich für den zusätzlichen Komfort für E-Mail-Benutzer. Aber für E-Mail-Entwickler ist es ein weiterer Punkt, der der langen Liste von Dingen hinzugefügt werden muss, die in Gmail nicht wie vorgesehen angezeigt werden. Gmail konvertiert beispielsweise name@test.com in:

name@test.com

Schlimmer noch: Die Links sind standardmäßig blau und unterstrichen, was wirklich schlecht ist, wenn Ihr Hintergrund blau ist. Meistens ist dieses Problem mit der automatischen Verlinkung nur ein bisschen lästig, kann aber zu Problemen führen, wenn Sie gefälschte Domains zum Zweck des kreativen Ausdrucks verwenden (z. B. dabomb.com) oder wenn Sie einfach keinen Teil davon haben möchten Informationen müssen anklickbar sein.

Hier sind drei mögliche Lösungen, abhängig von den gewünschten Ergebnissen:

Verwenden Sie eine HTML-Entität, die Gmail nicht erkennt

Wenn Sie nicht möchten, dass bestimmte Telefonnummern, E-Mail-Adressen oder URLs in Ihrer E-Mail automatisch in einen Link eingeschlossen werden, verwenden Sie einen HTML-Code, den Gmail nicht erkennt, z. B . Dadurch wird verhindert, dass Gmail den Text als etwas erkennt, das automatisch verlinkt werden sollte.

Bei Telefonnummern würden Sie diese Entität vor jedem Bindestrich einfügen. Die Telefonnummer 212-389-3934 würde also wie folgt codiert werden:

212-389-3934

Für eine E-Mail-Adresse wie name@test.com können Sie die Entität vor dem Punkt vor dem Domänentyp hinzufügen:

name@test.com

Um zu verhindern, dass eine URL automatisch in einen Link umgewandelt wird, kodieren Sie sie wie eine E-Mail-Adresse und fügen die Entität dem Punkt vor dem Domänentyp hinzu. www.meinedomain.com würde also wie folgt geschrieben werden:

www.meinedomain.com

Wenn Sie die vollständige URL mit http oder https verwenden, fügen Sie die Entität auch nach http: oder https: hinzu. Daher würde http://www.mydomain.com wie folgt codiert werden:

http://www.meinedomain.com

Fügen Sie einen Ankertag um Ihren Text ein und formatieren Sie ihn

Wenn Sie möchten, dass Ihr Text einfach so aussieht, als wäre er nicht in einen Link umgewandelt worden, können Sie ihn jederzeit in ein Anker-Tag einbetten und ihn so formatieren, dass er zum umgebenden Text passt. Zum Beispiel:

name@test.com

Beim Hover ist es immer noch ein anklickbarer Link, aber er sieht nicht wie ein Link aus und die Wahrscheinlichkeit, dass darauf geklickt wird, ist deutlich geringer.

Gestalten Sie alle automatischen Links global

Wenn es Ihnen nichts ausmacht, dass Gmail Links automatisch anwendet, Sie aber deren Aussehen einfach an Ihre anderen Links anpassen möchten, können Sie das folgende CSS verwenden:

u+body a { Farbe: erben !important; Textdekoration: keine !important;

font-size: erben !important; Schriftfamilie: inherit !important; Schriftstärke: inherit !important;Zeilenhöhe: inherit !important;}

Note: Gmail wendet auch den standardmäßigen blauen, unterstrichenen Link auf Ihre Schaltflächen-Links an, wenn deren Stile nicht inline sind.

12. Gmail verwendet den HTML5 DOCTYPE

Wenn Sie in Ihrer E-Mail einen anderen DOCTYPE als HTML5 angeben, werden Sie feststellen, dass die E-Mail in Gmail nicht auf die gleiche Weise gerendert wird wie in einem Browser oder E-Mail-Client, der Ihren DOCTYPE berücksichtigt. Dies liegt daran, dass Gmail alle E-Mails mit dem HTML5-DOCTYPE rendert.

Dies ist ein Problem, das nicht nur bei Gmail auftritt. Viele andere E-Mail-Clients erzwingen HTML5, darunter Yahoo! Mail, Outlook.com und Yandex auf Mobil- und Desktop-Webmail; Posteingang und Yahoo! Mail auf iOS; und Posteingang auf Android. Apple Mail und Outlook unterstützen beide den DOCTYPE, den Sie verwenden möchten. Da die meisten anderen E-Mail-Clients jedoch nur HTML5 unterstützen, ist es am besten, für Ihre E-Mails einfach beim HTML5-DOCTYPE zu bleiben.

Ein weiterer zusätzlicher Vorteil der Verwendung von HTML5 DOCTYPE besteht darin, dass der Code viel kürzer als HTML4 ist. In der Welt der E-Mail-Entwicklung ist es wichtig, Ihren Code für die Menge an Inhalten, die Sie übermitteln müssen, so kurz wie möglich zu halten.

HTML4:

HTML5:

13. DOCTYPE von Gmail kann zusätzlichen Platz unter Bildern schaffen

Mit dem HTML5 DOCTYPE von Gmail können Sie zusätzlichen Platz unter Ihren Bildern schaffen. Dies ist besonders problematisch, wenn Sie segmentierte Bilder verwenden (obwohl es wahrscheinlich sowieso am besten ist, die Verwendung segmentierter Bilder zu vermeiden). Zusätzliche Abstände an unerwünschten Stellen können auch die Ästhetik Ihrer E-Mail beeinträchtigen und das Lesen erschweren.

Um dieses Problem zu vermeiden, finden Sie hier einige Problemumgehungen (diese funktionieren auch in Outlook.com und Yahoo!):

1. Fügen Sie dem Bildelement den Stil display:block hinzu

2. Fügen Sie „align absbottom“ im Bildelement hinzu

3. Fügen Sie „align texttop“ zum Bildelement hinzu

4. Fügen Sie im enthaltenden TD eine Zeilenhöhe von 10 Pixel oder weniger hinzu

5. Fügen Sie im enthaltenden TD eine Schriftgröße von 6 Pixel oder kleiner hinzu

Haben Sie immer noch Probleme mit dem Bildabstand und die oben genannten Korrekturen funktionieren nicht? Erfahren Sie mehr über andere Problemumgehungen für den Bildabstand.

14. Bei Gmail gibt es Inkonsistenzen im Dunkelmodus zwischen Android und iOS

Es gibt einige Probleme, die Gmail mit dem Dunkelmodus zwischen Android und iOS hat. Am problematischsten ist, dass Gmail in iOS dazu zwingt, jeden hellen Text in eine dunkle Textfarbe zu ändern. Wenn Sie also eine E-Mail mit weißem Text auf schwarzem Hintergrund erstellt haben, wird sie im Dunkelmodus von iOS tatsächlich in schwarzen Text auf weißem Hintergrund umgewandelt (was den Zweck des Dunkelmodus irgendwie zunichte macht).

Da Gmail dies nicht nur bei weißem Text, sondern bei jedem Text in heller Farbe tut, kann dies zu ernsthaften Problemen bei der Zugänglichkeit und Lesbarkeit führen.

Rémi Parmentier hat einen sehr ausführlichen Artikel darüber geschrieben, wie man Inkonsistenzen im Dunkelmodus in Gmail für Android und iOS bekämpft CSS-Mischmodi. Sein Beispielcode ist unten aufgeführt:

Probleme im dunklen Modus von Gmail mit CSS-Mischmodi beheben

Lorem ipsum dolor, sit amet, consectetur adipisicing elit.

Die Lösung beschränkt sich nur auf weißen Text, sollte aber dennoch hilfreich sein, wenn Sie einen Workaround für die Probleme im Dunkelmodus in iOS finden müssen.

Erfahren Sie mehr über die Herausforderungen bei der E-Mail-Entwicklung im Dark Mode und wie Sie diese bewältigen können.

Weitere Tipps und Tricks zum Codieren für Gmail

Das Obige sind nur einige Beispiele für die größten Probleme, mit denen E-Mail-Entwickler beim Codieren für Gmail konfrontiert sind. Weitere Problemumgehungen und hilfreiche Hinweise finden Sie in unseren Abschnitten „Tipps und Tricks“ für Gmail und Google Apps sowie die Gmail-App.

Natürlich ändert sich die Landschaft dessen, was Gmail unterstützt und was nicht, regelmäßig. Wenn Sie also weitere Tricks oder Problemumgehungen für Gmail haben, teilen Sie diese gerne im Kommentarbereich unten mit! Wenn Sie Mitglied des Slack-Kanals Email Geeks sind, können Sie sich auch an unsere eigene E-Mail-Entwicklerin Megan Boshuyzen wenden.

Gewinnen Sie Selbstvertrauen durch E-Mail-Tests

Unabhängig davon, wie erfahren Sie in der HTML-E-Mail-Entwicklung sind, ist es dennoch wichtig, Ihre E-Mail zu testen, um sicherzustellen, dass sie in Gmail und allen anderen wichtigen E-Mail-Clients korrekt dargestellt wird.

Mit Email on Acid erhalten Sie unbegrenzte E-Mail-Tests und Vorschauen auf mehr als 70 Clients und Geräten. Unsere Checkliste vor der Bereitstellung verwendet einen E-Mail-Bereitschaftsworkflow, der End-to-End-Inhaltsprüfungen, Zustellbarkeit und Vorschauen umfasst, um Ihren Testprozess zu optimieren und Ihnen dabei zu helfen, Ihre E-Mails schneller, stressfreier und jedes Mal gut aussehend zu versenden.

Dieser Beitrag wurde am 23. März 2022 aktualisiert. Er wurde auch im April 2018 und März 2017 aktualisiert. Er wurde ursprünglich im Juni 2013 veröffentlicht.

Table of Contents

Toggle