Dynamische Inhalte

In diesem Abschnitt werden die Funktionen zur Optimierung der Lesbarkeit und Responsiveness Ihrer Designs für mobile Geräte beschrieben. Obwohl die Standardeinstellungen des Editors auf eine universelle Nutzbarkeit abzielen, möchten Sie vielleicht einige Verhaltensweisen anpassen.

Nicht jedes Design profitiert von den Standardeinstellungen für Mobilgeräte. So kann beispielsweise das Stapeln von Spalten (siehe unten) Navigationsleisten oder andere einzigartige Designelemente verzerren. Daher sollten Sie Ihre Designs immer in der Vorschau anzeigen und auf verschiedenen Geräten testen.

Im Design-Editor können Sie zwischen dem Desktop-Designmodus (Standard) und dem mobilen Designmodus umschalten, der Ihr Design so anzeigt, wie es auf einem kleinen Handy-Bildschirm dargestellt würde. Im mobilen Modus wird der Inhaltsbereich des Editors auf einen festen Wert von 320 Pixel reduziert. Dieser Modus bietet einen grauen Hintergrund für bessere Sichtbarkeit, der jedoch nicht Teil des Designs ist. Sie können jederzeit zwischen Desktop- und Mobilmodus umschalten.

Einige Stileinstellungen können für Desktop- und mobile Clients unterschiedliche Werte haben. Im mobilen Designmodus sind diese mit dem Label  (Mobil) im Seitenbereich gekennzeichnet. Wenn Sie einen solchen Wert im mobilen Modus ändern, bleibt der Wert im Desktop-Modus davon unberührt und es werden für jede Zielplattform unterschiedliche Werte zum Rendern des Elements verwendet.

Für diese Einstellungen sind mobil-Stile verfügbar:

Voraussetzungen: Sie sehen ein Design im Editor.

Die Verwendung mehrerer Spalten nebeneinander funktioniert gut auf Desktop-Bildschirmen, kann aber auf kleineren mobilen Bildschirmen ein schwierig sein. Die Spaltenoption Stapeln (mobil) steuert, ob die Spalten auf Mobilgeräten übereinander statt nebeneinander angezeigt werden.

Die Option ist standardmäßig aktiviert, da sie in den meisten Fällen die Lesbarkeit verbessert. Wenn Stapeln (mobil) aktiviert ist, gibt es eine zusätzliche Option Stapelreihenfolge (mobil), mit der Sie die Stapelreihenfolge der Spalten in der mobilen Ansicht umkehren können.

Die standardmäßige vertikale Stapelung wird von vielen mobilen Browsern und E-Mail-Clients unterstützt. Im Allgemeinen wird empfohlen, die vertikale Stapelung für ein mobilfreundlicheres Layout zuzulassen. Einige E-Mail-Clients, die keine CSS-Unterstützung bieten, verwenden jedoch standardmäßig das Desktop-Layout.

Sie können jede Reihe oder jedes Inhaltselement sowohl auf mobilen als auch auf Desktop-Clients ausblenden. Wenn ein Inhalt in Ihrem aktuellen Design-Modus ausgeblendet ist, finden Sie ein augenförmiges Symbol neben dem Umschalter für den Designmodus. Dieses Symbol dient als Umschalter für die Sichtbarkeitseinstellung des Editors. Wenn es aktiviert ist, können Sie Inhalte sehen, die auf dem Gerätetyp, der Ihrem aktuellen Designmodus entspricht, ausgeblendet sind. Ausgeblendete Inhalte werden unscharf dargestellt. Um ausgeblendete Inhalte zu bearbeiten, wechseln Sie in den Design-Modus, in dem sie sichtbar sind.

Voraussetzungen: Sie sehen ein Design im Editor.

Wenn Sie ein Objekt auf einer Platform ausblenden, wird es automatisch auf der anderen Plattform sichtbar. Um es auf beiden Plattformen anzuzeigen, klicken Sie auf  (nicht ausblenden).

Sie können für jede Reihe in einem E-Mail-Design Anzeigebedingungen definieren, um zu steuern, welche Empfänger diese Reihe sehen. Dies funktioniert durch Zuweisung einer oder mehrerer Zielgruppen. Wenn Sie einer Reihe mehrere Zielgruppen zuweisen, wird diese Reihe allen Benutzern angezeigt, die einer dieser Zielgruppen angehören.

Voraussetzungen: In ihrem Mandanten ist mindestens eine Zielgruppe verfügbar. Sie sehen ein E-Mail-Design im Design-Editor.

Voraussetzungen: Sie sehen ein E-Mail-Design im Design-Editor.

Mit Merge-Tags können Sie textbasierte Elemente in E-Mail-Nachrichten individualisieren. Es gibt zwei Datenquellen für Merge-Tags:

Im Design-Editor werden Platzhalter als Name des Merge-Tags in geschweiften Klammern angezeigt (z. B. ). In der E-Mail-Nachricht für den Empfänger wird dies durch den Wert des Platzhalter-Tags für den jeweiligen Kontext ersetzt (z. B. "Marie").

Die Feldfunktionen in Ihrem Client sind automatisch als Merge-Tags im Design-Editor verfügbar. Zusätzlich können Empfängerlistenfelder ausgewählt werden, wenn ein Empfängerlistenknoten konfiguriert und mit dem Nachrichtenknoten verbunden ist.

Voraussetzungen: Sie sehen ein E-Mail-Design im Design-Editor.

Voraussetzungen: Sie sehen ein E-Mail-Design im Design Editor.

Dynamische Bilder sind ein beliebter Anwendungsfall für benutzerdefiniertes HTML. Ein dynamisches Bild kann nach ihren eigenen Bedingungen angepasst werden, beispielsweise abhängig davon, wer ein Design aufruft oder wann es aufgerufen wird.

Ein solches Bild kann zum Beispiel eine Anrede enthalten, die den Namen des Betrachters verwendet. Dies kann durch Hinzufügen eines JavaScript-Programms in ein benutzerdefiniertes HTML-Element erreicht werden. Dieses JavaScript-Programm muss die On-Page-Funktionalität für das folgende Verfahren bereitstellen:

Sie senden jedem Betrachter einen benutzerdefinierten Link mit URL-Parametern, die benutzerspezifische Informationen enthalten (z. B. einen Namen). Das JavaScript-Programm verarbeitet dann die URL-Parameter und ändert den HTML-Code eines Bildelements so, dass die Bildquelle zu einer Anfrage an einen externen Dienst wird. Der externe Dienst liefert ein angepasstes Bild, das auf den Informationen in der Anfrage basiert.

Die Anzeige von dynamischen Bildern im Design-Editor kann problematisch sein, weil der Editor nicht die nötigen URL-Parameter kennt, um Bilder für die HTML <img>-Elemente anzufordern. Zur Vermeidung dieses Problems dient der Umschalter Dynamisches Bild in den Bildeigenschaften im Seitenbereich. Wenn Dynamisches Bild aktiv ist, können sie zwei Quellen für ein Bildelement angeben:

Nehmen wir an, Sie haben einen Kunden, den Sie mit seinem Vornamen John in einem Bild auf einer Landingpage ansprechen möchten. Wir gehen davon aus, dass es unter my-image-generator.com einen Dienst gibt, der eine HTTP-Anfrage verarbeiten kann, um ein individuelles Bild für Ihre Landing Page bereitzustellen. Sie können jeden Dienst mit dieser Funktionalität verwenden.

Sie senden John einen Link, der seinen Namen als URL-Parameter enthält:

Wenn John diesen Link in seinem Browser öffnet, wird die Landingpage mit einem dynamischen Bild geladen, das den Platzhalter  im src-Attribut hat:

Das JavaScript aus dem benutzerdefinierten HTML-Element extrahiert den Wert "John" aus dem Link, mit dem John die Seite aufgerufen hat, und benutzt diesen Wert, um das Bild-Element zu verändern, sodass es eine Anfrage mit dem Wert "John" an den externen Bilddienst stellt:

Dieses letzte Code-Beispiel ist im Quellcode der Landingpage nicht zu sehen, aber es zeigt, welche Anfrage an den externen Dienst gestellt wird. Das Bild, das der externe Dienst bereitstellt, wird dann benutzt um die Landingpage so zu rendern, wie John sie sieht.