AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.
In diesem Dokument werden einige Best Practices zum E-Mail-Design beschrieben, die zu einer gut entwickelten E-Mail-Kampagnenvorlage führen.
Die in AEM verfügbare Demokampagne folgt diesen Best Practices. Wie die Best Practices in der Demokampagne 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. Wenn Sie beispielsweise eine Kampagnenstruktur in etwa planen:
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).
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. Dies erzwingt eine Verschachtelungsmodellstruktur.
Alle Tabellen enthalten die erforderlichen 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 zugrunde liegende HTML-Struktur besser zu demonstrieren und die Möglichkeit zur Anpassung der Newsletter-Struktur zu erleichtern, erfolgen nur einige CSS-Definitionen inline.
Basisstile und Vorlagenvarianten wurden im <head> der Seite in einen Stilblock extrahiert. Bei der endgültigen Übermittlung des Newsletters sollten diese CSS-Definitionen in die HTML eingefügt werden. Ein automatischer Inline-Mechanismus ist geplant, derzeit jedoch 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. Dies 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 als JPG bereitgestellt.
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. Dies ermöglicht eine gute Anzeige in Gmail.
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.
Verwenden Sie weder JavaScript noch Flash. Diese Technologien werden von E-Mail-Clients größtenteils nicht unterstützt.
In der Newsletter-Vorlage 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.
Vorlagen und Beispiele für Campaign-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 Basis zu bieten und die Vielfalt an Inhaltsflussmöglichkeiten zu erweitern, sind standardmäßig drei leicht unterschiedliche Vorlagentypen verfügbar. Sie können diese einfach 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 Spalten-Design (1, 2 oder 3 Spalten) der verschiedenen Vorlagen.
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.
