Übersicht E-Mail und LeadPage PowerSet 2
PowerSet Varianten und Versionen
Die Evalanche PowerSets gibt es in verschiedenen Varianten, beachte hierzu das Lizenzmodell und die entsprechenden aktuellen Preislisten.
- Die PowerSet Demo ist ausschließlich für Demo- und Vertriebszwecke gedacht. Die kommerzielle Nutzung, Vervielfältigung der Objekte oder des Codes ist nicht gestattet.
- Das PowerSet (Beta) ist bereits für die kommerzielle Nutzung vorgesehen. Die enthaltenen Module und Funktionen werden nach und nach erweitert.
Standardmodule des PowerSets
Layout-Module
Komponenten
- Header (Kopfbereich mit Logo und Webversion-Link),
- Editorial (Begrüßungstext mit Datum, Anrede, Überschrift und Fließtext),
- Inhalt (flexibles Modul für Bild-Text-Kombinationen mit Überschrift, Unterüberschrift, Text, Bild und Button),
- Event (ähnlich wie Inhalt, jedoch ohne Bild und mit Datum/Uhrzeit-Feldern),
- Artikel (CMS) (zum Einbinden von Artikel-Objekten mit Hilfe von Slots),
- Artikel (Liste) (zum direkten Einbinden von Artikel-Daten ohne Slots)
- Footer (Abspann mit z.B. Logo und wählbarer ein- oder zweispaltiger Darstellung).
Dabei bieten insbesondere Inhalts-Module flexible Layout-Optionen. Zum Beispiel erlaubt das Modul “Inhalt” unterschiedliche Bild-Text-Anordnungen: Ein Bild kann oben, links oder rechts vom Text positioniert werden (oder ganz weggelassen werden). Zudem lassen sich verschiedene Teilungsverhältnisse zwischen Bild und Text einstellen, etwa 50:50, 30:70 oder 70:30, um die Breite der Spalten festzulegen. Auch farbliche Hintergründe können je nach Template-Vorgabe gewählt werden – um abwechselnde Farbkombinationen im Layout zu erzeugen.
Elemente
- Bild (einzelnes Bild mit Alt-Text und optionalem Link),
- Bildergalerie (mehrere Bilder nebeneinander, mit Alt-Texten und Links) ,
- Überschrift und Unterüberschrift (einzeilige Texte mit einstellbarer Ausrichtung),
- Text (mehrzeiliger Fließtext mit Ausrichtung),
- Button (CTA-Schaltfläche mit Link und definierter Ausrichtung),
- Kategorie (Kategorie-Titel/Label) sowie
- Trenner (Linie bzw. Abstandhalter, mit wählbarer Höhe).
- Universell (Module für eigene HTML und Text-Variante davon)
Globales StyleSet
Typischerweise werden hier die Farben, Schriftarten und andere Designparameter zentral festgelegt, um konsistente Styles sicherzustellen. So kann der Entwickler z.B. Firmenfarben als Farbschema hinterlegen (Primärfarbe, Sekundärfarbe, Hervorhebungsfarben etc.), die dann im gesamten Objekt (z.B. als Hintergrundfarbe für Module oder als Button-Farbe) verwendet werden.
Button-Designs: In den PowerSet-Templates sind üblicherweise drei Button-Stile vorgesehen, um verschiedene Arten von Call-to-Action zu ermöglichen: Umrandet, Gefüllt und TextOnly.
Arbeiten mit dem PowerSet
Zur Erstellung und Bearbeitung von eMailings arbeiten Sie als Redakteur im "Creator-Mode". Das PowerSet 2 bietet eine Vielzahl flexibler, vorkonfigurierter Module, die auf bewährten Best Practices basieren. Die Module sind so konzipiert, dass sie vielseitig nutz- und konfigurierbar sind. Im Vorfeld kann das Template nach individuellen Vorgaben und Anforderungen angepasst werden.
Der E-Mail Designer gliedert sich in zwei Bereiche, den Canvas und die Sidebar.
- Im Canvas befindet sich das eMailing.
- In der Sidebar liegen die Module, Artikel sowie sämtliche Einstellungen.
Als Module werden die konfigurierbaren und verwendbaren Inhaltsbausteine des Editors bezeichnet, die im eMailing verwendet werden können. Die Module werden per Drag & Drop auf dem Canvas platziert und anschließend inhaltlich und optisch bearbeitet. Sobald ein Modul auf dem Canvas platziert wurde, wird es als Modul-Instanz bezeichnet und kann bearbeitet werden.
Der Canvas und die Sidebar im Content Creator
Canvas
Im Canvas wird eine Vorschau des eMailings dargestellt. Es werden alle Inhaltsbausteine (Modul-Instanzen) und Artikel angezeigt, aus denen das eMailing besteht. Mit den Griffleisten können Artikel und Modul-Instanzen auf dem Canvas, verschoben werden.
Oben im Canvas liegt die Vorschau für Desktop, Tablet und Smartphone
Dropareas, Sub-Dropareas und Slots
Die aktiven Bereiche im Canvas, in denen Module per Drag & Drop platziert werden können, werden als Dropareas bezeichnet.
Manche Module können eigene Dropareas, sogenannte Sub-Dropareas enthalten. Diese erlauben wiederum das Platzieren von weiteren Modulen. Weitere Verschachtelungen sind nicht möglich.
Um ganze Artikel per Drag & Drop platzieren zu können werden sogenannte Artikel-Slots benötigt. Diese Artikel-Slots erlauben ausschließlich die Platzierung von Artikeln.
Platzieren eines Bild-Modules in den Canvas
Sidebar
Die Sidebar besteht aus drei Bereichen: Module, Artikel und Einstellungen.
Module: Hier befinden sich alle Module, die im PowerSet 2 verfügbar sind. Module können per Drag & Drop auf den Canvas in verfügbare Dropareas gezogen werden und erzeugen dort Modul-Instanzen (verwendete Module). Wenn ein Modul mehrfach auf dem Canvas platziert wird, entstehen mehrere voneinander unabhängige Modul-Instanzen.
Der Module-Bereich der Sidebar mit Layouts, Komponenten und Elementen
Artikel: Hier werden die zuletzt im Mandanten bearbeiteten Artikel aufgelistet. Diese können per Drag & Drop in die verfügbaren Artikel-Slots gezogen werden. Weitere Artikel können über das Suchfeld gesucht und anschließend verwendet werden. Um einen Artikel-Slot zu erstellen, muss zunächst entweder die Komponente "Artikel (CMS)" oder "Artikel (Liste)" auf dem Canvas per Drag & Drop positioniert werden. Es können auch mehrere dieser Artikel-Komponenten verwendet werden.
Der Artikel-Bereich der Sidebar
Einstellungen: im Reiter Einstellungen können die Grundeinstellungen wie z.B. Breite, Farben und Schriftarten definiert werden, auf welche die Module des eMailings zugreifen. Bei einem mehrsprachigen Einsatz können über Sprachcontainer verschiedene Sprachen ausgewählt werden, welche übersetzte Inhalte in die jeweilige Vorlage über Variablen übernehmen.
Der Bereich Einstellungen der Sidebar
Einfügen von Inhalten (Content)
Das Grundprinzip des E-Mail Designers basiert auf Modulen, die sich untergliedern in Layout-Module, Elemente und Komponenten. Es gibt unterschiedliche Möglichkeiten, Content-Inhalte in Modulen umzusetzen. Diese verschiedenen Herangehensweisen sind miteinander kombinierbar und decken somit eine Vielzahl an Fällen ab.
- Sie können ein eMailing ausschließlich mit Einzelelementen (Elemente) umsetzen. Dabei sind Sie bei der Positionierung der Elemente weitestgehend frei, insbesondere wenn Sie zusätzlich Layout-Module zur Positionierung nutzen. Elemente sind einfache Module, die einzelne Bestandteile eines eMailings abbilden (z.B. Bild, Text, Button, Trenner, etc.).
- Alternativ oder ergänzend können Sie Ihr eMailing auch mit den bereits vorgefertigten Komponenten erstellen. Mit nur einem Drag-and-Drop-Vorgang lässt sich beispielsweise das Editorial mühelos erstellen.
- Zusätzlich können Sie mit Artikeln arbeiten, die über die beiden Komponenten "Artikel (CMS)" und "Artikel (Liste)" eingebunden werden können. Dadurch werden Artikel, die als eigenständige Objekte in Evalanche vorhanden sind, im E-Mail Designer verwendet (siehe auch Canvas (Drop Area) / Artikel). Allgemeine Informationen zu Artikeln in Evalanche finden sie auch unter: Artikel erstellen und konfigurieren. Beim Artikel (CMS) Modul muss darauf geachtet werden, dass jedes verwendete Modul einen eigene Slot konfiguriert hat.
- Die zusätzlich vorhandenen Layout-Module unterstützen bei der Gestaltung des eMailings. Es können beispielsweise zwei- oder dreispaltige Bereiche definiert werden, um einzelne Elemente flexibel zu positionieren. Auch können zwei- und dreispaltige Artikel eingebunden werden. Eine Vielzahl an Gestaltungsmöglichkeiten lassen sich hiermit umsetzen.
Hinweis!
Die Verwendung von Artikeln im E-Mail Designer bringt sowohl Vorteile als auch Nachteile mit sich.
Vorteil: nur Artikel bieten eine Statistik zu den Artikeln
Nachteil: die Artikel sind gegenwärtig nicht im E-Mail Designer bearbeitbar. Änderungen in den Artikeln in Evalache werden erst nach Neustart des E-Mail Designer, durch Speichern eines anderen Moduls oder durch manuellem Refresh übernommen. Das Hinzufügen, Entfernen und Verschieben von Artikeln in Slots hingegen wird instantan gespeichert, ohne dass der Speicher-Button blau wird.
Bearbeitung einer Modul-Instanz
Wird eine Modul-Instanz, also ein im Canvas verwendetes Modul, angeklickt, wechselt die Ansicht der Sidebar in die individuelle Bearbeitungsmaske. Hierüber kann die Modul-Instanz kopiert, gelöscht oder bearbeitet werden. Zudem stehen je nach Modul-Instanz unterschiedliche Eingabeelemente (Input-Widgets) zur Verfügung, um die verschiedenen Inhalte zu bearbeiten.
Beispiel eines Moduls und seiner Einstellungen
Hinweis!
Die Sichtbarkeit einer Modul-Instanz lässt sich optional durch die Zuweisung einer spezifischen Zielgruppe einschränken. Nach dem Versand wird die Modul-Instanz dann ausschließlich für die Profile der ausgewählten Zielgruppe angezeigt.
Ein einfacher Inhalts-Baustein als Beispiel-Modul
In diesem Modul werden alle Inhalte wie Texte und Bilder in die entsprechenden Eingabeelemente eingegeben. Spezielle Eingabeelemente wurden verwendet, um z.B. die Bildausrichtung oder das Teilungsverhältnis (Bild/Text) einstellbar zu machen. Unter dem Reiter Personalisierung kann eine Zielgruppe eingefügt werden, für die der Inhalt des Moduls ausschließlich angezeigt werden soll.
Die Input-Widgets können je nach Modul variieren
Wichtige Hinweise für eine barrierefreie Newslettergestaltung
Das E-Mail PowerSet 2 wurde mit dem Ziel der Barrierefreiheit entwickelt. Der zugrunde liegende Code erfüllt alle erforderlichen Kriterien, um den Anforderungen an Barrierefreiheit gerecht zu werden.
Ihr Beitrag als Redakteur aber ist entscheidend, um Barrierefreiheit zu gewährleisten und sicherzustellen, dass alle Empfänger die Inhalte problemlos verstehen und nutzen können.
Folgende konkrete Schritte sind erforderlich, um E-Mails barrierefrei umzusetzen. Die beschriebenen Felder sollten daher in jeder E-Mail vollständig ausgefüllt werden.
Vergeben Sie einen Titel
Bei der Gestaltung barrierefreier eMailings spielt die Vergabe von Dokumententiteln eine wichtige Rolle. Der Titel im dient als erste Orientierung für Nutzer von Screenreadern und erscheint in den Tabs des Browsers. Er sollte prägnant und aussagekräftig sein, um den Inhalt der Seite treffend zu beschreiben und eine schnelle Navigation zu ermöglichen.
Um einen Dokumententitel zu vergeben, klicken Sie auf den Reiter „Einstellungen“. Im Feld „Titel Browser-Tab“ kann der Titel eingetragen werden. Wichtig ist zu speichern, damit die Einstellungen übernommen werden.
Wählen Sie die Sprache
Die Vergabe der Sprache im spielt ebenfalls eine wichtige Rolle bei der Erstellung barrierefreier eMailings. Dies ermöglicht Screenreadern und anderen assistiven Technologien, den Inhalt korrekt zu interpretieren und auszusprechen. Durch die Sprachdeklaration wird sichergestellt, dass Nutzer mit Sehbehinderungen oder Leseschwächen den Titel der Seite in der richtigen Sprache vorgelesen bekommen, was das Verständnis und die Navigation erheblich erleichtert.
Die Sprache des eMailings wird über den eingestellten Sprach-Container geregelt. Dieser ist bereits bei Neuanlage eines eMailings voreingestellt und wurde nach Ihren Vorgaben ausgefüllt. In den meisten Fällen müssen Sie nichts tun. Es sei denn Sie wollen die Sprache des eMailings ändern. In einem solchen Fall gehen sie in den Reiter „Einstellungen“ und scrollen ganz nach unten. Dort befindet sich ein Objektpicker mit einem bereits vorausgefüllten Sprachcontainer. Durch Klicken öffnet sich ein Drop Down Menü mit den vorhandenen Sprachcontainern, die ausgewählt werden können.
Vergeben Sie eine Hauptüberschrift
Die Verwendung einer H1-Überschrift ist ein wesentlicher Aspekt der Barrierefreiheit im Web. Sie dient als Hauptüberschrift und sollte den im Dokumententitel definierten Seiteninhalt widerspiegeln. Für Screenreader-Nutzer ist die H1 oft der erste inhaltliche Kontaktpunkt und hilft ihnen, sich schnell einen Überblick über den Hauptinhalt zu verschaffen. Eine klar definierte H1 verbessert zudem die Struktur und Lesbarkeit alle Nutzer.
Die Hauptüberschrift wird ebenfalls im Reiter „Einstellungen“ eingetragen. Nutzen Sie dafür das Feld „Überschrift“.
Verwenden Sie das Header-Modul
Das Header-Modul beinhaltet den wichtigen Darstellungssatz, das Logo und die für die Barrierefreiheit wichtige Vorlesefunktion. Die eingebaute Vorlesefunktion ist ein wichtiger Aspekt der digitalen Barrierefreiheit. Sie ermöglicht Menschen mit Sehbehinderungen oder Leseschwierigkeiten, den Titel der Seite akustisch wahrzunehmen und so schnell den Inhalt zu erfassen. Diese Funktion unterstützt nicht nur die Zugänglichkeit, sondern verbessert auch die Nutzererfahrung für alle Besucher, indem sie eine zusätzliche Möglichkeit der Informationsaufnahme bietet.
Das Header-Modul ist in den meisten Fällen voreingestellt und befindet sich im Reiter „Module“ im Bereich „Komponenten“. Das Modul kann per Drag&Drop auf dem Canvas platziert werden.
Verfassen Sie Alt-Texte für alle Bilder und Grafiken
Bei der Gestaltung barrierefreier eMailings ist die Vergabe ausführlicher Alt-Texte für Bilder und Grafiken von entscheidender Bedeutung. Diese Textalternativen ermöglichen es sehbehinderten Nutzern, die visuelle Information zu erfassen, indem Screenreader den Inhalt vorlesen. Zudem dienen Alt-Texte als Fallback, falls Bilder nicht geladen werden können.
In allen Modulen, die Bilder enthalten besteht die Möglichkeit Alt-Texte einzutragen. Das Einagefeld entsprechende befindet sich in der Bearbeitungsmaske des jeweiligen Moduls und heißt „Bild (Text)".
Eingabefeld für den Alt-Text im Modul "Bild"
Hinweis!
Feste Elemente, wie beispielsweise eine Logografik oder der Social Media Icons im Footer werden im Sprach-Container an zentraler Stelle gepflegt und beziehen sie auf alle eMailings, die diesen Sprach-Container verwenden.
Nutzen Sie unsere Checkliste
Um umfassende Barrierefreiheit zu erreichen, ist es zudem ratsam, die dafür nötigen Richtlinien sorgfältig zu beachten. Dabei geht es um Aspekte, wie beispielsweise eine einfache verständliche Sprache zu verwenden, aussagekräftige Alt-Texte für alle Bilder zu verwenden, „sprechende Links“ zu verwenden die den Zielinhalt eindeutig beschreiben, usw.
Wir haben daher folgenden Ressourcen für Ihre Unterstützung zusammengestellt:
- Unsere Hilfeseite zur Barrierefreiheit: https://help.evalanche.cloud/hc/de/articles/16889276390812-Leitfaden-Barrierefreiheit
- Eine ausführliche Checkliste "Barrierefreiheit für Redakteure" zum Download: https://help.evalanche.cloud/hc/article_attachments/17235527429404
Durch die sorgfältige Umsetzung dieser Richtlinien tragen Sie maßgeblich dazu bei, dass Ihre E-Mail-Kommunikation für alle Empfänger zugänglich und nutzbar ist.
Glossar
Creator: Diejenige Person, die ein eMailing- oder eine LeadPage erstellt oder bearbeitet und dabei die verfügbaren Module des Modul-Entwicklers sowie die Vorkonfiguration des eMailing-Templates nutzen kann.
Canvas / Leinwand: Gesamte Fläche, links von der Sidebar, welche das Mailing(-Template) anzeigt.
Input Widget: Eingabemöglichkeit für Werte in einem Modul. Z.B.: Texteingabe, Texteingabe mehrzeilig, Checkboxen, Color-Picker, usw.
Droparea / Sub Droparea: Bereich im Canvas, in welchem Module via Drag & Drop platziert werden können.
Modul-Typ: Definition der Modul-Eigenschaften, wie Input-Widgets und Source-Code. Wird vom Modul-Entwickler erstellt.
Modul: Verfügbares Modul in der Side-Bar eines Templates bzw. eines eMailings.
Modul-Instanz: In Benutzung befindliches Modul. Befindet sich im Editor bereits im Canvas.
Globales Konfigurations-Modul: Modul, welches für die globalen Einstellungen im Editor genutzt wird. Die Input-Widgets werden im Editor unter „Einstellungen“ angezeigt. Dieses Modul hat i.d.R. keine grafische Darstellung und benötigt daher im zugrunde liegenden Modul-Typen keinen Source-Code.
Artikel: eigenständiges Objekt innerhalb Evalanche, das in den E-Mail-Designer übernommen werden kann. Ein Artikel kann nur mittels der Komponenten "Artikel (CMS)" oder "Artikel (Liste)" eingebunden werden.