Abstände in einer E-Mail zeigen Lesern, welche Elemente zusammengehören. Eine Überschrift, ihre Erklärung und die zugehörige Schaltfläche sollten enger verbunden sein als zwei getrennte Produktgeschichten. Ist jeder Abstand gleich, kann selbst eine kurze Shopify-Kampagne gedrängt oder zusammenhanglos wirken. Verwenden Sie eine kleine, beständige Abstandsskala und prüfen Sie, ob die Gruppierung nach dem Stapeln auf Mobilgeräten noch sinnvoll ist.
Inhaltlich zusammengehörige Elemente gruppieren
Platzieren Sie Produktname nahe an Bild und Preis. Die Erklärung sollte nahe bei der Handlung stehen, die sie unterstützt. Verwenden Sie zwischen getrennten Abschnitten mehr Abstand als zwischen zusammengehörigen Elementen innerhalb eines Abschnitts. So entsteht eine visuelle Orientierung, bevor der Leser jedes Wort liest.
Legen Sie das Muster in einer wiederverwendbaren Sendvio-Vorlage fest. Wählen Sie wenige Abstandswerte und verwenden Sie sie einheitlich, statt jeden Block nach Augenmaß anzupassen. Die Vorlage muss dennoch mitwachsen können, wenn ein Titel auf eine weitere Zeile umbricht.
Eine kleine Skala statt vieler unabhängiger Abstände verwenden
Wählen Sie einige Abstände und weisen Sie ihnen Aufgaben zu. Ein kleiner Abstand verbindet beispielsweise Produktname und Preis, ein mittlerer trennt Erklärung und Handlung, ein größerer beginnt einen neuen Abschnitt. Die genauen Werte sollten zur Vorlage passen; wichtiger als eine bestimmte Zahl ist die Beständigkeit ihrer Beziehungen.
Als ersten Versuch können Sie beispielsweise 8, 16 und 32 Pixel für diese drei Stufen testen und nach Ansicht der versendeten E-Mail anpassen. Verwenden Sie nicht bei jedem Absatz den größten Abstand. Sind alle Elemente gleich weit voneinander entfernt, wirken verbundene Details getrennt und die E-Mail wird unnötig lang.
Zeilenabstand hat eine andere Aufgabe. Er trennt Zeilen innerhalb eines Absatzes, sodass das Auge ihnen bequem folgen kann. Absatzabstände trennen abgeschlossene Gedanken. Ein großer Außenabstand behebt keine zu eng gesetzten Zeilen; größere Zeilenhöhe macht zwei unabhängige Abschnitte nicht klar unterscheidbar. Passen Sie die Ebene an, auf der das Problem entsteht.
Leerraum ohne Zweck vermeiden
Große Lücken können eine kurze Nachricht besonders auf dem Smartphone auseinandergerissen wirken lassen. Prüfen Sie, ob ein Block mit fester Höhe oder ein unnötiger Abstandhalter die Handlung weit unter die Erklärung schiebt. Beheben Sie die strukturelle Ursache, statt die Schrift zu verkleinern, damit eine ungünstige Fläche gefüllt aussieht.
Sorgen Sie für angenehmen Zeilenabstand in Absätzen und vermeiden Sie übermäßig breite Textspalten. Kurze Absätze lassen sich leichter verfolgen, wenn ihre Zeilen verbunden, aber nicht gedrängt wirken. Zeigen Sie lange Produktnamen und Sprachversionen in der Vorschau an, bevor Sie die Abstände freigeben.
Leerfläche untersuchen, bevor Sie die Schrift ändern
Erscheint unter einer kurzen Überschrift eine große leere Fläche, prüfen Sie feste Höhen, Abstandhalter und Innenabstände an Überschrift und nächster Komponente. Zwei für sich angemessene Einstellungen können zusammen eine übergroße Lücke erzeugen. Entfernen Sie die doppelte Ursache, statt die Schrift zu verkleinern, bis der Leerraum gefüllt wirkt.
Stapeln sich Spalten auf Mobilgeräten, prüfen Sie, ob Desktop-Abstandhalter zwischen den jetzt vertikalen Blöcken stehen geblieben sind. Ein zum Ausrichten von Schaltflächen nebeneinander eingesetzter Abstand kann unter einer kurzen Produktbeschreibung als unnötige Lücke erscheinen. Bevorzugen Sie Komponenten, die mit dem Inhalt wachsen, und eine Stapelreihenfolge, die jedes Produkt als Einheit erhält.
Zuerst den Überblick und dann den Text prüfen
Betrachten Sie die E-Mail einige Sekunden und suchen Sie Hauptversprechen und Handlung. Wetteifern mehrere Blöcke gleich stark, vereinfachen Sie die Hierarchie. Lesen Sie anschließend die ganze Nachricht und prüfen Sie, ob die visuelle Gruppierung zur Bedeutung passt.
Prüfen Sie die schmale Ansicht, nachdem Spalten gestapelt wurden. Der Abstand zwischen nebeneinanderliegenden Karten kann vertikal zu groß sein. Gute Abstände wirken in beiden Größen bewusst gesetzt und hängen weder von harten Zeilenumbrüchen noch von einer bestimmten Textmenge ab.
Testen Sie das Layout mit dem kürzesten und längsten realistischen Inhalt. Ein kurzer Titel sollte keine unverbundene Schaltfläche zurücklassen und ein langer Titel nicht mit dem Preis kollidieren. Berücksichtigen Sie eine Übersetzung, eine fehlende optionale Zeile und ein Produkt ohne Bild. Die Abstände sollten solche Varianten tragen, ohne für jede Kampagne eine manuelle Neugestaltung zu erfordern.
Schließen Sie mit zwei Prüfungen ab: erst einem schnellen Überblick auf Versprechen und Handlung, dann einer vollständigen Lektüre der Abfolge. Sieht das Layout ruhig aus, während die Handlung mehrere Bildschirme von der zugehörigen Erklärung entfernt ist, stimmt die Gruppierung noch nicht. Gute Abstände kommunizieren Beziehungen, bevor Kunden jeden Satz lesen.