Dieses Handbuch erklärt, wie Sie im Stripo-Editor mobilfreundliche E-Mails erstellen können. Es konzentriert sich auf die praktische Einrichtung, die Layoutsteuerung und häufige Probleme bei der Darstellung auf Mobilgeräten und enthält klare Schritt-für-Schritt-Anleitungen und Beispiele, die Sie bei der Arbeit im Editor anwenden können.
Wichtige Erkenntnisse
- Sie können die mobile Version direkt bearbeiten, ohne das Ergebnis erraten zu müssen: Sie können im Editor zur mobilen Ansicht wechseln, beliebige Einstellungen vornehmen und sehen, wie diese auf Smartphones angezeigt werden.
- Sie können zunächst globale mobile Stile festlegen und dann bei Bedarf jeden Block einzeln anpassen: Mit Stripo können Sie in den allgemeinen Stilen grundlegende Regeln für Mobilgeräte definieren und diese bei Bedarf für jeden Streifen, jede Struktur oder jeden Block überschreiben.
- Sie können nicht nur das Aussehen, sondern auch die Anzeige auf Mobilgeräten steuern: Sie können Elemente auf Mobilgeräten ausblenden, die Stapelreihenfolge ändern, Abstände anpassen und entscheiden, welche Layouts in einer Reihe bleiben oder vertikal gestapelt werden.
Verstehen Sie, wie Stripo die mobile Anzeige handhabt
Was „mobilfreundlich” in Stripo bedeutet
Alle E-Mail-Vorlagen, die Sie mit Stripo erstellen, sind standardmäßig responsiv, sodass sich ihr Layout an kleinere Bildschirme anpasst. Sie können jedoch zusätzliche mobile Einstellungen vornehmen, damit die E-Mails auf Mobilgeräten genau so angezeigt werden, wie Sie es wünschen. Zu diesen Einstellungen gehören: Schriftgrößen, Schaltflächengrößen (einschließlich Schaltflächen in voller Breite), Abstände (Ränder und Abstände auf Mobilgeräten), das Stapelverhalten von Containern in Strukturen sowie das Ausblenden oder Einblenden einiger zusätzlicher Elemente auf Mobilgeräten.
Bitte beachten Sie, dass das Endergebnis vom E-Mail-Client abhängt: Mobilgeräte-spezifische Einstellungen basieren auf Medienabfragen, die von einigen Apps nicht unterstützt werden. In diesen Clients werden Mobilgeräte-Überschreibungen möglicherweise ignoriert, sodass die Mobilgeräteansicht wie die Desktop-Version aussieht.
Welche Änderungen gelten nur für Mobilgeräte?
Einstellungen, die nur für Mobilgeräte gelten, wirken sich auf die Darstellung der E-Mail auf Smartphones aus, nicht auf die Desktop-Version. Dazu gehören die Schriftgröße für Mobilgeräte, die Größe der Schaltflächen (einschließlich Schaltflächen in voller Breite), der Abstand (Ränder und Abstände auf Mobilgeräten), das Stapelverhalten von Containern in Strukturen und das Ausblenden von Elementen auf Mobilgeräten.
Wenn die mobilen Einstellungen keine Wirkung zeigen
Wenn die mobilen Steuerelemente inaktiv sind oder Änderungen nicht angezeigt werden, überprüfen Sie den Schalter für das responsive Design.
Responsives Design unter „Darstellung“
Verwenden Sie diese Option, wenn Sie mit den Einstellungen für die mobile Formatierung arbeiten:
1. Gehen Sie zu „Globale Stile und Layouts“.
2. Aktivieren Sie „Responsives Design“.
Wenn „Responsive Design“ deaktiviert ist, sieht die E-Mail auf Mobilgeräten wie die Desktop-Version aus, und der Abschnitt „Mobile Formatierung“ ist möglicherweise inaktiv.
Beginnen Sie mit einer sauberen Basis unter Verwendung der allgemeinen Stile
Wechseln Sie zwischen dem Desktop- und dem Mobil-Stilmodus
Mit den allgemeinen Stilen können Sie Standard-Designregeln separat für Desktop und Mobilgeräte definieren. Verwenden Sie die Geräteumschaltung im Bereich „Allgemeine Stile“, um zwischen Desktop und Mobil zu wechseln. Jeder Modus speichert seine eigenen Werte, sodass Änderungen, die im Mobilmodus vorgenommen werden, nur die mobile Ansicht betreffen, nicht die Desktop-Version.
Legen Sie das globale Layout und die Grundregeln für die gesamte E-Mail fest
Verwenden Sie „Allgemeine Stile“ → „Globale Stile und Layout“, um festzulegen, wie sich die gesamte E-Mail verhält, bevor Sie an einzelnen Streifen, Strukturen oder Blöcken arbeiten. Beachten Sie, dass nicht alle Desktop-Funktionen auch für Mobilgeräte verfügbar sind.
Wenn Sie jedoch sowohl für Desktop- als auch für Mobilgeräte entwickeln, können Sie Folgendes tun:
Schritt für Schritt: Globale Stile und Layout konfigurieren
Allgemeinen Hintergrund festlegen:
1. Wählen Sie eine allgemeine Hintergrundfarbe für den E-Mail-Nachrichtenbereich.
2. Auf einem Desktop-Computer bedeckt die Hintergrundfarbe den gesamten Nachrichtenbereich.
3. Auf Mobilgeräten wird dieser Hintergrund ausgeblendet.
Hintergrundbild hinzufügen (nur Desktop):
4. Wählen Sie ein Hintergrundbild aus und legen Sie dessen Position fest.
5. Aktivieren Sie „Hintergrundbild wiederholen”, wenn das Bild die gesamte Länge der Nachricht ausfüllen soll.
6. Hintergrundbilder werden nur auf dem Desktop gerendert und erscheinen nicht auf Mobilgeräten.
7. Einige E-Mail-Clients, darunter Outlook, zeigen möglicherweise überhaupt keine Hintergrundbilder an. Legen Sie daher eine Ersatz-Hintergrundfarbe fest, die der Bildfarbe ähnelt.
Festlegen der Breite und Ausrichtung des Nachrichteninhalts:
8. Breite und Ausrichtung sind nur bei einem Desktop-Design möglich.
9. Legen Sie die Breite des Nachrichteninhalts fest. Der Standardwert beträgt 600 px.
10. Sie können einen beliebigen Wert zwischen 320 und 900 px festlegen..
11. Wählen Sie die Ausrichtung der Nachricht.
Unterstreichung von Steuerungslinks:
12. Aktivieren oder deaktivieren Sie die Unterstreichung von Links für die gesamte E-Mail-Vorlage.
Textrichtung von rechts nach links aktivieren:
13. Aktivieren Sie die Textrichtung von rechts nach links für Sprachen, die RTL-Skripte erfordern, wie Arabisch oder Urdu.
Benutzerdefinierte Listenstile festlegen:
14. Legen Sie Aufzählungslistenstile fest, die für die gesamte E-Mail gelten sollen.
Standardabstände festlegen:
15. Standard-Struktur-Abstand festlegen. Dieser Abstand wird automatisch auf neue Strukturen angewendet.
16. Ränder um Nachricht festlegen, um den Abstand zwischen dem E-Mail-Inhalt und den Rändern des Nachrichtenbereichs zu steuern.
Diese Einstellungen schaffen eine einheitliche Grundlage für Desktop- und Mobilgeräte und reduzieren den Bedarf an späteren Anpassungen.
Typografie und Abstände für die Lesbarkeit auf Mobilgeräten steuern
Globale Streifentypografie
Schritt für Schritt: Streifentypografie nach Typ festlegen und Streifen optimieren
Globale Streifentypografie festlegen:
1. Gehen Sie zu Allgemeine Stile → Streifenstile.
2. Wählen Sie einen Streifentyp aus.
3. Legen Sie die Schriftfamilie, Zeilenhöhe und den Buchstabenabstand für Textblöcke fest. Diese Einstellungen haben keinen Einfluss auf Überschriften.
4. Sie können auch auf den Containerblock → Streifen klicken.
Streifenhintergründe festlegen:
5. Legen Sie die Hintergrundfarbe für den Streifen und seinen Inhalt fest.
6. Fügen Sie bei Bedarf ein Hintergrundbild hinzu.
7. Legen Sie eine Ersatz-Hintergrundfarbe fest, da einige Clients, darunter Outlook, möglicherweise keine Hintergrundbilder rendern.
Oder wenn Sie die Streifeneinstellung durch Klicken auf den Containerblock öffnen:
Legen Sie die Schriftgröße pro Streifentyp fest:
8. Legen Sie die Standardschriftgröße und Zeilenhöhe für jeden Streifentyp fest.
9. Verwenden Sie gegebenenfalls kleinere Schriftgrößen für den Fußzeilenstreifen.
Anpassen des Streifenabstands auf Mobilgeräten:
10. Wählen Sie einen bestimmten Streifen aus.
11. Legen Sie „Abstand auf Mobilgeräten“ fest, um den Abstand um den Streifen in der mobilen Ansicht zu steuern.
Streifen auf Mobilgeräten ausblenden:
12. Aktivieren Sie „Element auf Mobilgeräten ausblenden“, wenn ein Streifen auf kleinen Bildschirmen nicht angezeigt werden soll.
Streifenweite Typografie für verschiedene E-Mail-Bereiche
Streifen definieren große Abschnitte einer E-Mail und steuern, wie der Fließtext in wiederholten Layouts dargestellt wird. Jeder Streifen kann zu einem bestimmten Typ gehören, was ein einheitliches Styling ermöglicht.
Zu den Streifentypen gehören Kopfzeile, Inhalt, Fußzeile und Infobereich. Die Verwendung von Streifentypen hilft dabei, unterschiedliche Schriftgrößen und Abstandsregeln anzuwenden, z. B. kleinere Schrift in der Fußzeile.
Schritt für Schritt: Anwenden einer benutzerdefinierten Blockformatierung für Überschriften und Festlegen von Überschriftenstilen
Anwenden der Überschriftenformatierung:
1. Wählen Sie Text innerhalb eines Textblocks aus.
2. Wählen Sie im Textformatierungsmenü H1, H2 oder H3 aus.
3. Legen Sie im mobilen Modus die Textausrichtung für Überschriften fest, wenn die Desktop-Ausrichtung auf kleinen Bildschirmen nicht gut funktioniert.
Legen Sie benutzerdefinierte Überschriftenstile im Container fest:
4. Öffnen Sie „Stile“ und wechseln Sie mit der Geräteumschaltung zwischen „Desktop“ und „Mobil“.
5. Wählen Sie die Überschriftenebene aus, die Sie bearbeiten möchten.
6. Legen Sie Schriftfamilie, Zeichenabstand, Schriftgröße, Zeilenhöhe, Textstil und Schriftfarbe fest.
Erstellen Sie mobilfreundliche CTAs, die anklickbar bleiben
Standard-Buttons, die in der gesamten Vorlage funktionieren
Buttons auf Mobilgeräten müssen gut lesbar und leicht anzuklicken sein. Text, der kleiner als 18 px ist, verringert die Lesbarkeit und erhöht die Anzahl der Fehlklicks. Für mobile Buttons wird eine Schriftgröße von 18 px oder mehr empfohlen.
Globale Schaltflächenstile festlegen
Verwenden Sie allgemeine Stile, um das Erscheinungsbild der Schaltflächen einmalig für die gesamte E-Mail festzulegen, und passen Sie dann die Werte für Mobilgeräte separat an.
Schritt für Schritt: Globale Schaltflächenstile festlegen
Stile für offene Schaltflächen:
1. Gehen Sie zu „Allgemeine Stile“ → „Schaltflächenstile“.
2. Wechseln Sie mit dem Geräteumschalter zwischen „Desktop“ und „Mobil“.
Typografie festlegen:
3. Wählen Sie die Schriftfamilie aus.
4. Legen Sie die Schriftgröße und Textfarbe fest.
5. Wählen Sie den Textstil und den Zeichenabstand aus.
Form und Farbe der Schaltfläche festlegen:
6. Hintergrundfarbe der Schaltfläche festlegen.
7. Rahmen konfigurieren, entweder für alle Seiten oder einzeln.
8. Rahmenfarbe und Rahmenradius festlegen.
9. Interne Abstände hinzufügen.
Breite der Steuerungsschaltfläche:
10. Aktivieren Sie „An Container anpassen“, damit sich die Schaltflächen an die Breite des Containers anpassen (nur Option für Desktop).
Outlook-Darstellung verbessern:
11. Aktivieren Sie die Unterstützung von Outlook, um die VML-basierte Darstellung für eine bessere Schaltflächenanzeige in Outlook-Clients anzuwenden.
Hover-Stile für Desktop festlegen:
12. Konfigurieren Sie die Hintergrund- und Textfarben für Hover-Effekte für die Desktop-Interaktion.
13. Diese Stile werden angewendet, wenn der Cursor über der Schaltfläche platziert wird.
Arbeiten Sie direkt in der mobilen Ansicht innerhalb des Editors
Wechseln Sie während der Bearbeitung zwischen Desktop und Mobilgerät
Mit Stripo können Sie die mobile Version bearbeiten, ohne den Editor zu verlassen.
Schritt für Schritt: Zwischen den Ansichten wechseln
1. Verwenden Sie die Geräteumschaltung in der oberen Symbolleiste.
2. Wählen Sie „Desktop“ oder „Mobilgerät“, um die entsprechende Version in der Vorschau anzuzeigen und zu bearbeiten.
3. Nehmen Sie Änderungen in der aktiven Ansicht vor. Desktop und Mobilgerät speichern separate Werte, sofern dies unterstützt wird.
Beherrschen Sie das Strukturverhalten auf Mobilgeräten
Responsive Struktur: Stapeln oder in einer Reihe bleiben
Wie Sie bereits wissen, steuert die responsive Struktur, wie sich Container auf Mobilgeräten verhalten. Wenn sie aktiviert ist, werden Container vertikal gestapelt. Wenn sie deaktiviert ist, bleiben Container in einer einzigen Reihe. Das Deaktivieren ist nützlich, wenn Sie auf Mobilgeräten nebeneinander angeordnete Layouts wünschen, z. B. Produktkarten oder kleine Grafiken mit kurzem Text.
Containerumkehrung: Steuerung der Inhaltsreihenfolge
In responsiven Layouts ist die Reihenfolge der Container wichtig. Befindet sich der Text links und das Bild rechts, kann es durch das Stapeln vorkommen, dass der Text über dem Bild platziert wird. Dies ist für das Lesen auf Mobilgeräten oft unerwünscht.
Schritt für Schritt: Containerumkehrung aktivieren
1. Wählen Sie eine Struktur mit zwei Containern aus (klicken Sie auf „Struktur auf Containern“).
2. Aktivieren Sie die Containerumkehrung auf Mobilgeräten.
3. Zeigen Sie eine Vorschau der mobilen Ansicht an, um zu überprüfen, ob die Reihenfolge korrekt ist.
Beachten Sie: Die Containerumkehrung funktioniert nur bei Strukturen mit zwei Containern.
Abstand zwischen Containern hinzufügen
Mobile Layouts benötigen oft zusätzlichen Platz zwischen den Containern, um überfüllte Inhalte zu vermeiden.
Schritt für Schritt: Containerabstand auf Mobilgeräten verwenden
1. Wählen Sie die Struktur aus.
2. Legen Sie den Containerabstand auf Mobilgeräten fest, um Abstand zwischen den Containern hinzuzufügen.
Struktur- und Containerabstände auf Mobilgeräten anwenden
Verwenden Sie mobile Abstände, um den Abstand anzupassen, ohne das Desktop-Layout zu ändern.
Schritt für Schritt: Abstand auf Mobilgeräten für eine Struktur festlegen
1. Wechseln Sie zur mobilen Ansicht.
2. Wählen Sie die Struktur aus.
3. Legen Sie den Abstand auf Mobilgeräten fest..
Diese Einstellungen gelten nur für Mobilgeräte und lassen den Abstand auf Desktop-Geräten unverändert.
Mobile Bildbearbeitung, die Verzerrungen, Bildlauf und schlechtes Zuschneiden verhindert
Responsive Bilder: Wann sollte diese Funktion aktiviert werden?
Große Bilder können auf Mobilgeräten zu horizontalem Scrollen führen oder überdimensioniert erscheinen. Responsive Bilder passen die Bildbreite an den Bildschirm des Geräts an und verhindern diese Probleme. Diese Steuerung funktioniert auf Geräten, die Medienabfragen unterstützen.
Kleine Bilder (Logos): Unerwünschte Streckung verhindern
Kleine Bilder, wie z. B. Logos, sollten nicht auf die gesamte Bildschirmbreite gestreckt werden.
Schritt für Schritt: Responsive Bilder für kleine Bilder deaktivieren
1. Wechseln Sie zur mobilen Ansicht.
2. Wählen Sie das Bild aus.
3. Deaktivieren Sie die Option „Responsive Bild“.
4. Legen Sie die gewünschte Bildgröße manuell fest.
Bildstandards für E-Mail-Vorlagen auf Mobilgeräten
Für eine stabile Darstellung auf allen Geräten und Clients:
- verwenden Sie die Formate JPEG, GIF oder PNG;
- halten Sie die Bildbreite zwischen 600 und 800 px;
- testen Sie Bilder in der mobilen Vorschau und in echten Clients.
Hintergrundbilder auf Mobilgeräten: Was ist möglich und was nicht?
Hintergrundbilder haben feste Größen und passen sich nicht wie normale Bilder an die Bildschirmbreite an. Sie können die Position und Größe von Hintergrundbildern anpassen, um das Erscheinungsbild zu verbessern, aber die Ergebnisse variieren je nach Client.
Zu beachtende Darstellungsbeschränkungen:
- hintergrundbilder auf Containern, Strukturen und Streifen werden in Outlook nicht angezeigt;
- das globale Hintergrundbild wird auf dem Desktop dargestellt, erscheint jedoch nicht auf Mobilgeräten.
Legen Sie bei der Verwendung von Hintergrundbildern immer eine Ersatzhintergrundfarbe fest.
Blockweise Bereinigung für bessere Lesbarkeit auf Mobilgeräten
Beheben Sie unschöne Zeilenumbrüche in Textblöcken
Auf Mobilgeräten kann Text ungleichmäßig in Zeilen umgebrochen werden. Häufig kommt es vor, dass ein einzelnes Wort in eine separate Zeile verschoben wird, was die Lesbarkeit beeinträchtigt.
Schritt für Schritt: Zeilenumbrüche korrigieren
Schriftgröße auf Mobilgeräten reduzieren:
1. Wechseln Sie zur mobilen Ansicht.
2. Wählen Sie den Textblock aus.
3. Verringern Sie unter „Stile“ die Schriftgröße für Mobilgeräte, bis der Text sauber in eine Zeile passt.
Ausrichtung und Abstände anpassen:
4. Überprüfen Sie die Textausrichtung.
5. Verringern Sie die Abstände links und rechts, da große Abstände zu unerwünschten Zeilenumbrüchen führen können.
Zeilenumbruch für eine bestimmte Zeile deaktivieren:
6. Wählen Sie die Textzeile aus.
7. Aktivieren Sie „Zeilenumbruch deaktivieren”.
8. Verwenden Sie diese Option mit Bedacht. Lange Zeilen mit deaktiviertem Zeilenumbruch passen möglicherweise nicht auf den mobilen Bildschirm und können zu einem horizontalen Bildlauf führen.
Fehlerbehebung: Wenn Ihre E-Mail nach dem Senden nicht mehr reagiert
Warum eine responsive E-Mail auf Mobilgeräten wie die Desktop-Version aussehen kann
Einige mobile E-Mail-Apps unterstützen keine Medienabfragen. Während des Sendens oder Exportierens entfernen bestimmte E-Mail-Clients responsive CSS aus dem Code. In diesem Fall werden mobilgeräte-spezifische Stile entfernt und die E-Mail wird auf Mobilgeräten wie eine Desktop-Version dargestellt.
Fallbeispiel Gmail: Medienabfragen werden nach dem Versand aus Gmail entfernt
Gmail entfernt responsive CSS-Stile, wenn E-Mails direkt aus Gmail versendet werden. Infolgedessen kann die mobile Version nicht responsiv erscheinen.
Schritt für Schritt: Behalten Sie die Reaktionsfähigkeit für Gmail bei
1. Exportieren Sie die E-Mail in einen ESP, der Medienabfragen unterstützt.
2. Senden Sie die E-Mail von diesem ESP an Gmail.
In diesem Ablauf behält die E-Mail ihr reaktionsfähiges Verhalten in Gmail bei.
Outlook-Fall: Das Responsive-Verhalten unterscheidet sich je nach Version und App
Nicht alle Versionen von Outlook unterstützen Responsive Design. Einige entfernen automatisch Responsive-Stile, was zu einer nicht responsiven Darstellung auf Mobilgeräten führt.
Zu beachtende Unterschiede beim Testen:
- von Stripo an Outlook.com gesendete Test-E-Mails können auf Mobilgeräten responsiv sein.
Checkliste für die mobile Qualitätssicherung vor dem Export
Bevor Sie eine E-Mail exportieren oder versenden, überprüfen Sie die mobile Version im Editor.
Überprüfen Sie in der mobilen Vorschau Folgendes:
- typografie: Überschriftengrößen, Lesbarkeit des Fließtextes, Zeilenumbrüche;
- ränder und Abstände: Abstände um Streifen, Strukturen, Container und Blöcke;
- schaltflächen: Textgröße, Tippbereich und Verhalten bei voller Breite, wo erforderlich;
- verhalten von Containern: Stapelreihenfolge, Umkehrung und Abstände zwischen Containern;
- ausgeblendete Elemente: Stellen Sie sicher, dass auf Mobilgeräten ausgeblendete Elemente nicht angezeigt werden.
- bilder: Responsives Verhalten, Logogröße und Fallbacks für Hintergrundbilder;
- horizontaler Bildlauf: Überprüfen Sie auf breite Bilder, große Schriftarten oder nicht responsive Strukturen.
Testen Sie die E-Mail nach der Vorschau im Editor auf verschiedenen Geräten und E-Mail-Clients. Das Verhalten der Clients variiert, insbesondere auf Mobilgeräten, und Tests auf realen Geräten helfen dabei, Probleme zu erkennen, die in der Vorschau möglicherweise nicht sichtbar sind.
Zusammenfassung
Das Design mobiler E-Mails hängt sowohl von den Einstellungen des Editors als auch vom Verhalten des E-Mail-Clients ab. Indem Sie in den allgemeinen Stilen eine solide Grundlage schaffen, mit der mobilen Formatierung schnelle Anpassungen vornehmen und Strukturen, Bilder und Texte direkt in der mobilen Ansicht optimieren, können Sie steuern, wie sich E-Mails auf kleinen Bildschirmen verhalten. Überprüfen Sie vor dem Versenden immer die mobile Vorschau und testen Sie die E-Mails in verschiedenen Clients, insbesondere wenn Gmail oder Outlook Teil Ihres Workflows sind.
0 Kommentare