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.
NOTE
Alle Kampagneninhalte sollten unter einer master-Seite des Typs cq/personalization/components/ambitpage erstellt werden.
Nehmen wir beispielsweise an, Ihre geplante Kampagnenstruktur sieht etwa so aus:
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).
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 images
/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".
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 generic
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 campaign-newsletter-templates-and-examples
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 templates
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).
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.
