Show Menu
THEMEN×

Best Practices für E-Mail-Vorlagen

Die AEM E-Mail-Komponenten wurden nicht mehr unterstützt. Aufgrund der Art der E-Mail, die Inhalt und Stil zusammenführt, werden die standardmäßig bereitgestellten E-Mail-Komponenten für Kunden nur in begrenztem Umfang wiederverwendet, da benutzerdefinierte Stile in alle Komponenten implementiert werden müssen, die für Projekte erforderlich sind.
E-Mail-Komponenten können auf Projektebene implementiert werden. Die veralteten AEM E-Mail-Komponenten veranschaulichen, wie dies erreicht werden kann. Diese veralteten Komponenten sollten jedoch nicht in Projekten 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.
Der gesamte Inhalt der Kampagne sollte unter einer master Seite des Typs erstellt werden cq/personalization/components/ambitpage .
Wenn Ihre geplante Kampagne z. B. in etwa
/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
When creating a mail template for Adobe Campaign, you must include the property acMapping with the value mapRecipient in the jcr:content node of the template, or you will not be able to select the Adobe Campaign template in Page Properties of AEM (field is disabled).

Vorlage/Seitenkomponente

/libs/mcm/campaign/components/campaign_newsletterpage
Best Practice Implementierung
Geben Sie den Dokument-Typ an, um eine einheitliche Darstellung sicherzustellen.
hinzufügen DOCTYPE am Anfang (HTML oder XHTML)
Ist konfigurierbar durch Änderung der Eigenschaft cq:doctype in "/etc/designs/default/jcr:content/Kampagne_newsletterpage"
Die Standardeinstellung ist "XHTML":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "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.
hinzufügen CHARSET-Erklärung (z. B. iso-8859-15, UTF-8) bis
Ist auf UTF-8 eingestellt.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Code der gesamten Struktur mit dem Element <table>erstellen. 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. Zellauffüllung, Bewertung und Breite), um Tabellendimensionen festzulegen. Dies erzwingt eine Verschachtelungsmodellstruktur.
Alle Tabellen enthalten die erforderlichen Attribute wie Rahmen , Zellauffüllung , Zellabstand und Breite .
To harmonize element positioning inside tables, all table cells have the attribute valign="top" being set.
Berücksichtigen Sie nach Möglichkeit die mobile Freundlichkeit. 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 in den Anfang zu stellen.
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 Stylesheet im Abschnitt <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 Ihre 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.
E-Mails sollten maximal 600-800 Pixel breit sein. Dies sorgt dafür, dass diese in der von vielen Clients bereitgestellten Vorschaufenstergröße besser funktionieren. The width of content table is limited to 600px in demo design.

Bilder

/libs/mcm/campaign/components/image
Best Practice
Implementierung
hinzufügen von Alt -Attributen zu Bildern
Das Alt -Attribut wurde als obligatorisch für die Bildkomponente definiert.
Verwenden Sie das Format "jpg "anstelle des PNG -Formats für Bilder
Bilder werden immer als JPG von der Bildkomponente bereitgestellt.
Verwenden Sie <img> in einer Tabelle Elemente anstelle von Hintergrundbildern.
In den Vorlagen werden keine Hintergrundbilddaten verwendet.
hinzufügen attribute style="display block" auf Bildern. Dies ermöglicht eine gute Anzeige in Gmail.
Alle Bilder enthalten standardmäßig das Attribut style="display block" .

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.
Code wurde validiert. Bei XHTML-Übergangsdokumenten fehlt nur das fehlende xmlns-Attribut für das <html> Element.
Machen Sie sich keine Gedanken mit JavaScript oder Flash - diese Technologien werden von E-Mail-Clients weitgehend nicht unterstützt.
In der Newslettervorlage werden weder JavaScript noch Flash verwendet.
hinzufügen einer Nur-Text-Version für mehrteilige Versand.
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 zum Erstellen eines benutzerspezifischen Newsletters verwenden.
All have a header , a footer and a body section. Below the body section, each template differs in column design (1, 2 or 3 columns).

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/Kampagne/components/heading
Bild
/libs/mcm/campaign/components/image
Text und Personalisierung
/libs/mcm/Kampagne/components/personalization
Textimage
/libs/mcm/Kampagne/components/textimage
Verknüpfung
/libs/mcm/Kampagne/components/reference
Scene7-Bildvorlage
/libs/mcm/Kampagne/s7image
Targeting-Referenz
/libs/mcm/Kampagne/components/reference
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.