So senden Sie benutzerdefiniertes HTML mit Gmail

HTML-E-Mails sind zu einem zentralen Bestandteil des modernen E-Mail-Marketings geworden. Sie ermöglichen Ihnen die Erstellung visuell ansprechender und interaktiver E-Mail-Nachrichten, wodurch Ihre E-Mails ansprechender und effektiver werden. Sie sind für Unternehmen von entscheidender Bedeutung, da sie Produkte, Werbeaktionen und das Branding auf eine Weise hervorheben können, die einfacher Text einfach nicht kann. Sie ermöglichen außerdem eine bessere Nachverfolgung und Analyse und helfen Ihnen zu verstehen, wie Empfänger mit Ihren E-Mails interagieren.

In der Vergangenheit ermöglichte Gmail Benutzern die direkte Eingabe und Bearbeitung von HTML-Code im E-Mail-Editor. Diese Funktion wurde von denjenigen bevorzugt, die ihre E-Mails umfassend personalisieren und gestalten wollten. Um die Sicherheit zu erhöhen und das Benutzererlebnis zu vereinfachen, hat Gmail jedoch beschlossen, die Möglichkeit zur direkten Eingabe von HTML-Code im E-Mail-Editor zu entfernen.

Diese Änderung hat Benutzer dazu veranlasst, alternative Methoden zum Senden benutzerdefinierter HTML-E-Mails über Gmail zu erkunden, auf die wir in diesem Artikel eingehen werden.

Springen Sie hier zu einem Abschnitt oder lesen Sie die vollständige Anleitung:

• Senden von benutzerdefinierten HTML-E-Mails über Gmail
• Gerendertes HTML direkt in Gmail kopieren
• Einschränkungen bei der Verwendung benutzerdefinierter HTML-Vorlagen
• Nur-Text-E-Mails im Vergleich zu HTML-E-Mails
• Senden Sie personalisierte HTML-E-Mails mit Mailmeteor!

Senden von benutzerdefinierten HTML-E-Mails über Gmail

Gmail verwendet einen WYSIWYG-Editor (What You See Is What You Get), was bedeutet, dass das direkte Senden von rohem HTML-Code keine praktikable Option ist. Denn der Empfänger sieht tatsächlich den rohen HTML-Code und nicht ein gerendertes Dokument.

Schauen Sie sich zum Beispiel diese Muster-E-Mail-Vorlage an.

Es gab eine Zeit, da hätte man so etwas direkt in Gmail erstellen können, aber wenn man versucht, den HTML-Code zu kopieren und in den Gmail-Editor einzufügen, passiert Folgendes:

Da Gmail einen WYSIWYG-Editor verwendet, erhält der Empfänger genau das, was Sie hier sehen: eine E-Mail, die nichts anderes als HTML-Code im Klartext ist:

Es gibt jedoch einen praktischen Workaround. Benutzer können eine gerenderte HTML-E-Mail kopieren und in den Gmail-Editor einfügen, um benutzerdefinierte HTML-E-Mails zu senden. Mit dieser Methode können Sie optisch ansprechende, individuelle E-Mails erstellen und dabei die Einschränkungen von Gmail nutzen.

Gerendertes HTML direkt in Gmail kopieren

Diese Methode ist tatsächlich viel einfacher, als es scheint: Sie müssen lediglich eine E-Mail-Vorlage in einem Browser öffnen und dann den gesamten Inhalt kopieren und in den Gmail-Editor einfügen. Folgendes müssen Sie tun:

1. Bereiten Sie Ihren HTML-Code vor
   • Öffnen Sie einen Texteditor wie Notepad (Windows) oder TextEdit (Mac).
   • Schreiben oder fügen Sie Ihren HTML-Code in den Texteditor ein. Dieser Code kann Text, Bilder, Links und Formatierungen enthalten, genau wie eine Standard-Webseite, jedoch mit einigen Einschränkungen, die wir später besprechen werden.
   • Speichern Sie die Datei mit der Erweiterung „.html“, z. B. „template.html“.
2. Vorschau in einem Webbrowser
   • Doppelklicken Sie auf die soeben erstellte HTML-Datei, um sie in Ihrem Standard-Webbrowser zu öffnen. Dadurch wird Ihre E-Mail genau so dargestellt, wie sie dem Empfänger angezeigt wird.
   • Sie können zum Texteditor zurückkehren und den Inhalt bei Bedarf ändern. Denken Sie jedoch daran, die Datei zu speichern, nachdem Sie Ihre Änderungen abgeschlossen haben, und die Browserseite zu aktualisieren, um Ihre Änderungen zu aktualisieren.
3. Wählen Sie „Alle“ und „Kopieren“.
   • Drücken Sie im Browser Strg+A (Windows) oder Befehl+A (Mac), um den gesamten Inhalt der HTML-E-Mail auszuwählen.
   • Drücken Sie anschließend Strg+C (Windows) oder Befehl+C (Mac), um den ausgewählten Inhalt zu kopieren. Sie können auch mit der rechten Maustaste klicken und im Menü „Kopieren“ auswählen.
4. In Gmail einfügen
   • Öffnen Sie Gmail und beginnen Sie mit dem Verfassen einer neuen E-Mail.
   • Klicken Sie auf den E-Mail-Text an der Stelle, an der Sie Ihren HTML-E-Mail-Inhalt einfügen möchten. Sie können kein HTML in die Betreffzeile einfügen, daher bleibt Ihnen nur der Textkörper der E-Mail.
   • Drücken Sie nun Strg+V (Windows) oder Befehl+V (Mac), um den aus dem Browser kopierten Inhalt einzufügen. Oder Sie können mit der rechten Maustaste klicken und im Menü die Option „Einfügen“ auswählen.
   • Die HTML-E-Mail sollte direkt in den Gmail-Editor eingefügt werden und wie im Bild unten dargestellt angezeigt werden.
5. Senden Sie die E-Mail
   • Vervollständigen Sie Ihre E-Mail mit einem Betreff, einem Empfänger und etwaigen zusätzlichen Texten oder Elementen.
   • Klicken Sie auf die Schaltfläche „Senden“ und Ihre benutzerdefinierte HTML-E-Mail wird an den Empfänger gesendet.

Wenn alles gut geht, erhält Ihr Empfänger die E-Mail perfekt so wiedergegeben, wie sie in der von Ihnen erstellten .html-Datei war. Wir empfehlen Ihnen, die E-Mail zunächst an sich selbst zu senden, bevor Sie sie an den bzw. die vorgesehenen Empfänger senden, um sicherzustellen, dass der HTML-Code keine Fehler enthält.

Verwenden einer HTML-Editor-Browsererweiterung

Für technisch versierte Benutzer, die mehr Kontrolle über den Roh-HTML-Code ihrer E-Mails haben möchten und mit der manuellen Bearbeitung vertraut sind, ist die Verwendung einer HTML-Editor-Erweiterung eine praktikable Lösung.

Diese Erweiterungen, die für gängige Browser wie Google Chrome weit verbreitet sind, bieten erfahrenen Benutzern die Möglichkeit, HTML-Code manuell zu schreiben und zu bearbeiten, bevor sie Ihre E-Mails über Gmail senden. Der kostenlose HTML-Editor für Gmail von cloudHQ ist eine der beliebtesten Optionen für Chrome-Benutzer.

Installieren Sie einfach die Erweiterung und gehen Sie zu Ihrem Gmail, um auf Ihren HTML-Editor mit geteiltem Bildschirm zuzugreifen, in dem Sie bequem von Ihrem Gmail-Konto aus Änderungen vornehmen und deren Auswirkungen live verfolgen können.

Einschränkungen bei der Verwendung benutzerdefinierter HTML-Vorlagen

Leider gibt es trotz der Möglichkeiten, eigenen HTML-Code zu schreiben, Einschränkungen, die Sie kennen müssen, bevor Sie diese Reise beginnen. Folgendes müssen Sie wissen:

Verabschieden Sie sich von Schriftarten!

Leider bietet Gmail keine Möglichkeit, benutzerdefinierte Webschriftarten in Ihre HTML-E-Mails zu importieren. Sie sind auf die Verwendung der Standardschriftarten beschränkt, was Ihre Designauswahl und Branding-Möglichkeiten einschränken kann.

Wenn Sie irgendwo Ihr eigenes Branding verwenden müssen, bleibt Ihnen nichts anderes übrig, als auf Bilder mit darin geschriebenem Text zurückzugreifen. Sie können diese Bilder aber auch nicht als Teil der E-Mail selbst versenden, was uns zu unserem nächsten Punkt führt.

Bilder müssen öffentlich gehostet werden

Sie können in Ihrer E-Mail keinen Link zu einem Bild auf Ihrem Computer erstellen und es an andere senden. Möglicherweise wird es in Ihrem lokalen Browser angezeigt. Sobald Sie es jedoch zum Gmail-Editor hinzufügen, wird das Laden verweigert.

In unserer Beispielvorlage haben wir Bilder aus Platzhaltern verwendet und ein Kätzchen platziert, da beide öffentlich verfügbar sind. Ihre Bilder müssen außerdem öffentlich verfügbar sein und irgendwo im Internet gehostet werden. Dies kann Ihre eigene Website, ein öffentlicher Google Drive-Ordner oder eine Website zum Online-Bildaustausch sein.

Keine Unterstützung für externe Stylesheets

Externe Stylesheets funktionieren in Ihrer E-Mail nicht. Wenn Sie mit CSS vertraut sind, sollten Sie die Verwendung von eingebettetem CSS und Inline-Stilen in Betracht ziehen, um die gewünschte Formatierung und den gewünschten Stil Ihrer E-Mail zu erreichen.

Diese Einschränkung kann den Designprozess komplexer machen, da Sie den gesamten Stil direkt in Ihren HTML-Code integrieren müssen. Halten Sie Ihre Stile gleichzeitig so einfach wie möglich, da Sie nie wissen, welchen Browser oder welche E-Mail-Anwendung Ihre Empfänger verwenden. Für maximale Kompatibilität ist es daher am besten, sich an die Standard-CSS-Stile zu halten.

Bleiben Sie bei tabellenbasierten Layouts

Während viele moderne HTML-Elemente <div> -Elemente für Layout und Stil verwenden, nutzen E-Mails immer noch die guten alten tabellenbasierten Layouts. Wenn Sie also Rasterelemente oder Felder erstellen müssen, müssen Sie dazu die verschiedenen Tabellen-Tags wie <table> , <tr> und „<td>“ verwenden.

Dies liegt daran, dass nicht jeder den gleichen E-Mail-Dienstanbieter nutzt. Selbst wenn Gmail eine neue Funktion unterstützt, werden unzählige andere noch hinterherhinken. Eine falsch gerenderte E-Mail hinterlässt einen schlechten ersten Eindruck. Daher ist es am besten, sich an das zu halten, was für alle funktioniert, und sich auf den eigentlichen Inhalt der betreffenden E-Mail zu konzentrieren.

Nur-Text-E-Mails im Vergleich zu HTML-E-Mails

Die Wahl zwischen dem Versenden von Nur-Text-E-Mails und HTML-E-Mails spielt eine entscheidende Rolle bei der Bestimmung der Wirksamkeit und Wirkung Ihrer Nachrichten. Beide Formate bieten ihre eigenen Vorteile und gehen auf individuelle Bedürfnisse und Vorlieben ein.

Lassen Sie uns die wichtigsten Unterschiede zwischen diesen beiden E-Mail-Formaten hervorheben:

Während reine Text-E-Mails für ihre Einfachheit und universelle Kompatibilität bekannt sind, bieten HTML-E-Mails eine breitere Plattform für Kreativität und Engagement.

Senden Sie personalisierte HTML-E-Mails mit Mailmeteor!

Mailmeteor ist ein leistungsstarkes E-Mail-Marketing-Tool, das den Prozess des Versendens personalisierter HTML-E-Mails an mehrere Empfänger über Gmail vereinfacht. Dieses praktische Add-on lässt sich nahtlos in Ihr Gmail und Google Sheets integrieren, sodass Sie ganz einfach personalisierte E-Mails erstellen und versenden können.

• E-Mail-Personalisierung: Erstellen Sie hochgradig personalisierte E-Mails, indem Sie benutzerdefinierte Zusammenführungs-Tags aus Daten in Ihren Google Sheets verwenden oder die Webplattform mit Feldern wie Namen, Firmendetails oder anderen benutzerdefinierten Variablen verwenden.
• HTML-Vorlagen-Editor: Nutzen Sie den Premium-HTML-Editor und fügen Sie personalisierte Daten direkt in Ihre E-Mail-Vorlagen ein.
• E-Mail-Tracking: Verfolgen Sie Ihre E-Mails, nachdem sie Ihr Postfach verlassen, prüfen Sie, ob Ihre Empfänger sie öffnen, und führen Sie A/B-Tests mit zuverlässigem Feedback durch.
• Vorlagenbibliothek: Greifen Sie auf eine Bibliothek vorgefertigter E-Mail-Vorlagen zu oder erstellen Sie Ihre eigenen HTML-E-Mail-Vorlagen zur Verwendung in Ihren Kampagnen.