Show Menu
THEMEN×

Best Practices für E-Mail-Vorlagen

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.
Alle Kampagneninhalte sollten unter einer master Seite des Typs erstellt werden cq/personalization/components/ambitpage . Wenn Sie beispielsweise eine Kampagnenstruktur planen, haben Sie folgende Möglichkeiten:
  • /content/campaigns/teasers/en/campaign-promotion-global
Vergewissern Sie sich, dass sie sich unter einer Masterseite 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 Dokumenttyp an, um eine konsistente Wiedergabe sicherzustellen.
Hinzufügen von DOCTYPE am Anfang (HTML oder XHTML)
Ist konfigurierbar durch Änderung der Eigenschaft cq:doctype in "/etc/designs/default/jcr:content/campaign_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.
Fügen Sie CHARSET-Deklaration (z. B. iso-8859-15, UTF-8) zu <head> hinzu.
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 Mobillichkeit. 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 setzen.
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.
Fügen Sie attribute style="display block" auf Bildern hinzu. Dies ermöglicht eine gute Anzeige in Gmail.
Alle Bilder enthalten standardmäßig das Attribut style="display block" .

Generisch

Best Practice
Implementierung
Mit dem W3C-Validator können Sie den HTML-Code 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.
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.
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/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
Scene7-Bildvorlage
/libs/mcm/campaign/s7image
Targeting-Referenz
/libs/mcm/campaign/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.