Responsive-Vorschau Funktion

  1. Home
  2. rapidmail Hilfe
  3. Darstellung
  4. Responsive-Vorschau Funktion

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:


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


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:


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:


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:


So erreichen Sie genau den gewünschten Effekt:


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.

 

War dieser Artikel hilfreich?

Ähnliche Artikel