Best Practices für E-Mail-Vorlagen

VORSICHT

Die AEM E-Mail-Komponenten werden nicht mehr unterstützt. Aufgrund der Art der E-Mail, in der Inhalt und Stil zusammengeführt werden, werden die standardmäßig von AEM bereitgestellten E-Mail-Komponenten für Kunden nur eingeschränkt wiederverwendet, da benutzerdefinierte Stile in alle für Projekte erforderlichen Komponenten implementiert werden müssen.

E-Mail-Komponenten können auf Projektebene implementiert werden. Die veralteten E-Mail-AEM veranschaulichen, wie dies erreicht werden kann. Diese veralteten Komponenten sollten jedoch nicht für Projekte verwendet werden.

Dieses Dokument beschreibt einige der Best Practices zum E-Mail-Design, die eine gut entwickelte E-Mail-Kampagnenvorlage ermöglichen.

Die in AEM verfügbare Demokampagne befolgt all diese Best Practices. Zu jeder Best Practice ist beschrieben, wie dieses Best Practices in der Demokampagne implementiert werden.

Verwenden Sie diese Best Practices bei der Erstellung Ihres eigenen Newsletters.

HINWEIS

Alle Kampagneninhalte sollten unter einer master-Seite vom Typ cq/personalization/components/ambitpage erstellt werden.

Wenn Ihre geplante Kampagnenstruktur beispielsweise etwa so aussieht:

/content/campaigns/teasers/en/campaign-promotion-global

Sie sollten sicherstellen, dass sie sich unter einer master-Seite befindet.

/content/campaigns/teasers/master/en/campaign-promotion-global

HINWEIS

Beim Erstellen einer E-Mail-Vorlage für Adobe Campaign müssen Sie die Eigenschaft acMapping mit dem Wert mapRecipient im Knoten jcr:content der Vorlage einbeziehen oder Sie können die Adobe Campaign-Vorlage nicht im Knoten Seiteneigenschaften der AEM auswählen (Feld ist deaktiviert).

Vorlage/Seitenkomponente

/libs/mcm/campaign/components/campaign_newsletterpage

Best Practice Implementierung

Geben Sie den Dokumenttyp an, um eine konsistente Wiedergabe sicherzustellen.

Hinzufügen von DOCTYPE am Anfang (HTML oder XHTML)

Ist konfigurierbar, indem die cq:doctype-Eigenschaft in"/etc/designs/default/jcr:content/campaign_newsletterpage" geändert wird.

Der Standardwert ist "XHTML":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Kann in "HTML_5"geändert werden:

<!DOCTYPE HTML>

Geben Sie die Zeichendefinition an, um die korrekte Darstellung von Sonderzeichen sicherzustellen.

Fügen Sie die CHARSET-Deklaration (z. B. iso-8859-15, UTF-8) zu <head> hinzu.

Ist auf UTF-8 festgelegt.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Codieren Sie die gesamte Struktur mithilfe des Elements <table>. Bei komplizierteren Layouts sollten Sie Tabellen zur Erstellung komplexer Strukturen verschachteln.

E-Mail sollte auch ohne CSS gut aussehen.

Tabellen werden in der gesamten Vorlage zur Strukturierung von Inhalten verwendet. Aktuell werden maximal vier verschachtelte Tabellen (1 Basistabelle + max. 3 Verschachtelungsebenen)

<div> -Tags werden nur im Autorenmodus verwendet, um eine ordnungsgemäße Komponentenbearbeitung sicherzustellen.

Verwenden Sie Elementattribute (z. B. cellpadding, valign und width), um Tabellendimensionen festzulegen. Dies erzwingt eine Verschachtelungsmodellstruktur.

Alle Tabellen enthalten die erforderlichen Attribute wie border, cellpadding, cellspacing und width.

Um die Elementpositionierung in Tabellen zu harmonisieren, wird für alle Tabellenzellen das Attribut valign="top" festgelegt.

Berücksichtigen Sie nach Möglichkeit die Mobilfreundlichkeit. Verwenden Sie Medienabfragen zur Erhöhung der Textgrößen auf kleinen Bildschirmen und stellen Sie zu Links Trefferbereiche im Miniaturformat bereit.

Erstellen Sie falls möglich ein responsives E-Mail-Design.

Sofern CSS-Stile zum Illustrieren des Demodesigns verwendet werden, werden Medienabfragen für die Bereitstellung einer mobilfreundlichen Version verwendet.
Inline-CSS ist besser, als alle CSS am Anfang zu platzieren.

Um die zugrunde liegende HTML-Struktur besser zu demonstrieren und die Möglichkeit zur Anpassung der Newsletterstruktur zu erleichtern, erfolgen nur einige CSS-Definitionen inline.

Basisstile und Vorlagenvarianten wurden in einen Stilblock im <head> der Seite extrahiert. Bei der finalen Übermittlung des Newsletters sollten diese CSS-Definitionen inline in HTML vorhanden sein. Ein automatischer Inlining-Mechanismus ist geplant, aktuell jedoch noch nicht verfügbar.

Halten Sie CSS einfach. Vermeiden Sie zusammengesetzte Stildeklarationen, Kompaktcode, CSS-Layouteigenschaften, komplexe Selektoren und Pseudoelemente. Bei der Verwendung von CSS-Stilen zur Illustration des Demodesigns werden die CSS-Empfehlungen befolgt.
Die maximale Breite von E-Mails sollte 600-800 Pixel betragen. Dies sorgt dafür, dass diese in der von vielen Clients bereitgestellten Vorschaufenstergröße besser funktionieren. Die Breite der Inhaltstabelle ist im Demodesign auf 600 px beschränkt.

Bilder

/libs/mcm/campaign/components/image

Best Practice Implementierung
Hinzufügen von Attributen alt zu Bildern Das Attribut alt wurde für die Bildkomponente als obligatorisch definiert.
Verwenden Sie das Format jpg anstelle des Formats png für Bilder. Bilder werden von der Bildkomponente immer als JPG bereitgestellt.
Verwenden Sie in einer Tabelle das Element <img> anstelle von Hintergrundbildern. In den Vorlagen werden keine Hintergrundbilddaten verwendet.
Fügen Sie den Bildern das Attribut style="display block" hinzu. Dies ermöglicht eine gute Anzeige in Gmail. Alle Bilder enthalten standardmäßig das Attribut style="display block" .

/libs/mcm/campaign/components/heading, /libs/mcm/campaign/components/textimage

Best Practice Implementierung
Verwenden Sie HTML <font> anstelle von Stil in CSS (Schriftfamilie) Der RichTextEditor (z. B. in der textimage-Komponente) unterstützt jetzt die Auswahl und Anwendung von Schriftfamilien und Schriftgrößen für ausgewählte Texte. Sie werden als <font>-Tags gerendert.
Verwenden Sie einfache, plattformübergreifende Schriftarten wie Arial, Verdana, Georgia und Times New Roman.

Hängt vom Newsletter-Design ab.

Für das Demodesign wird die Schrift "Helvetica"verwendet, wird jedoch auf die allgemeine sans-serif-Schrift zurückgesetzt, falls nicht vorhanden.

Generisch

Best Practice Implementierung
Verwenden Sie den W3C-Validator, um den HTML-Code zu korrigieren. Stellen Sie sicher, dass alle offenen Tags ordnungsgemäß geschlossen werden. Der Code wurde validiert. Für XHTML-Übergangsdokumentation fehlt nur das fehlende xmlns-Attribut für das Element <html> .
Verwenden Sie weder JavaScript noch Flash - diese Technologien werden von E-Mail-Clients größtenteils nicht unterstützt. In der Newslettervorlage werden weder JavaScript noch Flash verwendet.
Fügen Sie eine Textversion für mehrteilige Sendungen hinzu. Es wurde ein neues Widget in die Seiteneigenschaften integriert, mit dem im Handumdrehen eine Nur-Text-Version aus den Seiteninhalten extrahiert werden kann. Dies kann als Ausgangspunkt für die finale Nur-Text-Version verwendet werden.

Kampagnen-Newsletter – Vorlagen und Beispiele

AEM bietet Ihnen standardmäßig mehrere Vorlagen und Komponenten zur Erstellung von Kampagnen-Newslettern. Sie können diese Vorlagen und Komponenten zur Erstellung Ihrer benutzerdefinierten Newsletter verwenden.

Vorlagen

Um eine solide Grundlage zu schaffen und die Vielfalt der Möglichkeiten für den Inhaltsfluss zu erweitern, stehen standardmäßig drei leicht voneinander abweichende Vorlagentypen zur Verfügung. Sie können diese einfach verwenden, um einen benutzerdefinierten Newsletter zu erstellen.

Alle haben einen header, eine Fußzeile und einen body -Abschnitt. Unter dem Hauptteil unterscheidet sich jede Vorlage in Spaltendesign (1, 2 oder 3 Spalten).

Komponenten

Es stehen aktuell sieben Komponenten zur Verfügung, die innerhalb von Kampagnenvorlagen verwendet werden können. Diese Komponenten basieren alle auf der Adobe-Markup-Sprache HTL.

Komponentenname Komponentenpfad
Überschrift /libs/mcm/campaign/components/heading
Bild /libs/mcm/campaign/components/image
Text und Personalisierung /libs/mcm/campaign/components/personalization
Textimage /libs/mcm/campaign/components/textimage
Verknüpfung /libs/mcm/campaign/components/reference
Dynamic Media Classic (früher Scene7)-Bildvorlage /libs/mcm/campaign/s7image
Zielgerichteter Verweis /libs/mcm/campaign/components/reference
HINWEIS

Diese Komponenten sind für Mail-Inhalte optimiert, d. h. sie befolgen die in diesem Dokument beschriebenen Best Practices. Die Verwendung standardmäßiger Komponenten verstößt in der Regel gegen diese Regeln.

Diese Komponenten sind unter Adobe Campaign-Komponenten detailliert beschrieben.

Auf dieser Seite