Auf dieser Seite: Erfahren Sie, wie Sie Ihre E-Mail-Inhalte im E-Mail-Designer gestalten. Informieren Sie sich dazu über die wesentlichen Schritte, die erforderlich sind, um sie von Grund auf neu, aus Code oder importiertem HTML zu erstellen, und über die Best Practices, mit denen Ihre E-Mails in allen Clients einwandfrei dargestellt werden.
Um auf den E-Mail-Designer zuzugreifen und mit der Gestaltung Ihres E-Mail-Inhalts zu beginnen, müssen Sie zunächst eine E-Mail in einer Journey oder Kampagne erstellen.
Anschließend können Sie die Funktionen zum Entwerfen von E-Mails in Journey Optimizer verwenden, um vorhandene Inhalte zu importieren oder responsive E-Mails von Grund auf neu zu erstellen. Weitere Informationen
Der E-Mail-Designer bietet Ihnen außerdem folgende Möglichkeiten:
-
Nutzen Sie die Möglichkeiten von Adobe Experience Manager Assets Essentials, um Ihre E-Mails zu gestalten und um Ihre eigene Asset-Datenbank zu erstellen und verwalten. Weitere Informationen
-
Suchen Sie Adobe Stock-Fotos, um Ihre Inhalte zu erstellen und Ihr E-Mail-Design zu verbessern. Weitere Informationen
-
Verbessern Sie das Kundenerlebnis, indem Sie personalisierte und dynamische Nachrichten auf der Basis ihrer Kundenprofil-Attribute erstellen. Weitere Informationen zu Personalisierung und dynamischen Inhalten.
➡️ Funktion im Video kennenlernen
Wichtige Schritte zum Erstellen von E-Mail-Inhalten key-steps
Nachdem Sie eine E-Mail erstellt haben, können Sie mit dem Gestalten Ihres E-Mail-Inhalts beginnen.
-
Verwenden Sie im Konfigurationsbildschirm der Journey oder der Kampagne den Bildschirm Inhalt bearbeiten, um auf den E-Mail-Designer zuzugreifen. Weitere Informationen
-
Wählen Sie zum Gestalten Ihrer E-Mail auf der Startseite des E-Mail-Designers unter den folgenden Optionen:
-
Entwerfen Sie Ihre E-Mail von Grund auf über die Benutzeroberfläche des E-Mail-Designers und nutzen Sie Bilder aus Adobe Experience Manager Assets. In diesem Abschnitt erfahren Sie, wie Sie E-Mail-Inhalte gestalten.
-
Codieren oder fügen Sie unbearbeitetes HTML direkt in den E-Mail-Designer ein. In diesem Abschnitt erfahren Sie, wie Sie Ihren Inhalt codieren.
note NOTE In einer Kampagne können Sie auch die Schaltfläche Code Editor im Bildschirm Inhalt bearbeiten auswählen. Weitere Informationen -
Importieren Sie vorhandenen HTML-Inhalt aus einer Datei oder einem .zip-Ordner. In diesem Abschnitt erfahren Sie, wie Sie E-Mail-Inhalte importieren.
-
Konvertieren von Bild-Designs in HTML-Vorlagen mithilfe des KI-gestützten Bild-zu-HTML-Converters. In diesem Abschnitt erfahren Sie, wie Sie statische Bilder in bearbeitbare E-Mail-Vorlagen transformieren.
-
Wählen Sie aus einer Liste integrierter oder benutzerdefinierter Vorlagen einen existierenden Inhalt aus. In diesem Abschnitt erfahren Sie, wie Sie mit E-Mail-Vorlagen arbeiten.
-
-
Sobald Ihr E-Mail-Inhalt definiert und personalisiert wurde, können Sie Ihren E-Mail-Inhalt mit automatisierten Inhaltsprüfungen überprüfen, um HTML- und CSS-Probleme - wie nicht unterstützte Tags, leere DivS und Verletzungen der Größenbeschränkung - direkt im Authoring-Bedienfeld zu erfassen, bevor Sie senden. Weitere Informationen
note NOTE Das System sucht auch während des Entwurfs nach wichtigen Einstellungen und zeigt Warnhinweise für Warnungen (Empfehlungen und Best Practices) und Fehler (Blockierungsprobleme, die Tests oder die Aktivierung verhindern) an. Weitere Informationen zu E-Mail-Warnungen 
-
Sie können auch die Qualität Ihrer Inhalte prüfen, um potenzielle Probleme mit Lesbarkeit, Inhaltskohärenz und Effektivität zu identifizieren. Weitere Informationen zur Validierung der Inhaltsqualität
-
Schließlich können Sie Ihre Inhalte zur Validierung oder zur späteren Verwendung exportieren. Klicken Sie auf HTML exportieren, um eine ZIP-Datei auf Ihrem Computer zu speichern, die Ihre HTML und Ihre Assets enthält.
Best Practices für das E-Mail-Design best-practices
Beim Senden von E-Mails ist es wichtig zu beachten, dass die Empfängerinnen und Empfänger sie weiterleiten könnten, was manchmal zu Problemen mit dem Rendering der E-Mail führen kann. Dies gilt insbesondere bei der Verwendung von CSS-Klassen, die vom E-Mail-Anbieter, der für die Weiterleitung verwendet wird, möglicherweise nicht unterstützt werden, z. B. wenn Sie die CSS-Klasse „is-desktop-hidden“ verwenden, um ein Bild auf Mobilgeräten auszublenden.
Um diese Rendering-Probleme zu minimieren, empfehlen wir, Ihre E-Mail-Design-Struktur so einfach wie möglich zu halten. Versuchen Sie, ein einzelnes Design zu verwenden, das sowohl für Desktop- als auch für Mobilgeräte gut funktioniert, und vermeiden Sie die Verwendung komplexer CSS-Klassen oder anderer Design-Elemente, die möglicherweise nicht von allen E-Mail-Clients vollständig unterstützt werden.
Mithilfe dieser Best Practices können Sie sicherstellen, dass Ihre E-Mails konsistent korrekt gerendert werden, unabhängig davon, wie sie von Empfangenden angezeigt oder weitergeleitet werden.
Best Practices für die Gestaltung von E-Mails finden Sie in der unten stehenden Tabelle:
- Statische, tabellenbasierte Layouts für die Struktur
- HTML-Tabellen und verschachtelte Tabellen für ein konsistentes Layout
- Vorlagenbreiten zwischen 600 px und 800 px
- Einfaches Inline-CSS für die Formatierung
- Web-sichere Schriftarten für universelle Kompatibilität
- Hintergrundbilder werden auf bestimmten E-Mail-Plattformen möglicherweise nicht angezeigt.
- Benutzerdefinierte Web-Schriftarten werden nicht universell unterstützt.
- Breites Layout wird auf kleineren Bildschirmen möglicherweise schlecht angezeigt.
- Imagemaps bieten eingeschränkte Funktionalität.
- Eingebettetes CSS wird manchmal während des E-Mail-Versands entfernt.
- JavaScript wird in E-Mail-Umgebungen im Allgemeinen nicht unterstützt.
<iframe>-Tags sind auf den meisten Plattformen blockiert.- Flash ist veraltet und wird nicht mehr unterstützt.
- Eingebettetes Audio kann oft nicht abgespielt werden.
- Eingebettetes Video ist mit vielen E-Mail-Plattformen nicht kompatibel.
- Formulare funktionieren in E-Mails nicht.
<div>-Ebenen können zu Problemen beim Rendern führen.
Spezifische Leitplanken und Einschränkungen email-guardrails
Selbst gut strukturierte E-Mails können je nach Client oder Umgebung, in der sie geöffnet werden, unterschiedlich dargestellt werden. In den folgenden Abschnitten werden bekannte Einschränkungen und Client-spezifische Verhaltensweisen beschrieben, die Sie beim Entwerfen Ihrer E-Mails beachten sollten.
Einschränkungen bei mobilen Webbrowsern mobile-web-limitations
Das E-Mail-Rendering kann unterschiedlich sein, wenn Empfänger Gmail oder Outlook über einen mobilen Webbrowser (z. B. Chrome auf einem Mobiltelefon) öffnen, anstatt eine native Mobile App oder einen Desktop-Client zu verwenden. Dies ist eine bekannte Einschränkung mobiler Webmail-Umgebungen und nicht spezifisch für Journey Optimizer.
Dieser Rendering-Unterschied ist darauf zurückzuführen, wie sich Webmail-Clients in einem mobilen Browser verhalten. Der Browser rendert zuerst die vollständige Desktop-Webmail-Benutzeroberfläche und platziert die E-Mail zwei Ebenen tief - außerhalb der Reichweite von responsiven CSS- oder Medienabfragen. Gmail Web entfernt außerdem CSS-<style> und umschließt E-Mail-Inhalte in einen eigenen <div>, wodurch Ihre Stile überschrieben und Ausrichtungskonflikte verursacht werden können.
Zu den typischen Symptomen gehören die Verschiebung der Textausrichtung (linksbündig ausgerichteter Text erscheint zentriert), zusätzliche weiße Trennlinien zwischen Inhaltsabschnitten und ein vom Vorlagendesign unterschiedliches Gesamtlayout.
Diese Probleme treten nur in Gmail Web und Outlook Web auf, wenn der Zugriff über einen mobilen Browser erfolgt. Native Mobile Apps von Outlook und Gmail sowie alle Desktop-Clients sind davon nicht betroffen.
-
Verwenden einfacher tabellenbasierter Layouts mit vollständig inline-CSS.
-
Verlassen Sie sich bei wichtigen Layout-Eigenschaften wie der Textausrichtung nicht auf Medienabfragen oder
<style>.
Überlegungen zum Outlook-Rendering outlook-tips
Outlook verfügt über eine Reihe von Rendering-Eigenheiten, die sich auf Ihr E-Mail-Layout auswirken können, wenn sie beim Entwurf nicht berücksichtigt werden. Gehen Sie wie folgt vor, um sicherzustellen, dass E-Mails in Outlook korrekt gerendert werden:
- Verwenden Sie gerade Zahlen für Abstand, Schriftgrößen und Breiten. Outlook wandelt Pixel intern in Punkte um, was bei Verwendung ungerader Zahlen zu ungeraden Abständen und unerwünschten weißen Linien führen kann.
- Legen Sie die Tabellenbreiten in Pixeln fest, nicht in Prozentsätzen. Prozentbasierte Breiten können das Layout in Outlook beschädigen. Wenden Sie Breitenwerte direkt im Stilattribut jeder Tabelle an.
- Legen Sie Bildbreiten immer mit dem Attribut
widthfest. Outlook ignoriert CSS-widthundheightEigenschaften für Bilder und greift auf die nativen Dimensionen der Datei zurück, wenn kein HTML-Attribut vorhanden ist. - Alt-Text auf allen Bildern einschließen. Dadurch werden Anzeige- und Sicherheitsprobleme bei der Blockierung von Bildern verhindert.
- Wenden Sie Rahmen auf Tabellenzellen an, nicht auf das Tabellenelement selbst. Wenn ein Rahmen nicht wie erwartet gerendert wird, verschieben Sie ihn vom
<table>in den<td>. - Abgerundete Ecken vermeiden. CSS
border-radiuswird in Outlook nicht zuverlässig unterstützt. Quadratische Ecken sind die sichere Standardeinstellung.
Überlegungen zum Design im Dunkelmodus, einschließlich der Verwendung von Medienabfragen und Outlook.com-spezifischen Bildtauschtechniken, finden Sie dieser Seite.
Anleitungsvideos video
Erfahren Sie, wie Sie mit dem Nachrichteneditor E-Mail-Inhalte erstellen.
Erfahren Sie, wie Sie Inhaltsexperimente für A/B-Tests konfigurieren und E-Mail-Inhalte ausprobieren können, um Ihre Geschäftsziele bestmöglich zu erreichen.