Unser Versprechen an Sie: rapidmail ist auch weiterhin voll für Sie da.
Wir wissen, wie wichtig die Kommunikation mit Kunden und Partnern aktuell ist. Sie können sich auch jetzt zu 100 % auf uns und unsere Software verlassen!

Responsive-Vorschau Funktion vor dem Newsletter-Versand

Responsive bedeutet, dass der Newsletter-Inhalt der Bildschirmbreite des Ausgabegeräts angepasst wird. Gewisse Inhalte, welche auf dem Desktop nebeneinander dargestellt werden, werden auf dem Smartphone untereinander angeordnet. Unsere Vorlagen, sowie die Newsletter die Sie in unserem Editor anlegen, sind automatisch responsive!

Sie finden die Responsive-Vorschau direkt über dem Editor:

Responsive-Vorschau Funktion 1


In der Vorschau-Funktion haben Sie die Möglichkeit, verschiedene Endgeräte und verschiedene Auflösungen einzustellen:

Responsive-Vorschau Funktion 2


Hier einmal ein Beispiel, wie sich verschiedene Responsive-Elemente verhalten: Wir möchten 3 unterschiedliche Produkte mit 3 unterschiedlichen Produktbildern und –Texten in den Newsletter einfügen. Auf den ersten Blick naheliegend wäre, hier einfach ein Bildelement mit 3 Spalten anzulegen. Und darunter entsprechend ein Textelement mit 3 Spalten, so dass jeweils das Produktbild oben zum Produkttext unten passt. Im Entwurf und auf dem Desktop sieht das auch gut aus, Bild und Text passen jeweils zusammen:

Responsive-Vorschau Funktion 3


Die Responsive-Vorschau zeigt auch bei Darstellung auf Desktop oder Tablet keine Auffälligkeiten. Das Problem  wird aber sichtbar, wenn man die Smartphone-Vorschau prüft:

Responsive-Vorschau Funktion 4


Die 3 Bilder, welche eigentlich nebeneinander stehen sollten, sind nun direkt untereinander, erst nach den Bildern kommen dann die Texte untereinander.

Was ist der Grund für diese Darstellung?
Aufgrund der Bildschirmbreite werden die Element entsprechend umgebrochen, was zuvor 3 Bilder nebeneinander sind, sind nun 3 Bilder untereinander, ebenso bei den Texten. Die Responsive-Darstellung ist also korrekt, allerdings stimmt die Zuordnung Bild zu Text nicht mehr.

Wie kann man stattdessen vorgehen?
Um mehrere Produktbilder mit entsprechenden Texten darzustellen, nutzen Sie das Element Bild + Text vertikal mit drei Spalten:

Responsive-Vorschau Funktion 5


So erreichen Sie genau den gewünschten Effekt:

Responsive-Vorschau Funktion 6


Nutzen Sie also die Vorschau-Funktion, um die Darstellung Ihres Newsletters auf verschiedenen Geräten zu testen. Wenn Sie bereits die Empfängerliste ausgewählt haben, können Sie hier auch die Personalisierung testen.


Ähnliche Artikel