Best Practices für E-Mail-Vorlagen

VORSICHT

Dieser Artikel bezieht sich auf die veralteten Foundation Components-basierten AEM-E-Mail-Komponenten.

Es wird empfohlen, die modernen Kernkomponenten „E-Mail-Komponenten“ zu verwenden.

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 Demo-Kampagne folgt diesen Best Practices. Wie die Best Practices in der Demo-Kampagne implementiert werden, wird für jede Best Practice beschrieben.

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

HINWEIS

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

Ihre geplante Kampagnenstruktur sieht beispielsweise etwa so aus:

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

Vergewissern Sie sich, dass sie sich unter einer master-Seite befindet

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

HINWEIS

Wenn Sie eine E-Mail-Vorlage für Adobe Campaign erstellen, müssen Sie die Eigenschaft acMapping mit dem Wert mapRecipient in den Knoten jcr:content der Vorlage aufnehmen. Wenn Sie dies nicht tun, können Sie die Adobe Campaign-Vorlage in Seiteneigenschaften von Experience Manager nicht auswählen (das Feld ist deaktiviert).

Vorlage/Seitenkomponente

/libs/mcm/campaign/components/campaign_newsletterpage

Best Practice Implementierung

Geben Sie den Dokumenttyp an, um eine konsistente Wiedergabe zu gewährleisten.

Fügen Sie DOCTYPE am Anfang hinzu (HTML oder XHTML).

Ist durch Änderung des Designs der Eigenschaft cq:doctype in /etc/designs/default/jcr:content/campaign_newsletterpage konfigurierbar.

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 <table>-Elements. Bei komplizierteren Layouts sollten Sie Tabellen zur Erstellung komplexer Strukturen verschachteln.

E-Mails sollten auch ohne css gut aussehen.

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

<div>-Tags werden nur im Autorenmodus verwendet, um eine ordnungsgemäße Komponentenbearbeitung sicherzustellen.
Verwenden Sie Elementattribute (wie „cellpadding“, „valign“ und „width“), um die Tabellenmaße festzulegen. Diese Methode erzwingt eine Verschachtelungsmodellstruktur.

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

Zur Harmonisierung der Elementpositionierung innerhalb von Tabellen ist für alle Tabellenzellen das Attribut valign="top" festgelegt.

Achten Sie nach Möglichkeit auf eine Eignung für mobile Geräte. 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 Demo-Designs verwendet werden, werden Medienabfragen für die Bereitstellung einer für mobile Geräte geeigneten Version verwendet.
Inline-CSS ist besser, als den gesamten CSS-Code am Anfang anzugeben.

Um die zugrundeliegende HTML-Struktur besser zu veranschaulichen und die Möglichkeit zur Anpassung der Newsletter-Struktur zu erleichtern, wurden nur einige CSS-Definitionen eingefügt.

Basisstile und Vorlagenvarianten wurden im <head> der Seite in einen Stilblock extrahiert. Bei der endgültigen Übermittlung des Newsletters werden diese CSS-Definitionen in das HTML eingebettet. Ein automatischer Inlining-Mechanismus ist geplant, aber derzeit nicht verfügbar.
Halten Sie CSS einfach. Vermeiden Sie zusammengesetzte Stildeklarationen, Kompakt-Code, CSS-Layout-Eigenschaften, komplexe Selektoren und Pseudoelemente. Bei der Verwendung von CSS-Stilen zur Illustration des Demo-Designs werden die CSS-Empfehlungen befolgt.
Die maximale Breite von E-Mails sollte 600 – 800 Pixel betragen. Diese Größenanpassung sorgt dafür, dass diese in der von vielen Clients bereitgestellten Vorschaufenstergröße besser funktionieren. Die Breite der Inhaltstabelle ist im Demo-Design auf 600 Pixel beschränkt.

Bilder

/libs/mcm/campaign/components/image

Best Practice Implementierung
Fügen Sie alt-Attribute für Bilder hinzu. Das alt-Attribut wurde als obligatorisch für die Bildkomponente definiert.
Verwenden Sie das jpg- statt des png-Formats für Bilder. Bilder werden von der Bildkomponente immer im JPG-Format geliefert.
Verwenden Sie das <img>-Element statt Hintergrundbilder in einer Tabelle. In den Vorlagen werden keine Hintergrundbilddaten verwendet.
Fügen Sie den Bildern das Attribut „style="display block"“hinzu. Auf diese Weise können sie gut auf Gmail angezeigt werden. Alle Bilder enthalten standardmäßig das Attribut style="display block".

Text und Links

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

Best Practice Implementierung
Verwenden Sie den HTML-Code <font> statt „style“ in CSS (Schriftfamilie). Der RichTextEditor (z. B. in der Textimage-Komponente) unterstützt jetzt die Auswahl und Anwendung von Schriftfamilien und Schriftgrößen auf 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 Demo-Design wird die Schrift „Helvetica®“ verwendet, sie wird jedoch auf die generische sans-serif-Schrift zurückgesetzt, falls Helvetica nicht vorhanden ist.

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 den XHTML-Dokumenttyp „transitional“ fehlt nur das fehlende Xmlns-Attribut für das <html>-Element.
Vermeiden Sie die Verwendung von JavaScript oder Flash: diese Technologien werden häufig von E-Mail-Clients nicht unterstützt. JavaScript oder Flash wird in der Newsletter-Vorlage nicht verwendet.
Fügen Sie eine Nur-Text-Version für das mehrteilige Senden hinzu. Es wurde ein neues Widget in die Seiteneigenschaften integriert, mit dem im Handumdrehen eine Nur-Text-Version aus den Seiteninhalten extrahiert werden kann. Sie können es als Ausgangspunkt für die finale Nur-Text-Version verwenden.

Vorlagen und Beispiele für Kampagnen-Newsletter

AEM enthält standardmäßig mehrere Vorlagen und Komponenten, mit denen Sie Kampagnen-Newsletter erstellen können. Sie können diese Vorlagen und Komponenten verwenden, um Ihre benutzerdefinierten Newsletter zu erstellen.

Vorlagen

Um eine solide Grundlage zu bieten und die Vielfalt an Inhaltsflussmöglichkeiten zu erweitern, stehen standardmäßig drei leicht unterschiedliche Vorlagentypen zur Verfügung. Sie können diese drei Typen im Handumdrehen verwenden, um einen benutzerdefinierten Newsletter zu erstellen.

Alle haben einen Kopfzeile, eine Fußzeile und einen Hauptteil. Unterhalb des Hauptteils unterscheidet sich jede Vorlage im Spaltenaufbau (ein-, zwei- oder dreispaltig).

Varianten möglicher Newsletter

Komponenten

Es gibt derzeit sieben Komponenten zur Verwendung in Kampagnenvorlagen. 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
Textbild /libs/mcm/campaign/components/textimage
Link /libs/mcm/campaign/components/reference
Dynamic Media Classic-Bildvorlage (früher Scene7) /libs/mcm/campaign/s7image
Zielgerichteter Verweis /libs/mcm/campaign/components/reference
HINWEIS

Diese Komponenten sind für E-Mail-Inhalte optimiert. d. h. sie halten sich an die in diesem Dokument beschriebenen Best Practices. Die Verwendung anderer vordefinierter Komponenten verstößt normalerweise gegen diese Regeln.

Diese Komponenten werden ausführlich unter Adobe Campaign-Komponenten beschrieben.

Auf dieser Seite