Erste Schritte mit E-Mail-Design get-started-content-design

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.

  1. Verwenden Sie im Konfigurationsbildschirm der Journey oder der Kampagne den Bildschirm Inhalt bearbeiten, um auf den E-Mail-Designer zuzugreifen. Weitere Informationen

  2. 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.

  3. 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-Panel zu erfassen, bevor Sie senden. Weitere Informationen

    note
    NOTE
    Beim Entwerfen sucht das System auch nach wichtigen Einstellungen und zeigt Warnungen (Empfehlungen und Best Practices) und Fehler (Blockierungsprobleme, die Tests oder die Aktivierung verhindern) an. Weitere Informationen zu E-Mail-Warnhinweisen

    Inhaltsprüfungsbereich im E-Mail-Designer mit Problemen

  4. 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

  5. Abschließend können Sie Ihren Inhalt 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.

NOTE
Dasselbe gilt, wenn E-Mails in Gmail oder Outlook über einen mobilen Webbrowser geöffnet werden, wo sich die CSS-Handhabung erheblich von nativen Apps unterscheidet. Einfache, tabellenbasierte Layouts mit vollständig Inline-Stilen sind die sicherste Wahl. Weitere Informationen

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:

Empfohlen
Vorsicht bei der Anwendung
Nicht empfohlen
  • 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.
NOTE
Die EU-Richtlinie zur Barrierefreiheit legt fest, dass alle digitalen Kommunikationen zugänglich sein sollten. Zusätzlich zu den in diesem Abschnitt aufgeführten Best Practices zum Entwerfen von E-Mails sollten Sie auch die auf dieser Seite aufgeführten Richtlinien zum Erstellen barrierefreier Inhalte mit dem E-Mail-Designer befolgen.

Spezifische Leitlinien und Einschränkungen email-guardrails

Selbst gut strukturierte E-Mails können je nach Client oder Umgebung, in der sie geöffnet werden, unterschiedlich gerendert 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 anders sein, wenn Empfängerinnen und Empfänger Gmail oder Outlook über einen mobilen Webbrowser (z. B. Chrome auf einem Mobiltelefon) öffnen, anstatt eine native 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>-Blöcke und umschließt E-Mail-Inhalte in ein eigenes <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 Gesamtlayout, das vom Design der Vorlage abweicht.

Diese Probleme treten in Gmail Web und Outlook Web nur auf, wenn der Zugriff über einen mobilen Browser erfolgt. Native Apps von Outlook und Gmail sowie alle Desktop-Clients sind davon nicht betroffen.

TIP
So minimieren Sie die Auswirkungen:
  • Verwenden Sie einfache tabellenbasierte Layouts mit vollständigem Inline-CSS.

  • Verlassen Sie sich bei wichtigen Layout-Eigenschaften wie der Textausrichtung nicht auf Medienabfragen oder <style>-Blöcke.

Ü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 diese beim Entwerfen 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 width-Attribut fest. Outlook ignoriert width- und height-CSS-Eigenschaften für Bilder und greift auf die nativen Dimensionen der Datei zurück, wenn kein HTML-Attribut vorhanden ist.
  • Schließen Sie Alternativtext auf allen Bildern ein. 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 von <table> zu <td>.
  • Vermeiden Sie abgerundete Ecken. CSS-border-radius wird 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 auf 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.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design email content in the Email Designer — building from scratch, code, or imported HTML — verify it with automated content checks and content quality validation, export it, and follow rendering best practices and client-specific limitations.

Intents:

  • Choose how to design an email: from scratch, code/paste raw HTML, import existing HTML, convert image designs to HTML, or select an existing content template
  • Verify email content with automated content checks before sending
  • Validate content quality for readability, cohesiveness, and effectiveness
  • Export email content as a zip file containing HTML and assets
  • Apply email design best practices to keep emails rendering well across clients
  • Account for mobile web browser and Outlook rendering limitations

Glossary:

  • Email Designer: The Journey Optimizer interface used to import content or build responsive emails from scratch, code, or imported HTML (product-specific)
  • Automated content checks: A check that catches HTML and CSS issues — such as unsupported tags, empty divs, and size limit violations — directly in the authoring panel, before sending (product-specific)
  • Content quality validation: A validation that identifies potential issues with readability, content cohesiveness, and effectiveness (product-specific)
  • Image to HTML converter: An AI-powered converter that transforms static image designs into editable email templates (product-specific)
  • Export HTML: An action that saves a zip file to your computer including your HTML and assets (product-specific)

Guardrails:

  • Recommended template widths are between 600px and 800px (recommended).
  • Recommended practices: static, table-based layouts; HTML tables and nested tables; simple, inline CSS; web-safe fonts.
  • Use with care (may not render everywhere): background images, custom web fonts, wide layouts, image maps, and embedded CSS (embedded CSS is sometimes removed during email delivery).
  • Not recommended (generally unsupported in email): JavaScript, <iframe> tags, Flash, embedded audio, embedded video, forms, and <div> layering.
  • Alerts distinguish warnings (recommendations and best practices) from errors (blocking issues that prevent testing or activation).
  • Mobile web rendering differences occur only in Gmail Web and Outlook Web when accessed via a mobile browser; Gmail/Outlook native mobile apps and all desktop clients are not affected.
  • Outlook rendering: use even numbers for padding, font sizes, and widths; set table widths in pixels not percentages; set image widths using the width attribute; include Alt text on all images; apply borders to <td> not <table>; avoid border-radius (rounded corners).

Terminology:

  • Canonical name: Email Designer — Acronym: n/a — variants: message editor, email design capabilities
  • Synonyms: “automated content checks” = “content check”
  • Do not confuse: “automated content checks” (HTML/CSS issue detection) ≠ “content quality validation” (readability, cohesiveness, effectiveness)
  • Do not confuse: “warnings” (recommendations and best practices) ≠ “errors” (blocking issues that prevent testing or activation)

FAQ:

  • Q: What options are available for designing an email? — Design from scratch, code or paste raw HTML, import existing HTML from a file or .zip, convert image designs to HTML templates, or select an existing built-in or custom template.
  • Q: How can I catch HTML and CSS issues before sending? — Use automated content checks, which flag unsupported tags, empty divs, and size limit violations in the authoring panel.
  • Q: What template width is recommended? — Between 600px and 800px.
  • Q: Why does my email look different in Gmail or Outlook on a phone browser? — This is a known limitation of Gmail Web and Outlook Web via a mobile browser; use simple table-based layouts with fully inlined CSS and avoid relying on media queries or <style> blocks for critical layout.
  • Q: How do I export my content? — Click Export HTML to save a zip file containing your HTML and assets to your computer.
recommendation-more-help
journey-optimizer-help