Bei der Gestaltung mobiler E-Mails zählt zuerst die Lesereihenfolge: Kunden sollten Angebot, wichtige Bedingungen und nächsten Schritt ohne Zoomen verstehen. Ein Produktgitter, das auf dem Desktop großzügig wirkt, kann auf einem Smartphone zu winzigen Bildern werden. Richten Sie den Aufbau zuerst auf den kleineren Lesebereich aus und prüfen Sie anschließend, was bei längerem Text, fehlenden Bildern oder gestapelten Spalten passiert.
Sorgen Sie für eine klare Lesereihenfolge
Verwenden Sie für die Hauptnachricht einen einfachen einspaltigen Aufbau. Ordnen Sie Versprechen, Erläuterung und Hauptaktion so an, dass sie auch ohne Bilder verständlich bleiben. Weitere Produktblöcke sollten die Hauptaktion unterstützen, statt mit ihr zu konkurrieren.
Lassen Sie wichtige Inhalte als echten Text stehen. Niemand sollte in ein Werbebild zoomen müssen, um Angebot oder Bedingungen zu erkennen. Wählen Sie eine E-Mail-kompatible Schrift und eine angenehme Textgröße; 16 Pixel sind ein sinnvoller Ausgangspunkt, den Sie in der echten Darstellung testen sollten. Längere Übersetzungen brauchen meist mehr Platz nach unten, keine kleinere Schrift.
Richten Sie den ersten Bildschirm auf eine Entscheidung aus
Skizzieren Sie zuerst die schmale Ansicht und ordnen Sie erst danach ein Desktop-Gitter an. Bei einer Produkteinführung könnte die Reihenfolge so aussehen: Produktname, ein Satz zum Verwendungszweck, ergänzendes Bild, Preisangabe und Schaltfläche. Auch wenn nur dieser erste Ausschnitt sichtbar ist, sollte das Angebot verständlich sein. Ein großes Dekobanner sollte hilfreiche Informationen nicht mehrere Bildschirme nach unten schieben.
Beginnen Sie bei Fließtext mit etwa 16 Pixeln und ausreichendem Zeilenabstand; prüfen Sie anschließend die versendete E-Mail. Das sind Gestaltungsrichtwerte, keine Vorschrift, dass Beschriftungen und Überschriften gleich groß sein müssen. Heben Sie Überschriften gut vom Fließtext ab und lassen Sie genug Platz rund um die Hauptaktion. Eine überfüllte Gestaltung insgesamt zu verkleinern, ist meist die falsche Lösung.
Bei zwei Produktkarten sollten Bild, Titel, Preis und Link jeweils zusammenbleiben. Werden die Karten auf dem Smartphone untereinander angeordnet, sollte ein Produkt vollständig erscheinen, bevor das nächste beginnt. Vermeiden Sie einen Aufbau, der erst beide Bilder und danach beide Beschreibungen zeigt; Leser müssten sonst selbst herausfinden, welche Angaben zusammengehören.
Lassen Sie Komponenten mit ihrem Inhalt wachsen
Vermeiden Sie feste Texthöhen und manuelle Zeilenumbrüche, die nur eine ausgewogene Desktop-Überschrift erzeugen sollen. Lassen Sie Schaltflächen genügend Innenabstand für längere Beschriftungen und gestalten Sie die gesamte Fläche so, dass sie bequem angetippt werden kann. Zwischen nah beieinanderliegenden Links sollte genug Abstand sein, damit der Daumen nicht das falsche Ziel auswählt.
Verwenden Sie aussagekräftige Alternativtexte für informative Bilder und lassen Sie dekorative Bilder nicht unnötig stören. Prüfen Sie den Kontrast vor dem echten Hintergrund und berücksichtigen Sie Änderungen im Dunkelmodus. Eine blasse Beschriftung, die auf Ihrem Bildschirm elegant aussieht, kann draußen auf einem Smartphone schwer lesbar sein.
Nutzen Sie eine Vorschau-Matrix, die schwache Komponenten sichtbar macht
Eine sinnvolle Matrix umfasst eine schmale Smartphone-Ansicht, eine größere Darstellung, nicht verfügbare Bilder, gegebenenfalls den Dunkelmodus und realistische Kundendaten. Verwenden Sie bei Übersetzungen die längste Fassung statt nur die kürzeste. Betrachten Sie die ganze Nachricht und prüfen Sie danach besonders gefährdete Bereiche: Produkttitel, Preisangaben, Schaltflächen und Fußzeilenlinks.
- Wird die Beschriftung einer Schaltfläche umgebrochen, lassen Sie ihre Höhe wachsen und prüfen Sie den Innenabstand, statt das Aktionswort abzuschneiden.
- Berührt ein Produktname den nächsten Block, entfernen Sie die feste Höhe und geben Sie dem Text Platz zum Umbruch.
- Verschwinden wichtige Informationen ohne Bilder, übernehmen Sie sie als echten Text und nutzen Sie das Bild nur zur Ergänzung.
- Sind benachbarte Links schwer einzeln anzutippen, vergrößern Sie den Abstand oder verringern Sie die Zahl konkurrierender Aktionen.
Testen Sie problematische Fälle gezielt
Zeigen Sie die Vorlage in Sendvio mit echten Kundendaten bei schmaler Breite an. Testen Sie einen langen Namen, ein fehlendes Personalisierungsfeld, einen längeren Preis und ein Produkt mit ungewöhnlich langem Titel. Senden Sie anschließend Testnachrichten an die E-Mail-Apps, die Ihre Kunden häufig verwenden.
Prüfen Sie bei einer Promotion mit zwei Produkten die gestapelte Reihenfolge: Produktbild, Name, Preis und Aktion sollten zusammenbleiben. Werden sie getrennt, vereinfachen Sie den Block. Es geht nicht darum, die Desktop-Anordnung um jeden Preis zu reproduzieren, sondern darum, Bedeutung und nächsten Schritt ohne Zoomen, Raten oder horizontales Scrollen zu erhalten.
Prüfen Sie den Kontrast der tatsächlichen Text- und Hintergrundfarben. Für normalen Text ist ein Kontrastverhältnis von mindestens 4,5:1 ein sinnvoller Richtwert für Barrierefreiheit; für ausreichend große Schrift gilt als Mindestwert 3:1. Diese Werte ersetzen keine vollständige Barrierefreiheitsprüfung, machen Farbentscheidungen aber weniger subjektiv. Prüfen Sie kleine graue Beschriftungen genauso sorgfältig wie die Hauptüberschrift.
Speichern Sie die korrigierte Komponente in der wiederverwendbaren Vorlage und testen Sie sie nach größeren Änderungen erneut. Eine gute mobile Vorlage verhindert nicht nur horizontales Scrollen: Sie erhält die Lesereihenfolge, macht das Angebot verständlich und bietet in den tatsächlich unterstützten E-Mail-Umgebungen eine klare, nutzbare nächste Aktion.