Der Newsletter ist fertig. Die Bilder passen, die Überschrift sitzt, und Sie freuen sich schon aufs Versenden. Dann öffnen Sie den Entwurf auf dem Smartphone: Der Text ist plötzlich winzig, das Bild nimmt viel Platz ein und der Button versteckt sich weit unten. Kommt Ihnen das bekannt vor?
Genau hier helfen responsive Newsletter. Sie passen sich an den verfügbaren Platz an, damit Ihre Leser auch auf dem Handy bequem durch die Nachricht kommen. Schauen wir uns gemeinsam an, worauf es ankommt – mit einem echten Beispiel aus dem mailfino-Editor und sieben Tipps, die Sie direkt ausprobieren können.
Was Sie in diesem Artikel erwartet
Was bedeutet „responsive“ beim Newsletter?
„Responsive“ bedeutet, dass sich die Darstellung einer E-Mail an unterschiedliche Anzeigebreiten anpassen kann. Auf einem großen Bildschirm dürfen zum Beispiel zwei Bereiche nebeneinander stehen. Auf dem Smartphone rücken sie untereinander, damit jeder genug Platz bekommt.
Das ist ein wichtiger Unterschied zum bloßen Verkleinern: Wenn die ganze Desktopansicht schrumpft, schrumpft auch die Schrift mit. Ein gut angepasstes Layout lässt Inhalte neu umbrechen und hält sie lesbar. Ihre Leser können sich auf die Nachricht konzentrieren und den nächsten Schritt finden, ohne erst hineinzoomen zu müssen.
Wie das aussehen kann, zeigt unsere Beispielvorlage.
Ein mailfino-Beispiel zum Anschauen: BrightsideShop
Für unseren kleinen Rundgang nehmen wir die mailfino-Systemvorlage BrightsideShop. Ihr sommerlicher Newsletter mit Krug, Tasche und Zitronen bringt schon etwas Farbe mit. Der Shop ist ein Gestaltungsbeispiel, keine Kundenreferenz. Die folgenden Bilder sind echte Aufnahmen aus dem Editor beziehungsweise Ausschnitte seiner Vorschau.
Auf dem Desktop: Das blaue Logo-Feld und der gelbe Bereich „Sommerausgabe“ stehen nebeneinander. Darunter folgt das große Motiv. Der Aufbau nutzt die Breite und führt anschließend zur Überschrift „Mehr Farbe für Deine Lieblingsplätze“.
In der mobilen Vorschau: Logo und Sommerausgabe stehen untereinander. Das Motiv passt in die schmalere Ansicht, und die kleine Einleitung ganz oben verteilt sich auf mehrere Zeilen. Die Farben und die Idee des Newsletters bleiben erhalten; die Anordnung bekommt mehr Luft.
Achten Sie beim Vergleich besonders auf diese drei Dinge: Was steht zuerst? Bleibt die Botschaft verständlich? Und wie viel Platz braucht der Einstieg auf dem Handy? Schon mit diesen Fragen entdecken Sie oft die Stellen, an denen ein Entwurf noch etwas Zuwendung braucht.
Vielleicht sieht Ihr eigener Newsletter ganz anders aus: ein Veranstaltungshinweis, ein Fachbeitrag oder Neuigkeiten aus Ihrem Unternehmen. Der Gedanke dahinter bleibt derselbe. Ihre Inhalte sollen in beiden Ansichten eine angenehme Reihenfolge haben.
Sieben Tipps für responsive Newsletter, die sich gut lesen lassen
1. Geben Sie Ihren Inhalten etwas Luft
Ein einfacher Aufbau macht den Einstieg angenehm: Überschrift, kurzer Text, passendes Bild und ein klarer nächster Schritt. Für viele Nachrichten ist eine Spalte deshalb eine gute Grundlage.
Mehrere Spalten können auf dem Desktop trotzdem wunderbar funktionieren. Prüfen Sie dann die mobile Reihenfolge. Bleiben Bild, Beschreibung und Link zusammen? Im BrightsideShop-Beispiel ist schon am Kopfbereich schön zu sehen, wie aus zwei nebeneinanderliegenden Flächen eine Folge von Abschnitten wird.
2. Machen Sie es den Augen leicht
Lesen Sie einen Absatz auf Ihrem Smartphone, so wie Sie auch eine Nachricht unterwegs lesen würden. Können Sie ihn bequem erfassen, ohne das Gerät näher ans Gesicht zu holen?
Für mobilen Fließtext sind etwa 16 Pixel ein guter Ausgangspunkt. Auch die Mailchimp-Referenz zur mobilen Schriftgröße empfiehlt mindestens 16 Pixel für den Haupttext. Wie angenehm das wirkt, hängt zusätzlich von Schriftart, Zeilenabstand und Kontrast ab. Kurze Absätze helfen dabei, den Überblick zu behalten.
Denken Sie auch an Bildunterschriften und den Fußbereich. Die kleinen Informationen verdienen genauso viel Aufmerksamkeit wie die große Überschrift.
3. Lassen Sie den Button einladen
„Zum Beratungstag anmelden“, „Die neuen Produkte ansehen“ oder „Den ganzen Beitrag lesen“: Gute Buttontexte verraten schon vor dem Tippen, was als Nächstes passiert.
Geben Sie dem Button außerdem Platz. Er sollte mit dem Finger bequem erreichbar sein und genügend Abstand zu anderen Links haben. Probieren Sie es in einer Testmail einfach selbst aus. Wenn Sie dabei erst sehr genau zielen müssen, darf die Schaltfläche noch etwas wachsen.
4. Wählen Sie Bilder, die auch klein etwas erzählen
Das farbige Stillleben in unserem Beispiel hat einen klaren Schwerpunkt. Auch in der schmalen Vorschau erkennt man die Gegenstände und die sommerliche Stimmung. Genau das lohnt sich bei der Bildauswahl: Bleibt die Aussage auch in einer kleinen Ansicht erhalten?
Wichtige Angaben wie Termin, Preis oder Veranstaltungsort sollten zusätzlich als Text im Newsletter stehen. So bleibt Ihre Nachricht verständlich, wenn Bilder nicht geladen werden. Aussagekräftige Alternativtexte unterstützen das ebenfalls. Die Mailchimp-Grundlagen für HTML-E-Mails raten dazu, die Nachricht nicht als ein einziges großes Bild aufzubauen.
5. Schauen Sie auf den ersten Bildschirm
Was sehen Ihre Leser direkt nach dem Öffnen? Ein freundlicher Einstieg und ein erkennbarer Anlass helfen dabei, in die Nachricht hineinzufinden.
Gerade schöne, große Bilder brauchen auf dem Handy schnell viel Platz. Im BrightsideShop-Beispiel folgen Logo, Ausgabenhinweis und Motiv aufeinander. Fragen Sie sich bei Ihrem Entwurf, ob die eigentliche Botschaft früh genug sichtbar wird. Vielleicht reicht schon ein kürzerer Einleitungstext oder ein etwas kleineres Bild.
6. Machen Sie das Weiterlesen leicht
Ein Newsletter darf neugierig machen. Für die ganze Produktbeschreibung oder den ausführlichen Fachbeitrag ist auf der verlinkten Seite Platz.
Schreiben Sie deshalb so viel, wie Ihre Leser für die nächste Entscheidung brauchen. Eine Einladung benötigt zum Beispiel Anlass, Termin, Ort und den Weg zur Anmeldung. Zwei ähnliche Absätze lassen sich oft zu einem guten Absatz zusammenziehen. Lesen Sie Ihren Text einmal laut: Dabei merkt man erstaunlich schnell, wo ein Satz noch eine kleine Pause oder eine einfachere Formulierung verträgt.
7. Gönnen Sie dem Entwurf einen zweiten Blick
Prüfen Sie Texte auf farbigen Flächen, Links und Logos auch in der dunklen Darstellung Ihres E-Mail-Programms, sofern sie verfügbar ist. Bleibt alles gut erkennbar?
Und schauen Sie nicht nur auf Ihr eigenes Lieblingsprogramm. Die verschiedenen E-Mail-Programme verarbeiten HTML und CSS unterschiedlich. Einen technischen Überblick bietet Can I email mit seiner Übersicht zu Media Queries. Für Ihren Arbeitsalltag heißt das vor allem: Ein kurzer Test in den relevanten Postfächern gehört zur guten Vorbereitung.
So bringen Sie Ihr Beispiel in mailfino in Form
Mit einer Vorlage ist der Anfang schon gemacht. Im mailfino-Editor stellen Sie Inhalte aus Drag-and-drop-Elementen zusammen und passen den Entwurf an Ihre Nachricht an. Unsere Aufnahme von BrightsideShop zeigt links die Bausteine, in der Mitte den Newsletter und rechts die Eigenschaften des Layouts.
Sie müssen dafür nicht jede Einstellung auf einmal kennenlernen. Beginnen Sie mit Ihrer Botschaft und gehen Sie dann in kleinen Schritten weiter.
Erst die Nachricht, dann die Feinheiten
Wählen Sie eine passende Vorlage und ersetzen Sie die Beispielinhalte durch Ihre eigenen Texte, Bilder und Links. Überlegen Sie dabei, welche Information zuerst kommen soll. Bei einer Einladung ist das vielleicht der Anlass; bei einem Fachnewsletter die Frage, die Ihr Beitrag beantwortet.
Danach schauen Sie sich die mobile Ansicht an. Für Entwürfe aus den mailfino-Drag-and-drop-Elementen gibt es responsive Darstellungsoptionen. Bei mehrspaltigen Layouts prüfen Sie auch die Einstellung zum Untereinanderstellen der Spalten. Mobile Styles helfen Ihnen, die Darstellung für Smartphones anzupassen.
Nehmen Sie die Perspektive Ihrer Leser ein
Gehen Sie den Newsletter einmal von oben nach unten durch. Wirkt die Reihenfolge stimmig? Ist der Text angenehm zu lesen? Steht der Button dort, wo er zum Inhalt passt?
Die Desktop- und Mobilaufnahmen unseres Beispiels zeigen den Kopfbereich derselben Vorlage. Sie sind ein guter Ausgangspunkt für den Vergleich. Die mobile Vorschau simuliert allerdings die Darstellung; wie die Nachricht im jeweiligen Postfach ankommt, prüfen Sie anschließend per Test-E-Mail.
Bei importiertem HTML lohnt sich ein eigener Blick auf den Aufbau und die Styles. Die responsiven Optionen für Drag-and-drop-Entwürfe lassen sich darauf nicht pauschal übertragen.
Der kleine Rundgang vor dem Versand
Jetzt kommt der angenehme Teil: Schicken Sie sich eine Testmail und schauen Sie sich Ihren Newsletter so an, wie Ihre Leser ihn sehen werden.
Öffnen Sie ihn auf dem Smartphone und am Desktop. Tippen Sie auf die wichtigsten Links, lesen Sie die ersten Absätze und scrollen Sie bis zum Ende. Ergänzen Sie die E-Mail-Programme, die für Ihre Zielgruppe wichtig sind. Notieren Sie ruhig die konkrete Kombination, etwa Gmail auf Android oder Outlook unter Windows.
Wenn Sie danach noch etwas ändern, senden Sie die überarbeitete Fassung erneut als Testmail. So geht genau der Entwurf in die letzte Kontrolle, den Sie anschließend verschicken möchten.
Mit dieser Checkliste sind die wichtigsten Punkte schnell im Blick:
- Ist gleich am Anfang klar, worum es geht?
- Lassen sich die Texte ohne Zoomen lesen?
- Ergeben die Inhalte auch untereinander eine gute Reihenfolge?
- Passen die Bilder in die schmale Ansicht?
- Bleiben wichtige Informationen ohne geladene Bilder verständlich?
- Sind Buttons gut erreichbar und Links richtig gesetzt?
- Ist der Newsletter bis zum Fußbereich vollständig und gut lesbar?
- Haben Sie die letzte Fassung als Testmail geprüft?
Drei Fragen, die dabei oft auftauchen
Brauche ich zwei getrennte Newsletter?
Für ein responsives Layout arbeiten Sie in der Regel an einer Nachricht mit Anpassungen für unterschiedliche Anzeigebreiten. Es lohnt sich, während der Gestaltung immer wieder zwischen den Ansichten zu wechseln. Dann fällt eine ungünstige Reihenfolge früh auf.
Ist die mobile Vorschau schon der fertige Test?
Sie hilft Ihnen, das Layout zu beurteilen. Die zusätzliche Testmail zeigt, wie Ihr E-Mail-Programm die Nachricht tatsächlich darstellt. Beide Schritte ergänzen sich.
Wird ein importierter HTML-Newsletter automatisch responsive?
Das hängt vom mitgebrachten HTML und seinen Styles ab. Ein Import allein sorgt noch nicht für eine passende mobile Darstellung. Prüfen Sie den Entwurf sorgfältig und passen Sie ihn bei Bedarf an.
Lust, den nächsten Newsletter gleich auszuprobieren?
Nehmen Sie für den Anfang einen überschaubaren Entwurf: eine Nachricht, ein passendes Bild und einen klaren nächsten Schritt. Wechseln Sie zwischendurch in die mobile Ansicht und geben Sie Ihrem Newsletter vor dem Versand einen kleinen Probelauf im Postfach.
Mit jedem Entwurf entwickeln Sie ein besseres Gefühl dafür, was auf dem Smartphone gut funktioniert. Und wenn Sie einmal unsicher sind: Ein Blick durch die Augen Ihrer Leser ist meistens der beste Anfang.
