Sie sehen sich Hilfeinhalte der folgenden Version an:

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:

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

Vorlage/Seitenkomponente

/libs/mcm/campaign/components/campaign_newsletterpage

Best Practice Implementierung

Legen Sie einen Dokumententyp fest, um ein konsistentes Rendering sicherzustellen.

Fügen Sie zu Beginn DOCTYPE hinzu (HTML oder XHTML).

Ist konfigurierbar durch die Änderung der Eigenschaft cq:doctype  in"/etc/designs/default/jcr:content/campaign_newsletterpage"

Der Standard lautet "XHTML":

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

Kann geändert werden in "HTML_5":

<!DOCTYPE HTML>

Legen Sie eine Zeichendefinition fest, um das korrekte Rendering 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">

Kodieren Sie die gesamte Struktur mithilfe des Elements <table>. 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 (1 Basistabelle + max. 3 Verschachtelungsebenen) verwendet

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

Verwenden Sie Elementattribute (wie cellpadding, valign und width), um die Tabellenmaße festzulegen. Dies erzwingt eine Verschachtelungsmodellstruktur.

Alle Tabellen enthalten notwendige Attribute wie bordercellpaddingcellspacing und width.

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

Sorgen Sie möglichst für „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 sämtliche CSS zu Beginn.

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 im <head> der Seite in einen Stilblock 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.

Gestalten Sie Ihre CSS so einfach wie möglich. 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
Fügen Sie Bildern alt-Attribute hinzu. Das alt -Attribut wurde für die Bildkomponente als obligatorisch definiert.
Verwenden Sie das jpg- anstelle des png-Formats für Bilder. Bilder werden von der Bildkomponente immer als JPG bereitgestellt.
Verwenden Sie in einer Tabelle das <img>-Element anstelle von Hintergrundbildern. In den Vorlagen werden keine Hintergrundbilddaten verwendet.
Fügen Sie 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 Stilen in CSS (Schriftenfamilie). Der RichTextEditor (z. B. in der textimage-Komponente) unterstützt nun die Auswahl und Anwendung von Schriftfamilien und Schriftgrößen für ausgewählte Texte. Sie werden als  <font>-Tags wiedergegeben.
Verwenden Sie grundlegende plattformübergreifende Schriften wie Arial, Verdana, Georgia und Times New Roman.

Hängt vom Newsletterdesign ab.

Für das Demodesign 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. Beim „XHTML transitional Doctype“ fehlt nur das xmlns-Attribut zum 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 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. 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 im Handumdrehen verwenden, um einen benutzerdefinierten Newsletter zu erstellen. 

Alle verfügen über eine Kopfzeile, eine Fußzeile und einen Hauptteil. Unter dem Abschnitt mit dem Hauptteil, variiert das Spaltendesign (1, 2 oder 3 Spalten) der verschiedenen Vorlagen.

chlimage_1

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 & Personalisierung /libs/mcm/campaign/components/personalization
Textbild /libs/mcm/campaign/components/textimage
Link /libs/mcm/campaign/components/reference
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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie