Newsletter Breite anpassen
Newsletter Breite anpassen bezieht sich auf dieser Seite auf einzelne Bereiche innerhalb eines Layoutblocks. Du kannst Breite und Höhe von Bild-, Grafik- oder Textbereichen verändern, ohne den gesamten Newsletter neu aufzubauen. Lege zuerst die gewünschte Inhaltsstruktur fest und ändere danach die Elementgrößen.
Höhe und Breite
Es lässt sich nicht nur die Breite und Höhe von Layoutblöcken verändern, sondern auch die von einzelnen Bereichen.
Ziehe einfach am Rahmen eines Elements, um seine Größe zu verändern.
In einem Textbereich lässt sich die Höhe durch das Hinzufügen und Entfernen von Textzeilen verändern.
Breite eines Elements im Layoutblock ändern
Wähle den Bereich aus und ziehe den sichtbaren Rahmen auf die gewünschte Breite. Beobachte dabei die benachbarten Elemente: Wird ein Bereich breiter, steht im selben Layoutblock häufig weniger Platz für andere Spalten oder Inhalte zur Verfügung. Halte Bilder, Texte und Aktionen in einer klaren Hierarchie.
Nutze die Vorschau, um zu prüfen, ob Überschriften und Buttons nach der Änderung noch vollständig sichtbar sind. Sehr schmale Textbereiche erzeugen viele Zeilenumbrüche und verlängern den Newsletter unnötig.
Höhe von Bild- und Textbereichen anpassen
Bei Bildbereichen kannst du den Rahmen verändern und anschließend den Bildausschnitt kontrollieren. Wichtige Motive dürfen nicht abgeschnitten oder verzerrt wirken. Verwende Bilder mit ausreichender Auflösung und passendem Seitenverhältnis.
Die Höhe eines Textbereichs richtet sich außerdem nach Inhalt, Schriftgröße und Zeilenanzahl. Entferne nicht benötigte Leerzeilen und verwende konsistente Textstile. Kürze Inhalte nur, wenn die Aussage erhalten bleibt.
Newsletter-Breite und Lesbarkeit
Eine größere Fläche ist nicht automatisch besser. Lange Textzeilen können schwerer lesbar sein, während zu kleine Bereiche zu unruhigen Umbrüchen führen. Prüfe die Wirkung im Gesamtzusammenhang und lasse ausreichend Abstand zu Bildern, Trennlinien und Buttons.
Abstände zwischen Layoutblöcken werden in der Anleitung Abstände im E-Mail-Design separat behandelt. Dadurch bleibt diese Seite auf Höhe und Breite einzelner Elemente fokussiert.
Mobile Version kontrollieren
Öffne nach jeder größeren Größenänderung die Smartphone-Vorschau. Mehrspaltige Bereiche können mobil untereinander angeordnet oder anders skaliert werden. Prüfe Reihenfolge, Textbreite, Bildausschnitt und Buttongröße. Ändere mobile Einstellungen gezielt, wenn die Desktop-Proportionen auf kleinen Bildschirmen nicht funktionieren.
Links und Alternativtexte testen
Wenn ein Bildbereich verlinkt ist, kontrolliere nach dem Vergrößern oder Verkleinern das Linkziel. Ergänze einen Alternativtext, der den Bildinhalt beschreibt. Wichtige Aktionen sollten zusätzlich durch verständlichen Text oder einen klaren Button erkennbar sein.
Testversand vor der Freigabe
Sende das angepasste Design an mehrere E-Mail-Programme. Vergleiche Desktop und Mobilgerät und prüfe, ob sich Breiten, Umbrüche oder Abstände unerwartet verändern. Fallback-Schriften können andere Zeichenbreiten besitzen und dadurch Textbereiche vergrößern.
Checkliste für Elementgrößen
- Breite und Höhe passen zur Inhaltspriorität.
- Nachbarelemente bleiben vollständig sichtbar.
- Bilder sind nicht verzerrt oder ungünstig beschnitten.
- Textzeilen und Buttons bleiben gut lesbar.
- Mobile Vorschau und Testmail wurden geprüft.
Größenänderungen schrittweise durchführen
Ändere jeweils nur einen Bereich und kontrolliere das Ergebnis, bevor du den nächsten anpasst. So erkennst du, welche Änderung einen unerwünschten Umbruch verursacht hat. Speichere vor umfangreichen Anpassungen eine Arbeitskopie, damit du zu einer stabilen Version zurückkehren kannst.
Richte wiederkehrende Bereiche an gemeinsamen Kanten aus. Produktkarten, Teaser oder Bild-Text-Kombinationen wirken ruhiger, wenn vergleichbare Elemente dieselbe Breite verwenden. Unterschiedliche Größen sollten eine inhaltliche Priorität verdeutlichen und nicht zufällig entstehen.
Inhalt nach der Größenänderung prüfen
Kontrolliere Preise, Termine, Namen und Call-to-Action-Texte nach jedem Umbruch. Ein kleinerer Bereich kann Wörter trennen oder wichtige Angaben unter die sichtbare Bildkante verschieben. Lies den Abschnitt in der Vorschau vollständig und verlasse dich nicht nur auf die Rahmenmarkierung im Editor.
Freigabe dokumentieren
Wenn mehrere Personen am Newsletter arbeiten, notiere die geänderten Layoutblöcke und den geprüften Stand. Lass die finale Desktop- und Mobilversion von einer zweiten Person kontrollieren. Dadurch werden übersehene Umbrüche und uneinheitliche Spaltenbreiten zuverlässiger erkannt.
Prüfe zusätzlich die Darstellung mit aktivierten und blockierten Bildern. Wenn ein Element ohne Bild seinen Zusammenhang verliert, ergänze einen verständlichen Alternativtext und sichtbaren Begleittext. Kontrolliere auch den Klickbereich verlinkter Grafiken. Nach der Freigabe sollte die getestete Version unverändert für den Versand verwendet werden; jede spätere Größenänderung erfordert einen neuen Test.
Bewahre die verwendeten Bilddateien und die freigegebene Designkopie gemeinsam auf. Das erleichtert spätere Aktualisierungen und verhindert, dass abweichende Quelldateien versehentlich erneut verwendet werden.
Wie können wir helfen?