Responsive Newsletter: So machen Ihre E-Mails auf allen Geräten eine gute Figur

Joana Rüdebusch
SEO Managerin & Content Creator
Responsive Newsletter erstellen mit CleverReach (grafische Darstellung)

Eine E-Mail, alle Bildschirmgrößen: Mit responsiven Newsletter-Templates sind Ihre Mails immer gut lesbar

E-Mails werden immer und überall gelesen: Im Büro oder zu Hause, aber auch unterwegs in der U-Bahn, im Wartezimmer oder beim Friseur. Da wird gern das E-Mail-Postfach gecheckt und man hat Zeit, eingegangene Newsletter in Ruhe zu lesen. Dabei werden die unterschiedlichsten Geräte verwendet: vom PC mit extra breitem Monitor über Tablets und Laptops bis hin zum Smartphone. Deshalb ist es entscheidend, dass Ihre Newsletter auf allen Bildschirmgrößen optimal angezeigt werden.

Was sind responsive Newsletter?

Ein responsiver Newsletter reagiert auf die unterschiedlichen Bildschirmgrößen des Empfängers und passt den Newsletter an das jeweilige Endgerät an. Ihr Vorteil: Damit ist Ihr Newsletter auf allen diesen Endgeräten optimal lesbar und benutzerfreundlich; es muss nichts vergrößert und hin-und-her gescrollt werden. Auch Call-to-Action-Buttons sind je nach genutztem Gerät per Maus oder Touch klickbar.

Dank responsiver Newsletter bekommen Ihre Empfänger Ihre Inhalte gleich bei der ersten Öffnung optimal angezeigt. Ist die Anzeige hingegen zu klein oder verschoben, sind die meisten Empfänger gnadenlos: 80 % der Nutzer löschen eine E-Mail, wenn sie auf ihrem Gerät nicht richtig dargestellt wird.

Mit responsiven Vorlagen immer gut lesbare Newsletter

Als Newsletter-Versender wissen Sie: die Öffnungsrate ist eine wichtige Kennzahl im E-Mail-Marketing. Sie variiert stark nach Branche, Art oder Inhalt des Mailings. Dabei ist jede Öffnung eine Chance auf Interaktion. Das kann ein Klick auf einen Call-To-Action-Button oder einen Link sein, der zu Ihrem Shop oder Ihrer Webseite führt – und dort zu einer Conversion.

In der Regel wird ein Newsletter einmal geöffnet. Sie haben also meist nur eine Chance, Ihre Abonnentinnen und Abonnenten von Ihren Angeboten zu überzeugen, und die sollten Sie nutzen. Ein responsives Newsletter-Design unterstützt Sie dabei, denn damit verbessern Sie die Lesbarkeit Ihrer E-Mails. Das wiederum beeinflusst Ihre Klickraten und dadurch den Erfolg Ihrer Newsletter positiv.

Zum Erfolg Ihrer E-Mail-Marketing-Kampagne tragen auch die oben erwähnten Call-to-Action-Buttons bei, die bei einem responsiven Newsletter in jeder Bildschirmgröße gut sichtbar platziert sind und damit zu einer Aktion (sprich Klick, Interaktion) animieren.

Tipp: Call-To-Action-Buttons sind für Links- und Rechtshänder gleichermaßen gut zu erreichen, wenn sie mittig angeordnet sind. Die Größen-Anpassung passiert automatisch, doch an die optimale Platzierung Ihrer Buttons sollten Sie bei der Erstellung Ihrer E-Mail immer denken.

Die meisten Newsletter werden am Desktop erstellt – und häufig auf dem Handy gelesen. Ist die Newsletter Vorlage nicht responsiv, dann wird die E-Mail im besten Fall einfach stark verkleinert angezeigt. Mit so einem nicht für die Mobilgeräte angepassten Newsletter kann die Ansicht zwar größer gezogen werden, doch dann passt der Textbereich nicht mehr in Gänze auf das Display und er muss hin- und her geschoben werden. Bei einem falschen Fingerwischen ist die Gefahr groß, unbeabsichtigt eine Schaltfläche zu berühren und eine Weiterleitung auszulösen. Was passiert? Der Newsletter wird genervt geschlossen und nur in den seltensten Fällen noch einmal zu Hause geöffnet.

Mit einem responsiven E-Mail-Template ist Ihr Newsletter hingegen auf jeder Bildschirmgröße gut lesbar und alle Inhalte sind gut zu erkennen. Dazu werden einige Dinge an die Bildschirmgröße angepasst:

  • Spaltenzahl: Mehreren Spalten werden untereinander dargestellt.
  • Bilder: Bilder werden entsprechend der Bildschirmgröße proportional verkleinert bzw. vergrößert.
  • Text: Die Breite eines Textfeldes passt sich an den Bildschirm an und der Text bricht automatisch um.
Responsive Newsletter: Dektop- und mobile Darstellung

Responsive Newsletter-Vorlagen von CleverReach

Mit der E-Mail-Marketing-Software von CleverReach erstellen Sie responsive Newsletter, die auf dem Handy-Display an der Supermarktkasse oder auf dem Desktop-Monitor im Büro gleich gut aussehen. Das Beste daran: Sie müssen gar nichts tun, um Ihren Newsletter an die verschiedenen Formate anzupassen und den Newsletter für die Mobilansicht zu optimieren.

Unsere kostenlosen Newsletter-Vorlagen sind bereits so angelegt, dass sie responsiv sind und auf allen Geräten eine gute Figur machen. Sie lassen sich im Newsletter-Editor ganz einfach bearbeiten und an Ihre persönlichen Anforderungen anpassen. Sie erstellen einen einzigen Newsletter und die Anpassung für die mobile Darstellung wird automatisch vollzogen.

Wie funktioniert das eigentlich?

Responsive Newsletter-Vorlagen basieren auf CSS3-Codes. Mit Hilfe dieser Technik werden Merkmale des Empfängers abgefragt wie Bildschirmgröße, Format und Auflösung. Diese Informationen dienen der Optimierung des Newsletters: Form, Größe, Text und Ausrichtung der Spalten werden an diese Angaben angepasst. Dadurch ist der Newsletter perfekt lesbar, egal ob auf einem kleinen Handy-Display oder am extra breiten Bildschirm.

Nicht nur unsere Vorlagen, auch alle Elemente im Drag-and-Drop-Editor von CleverReach sind für die responsive Darstellung optimiert. Sie können sich also nach Ihren Wünschen und Anforderungen Ihr eigenes responsives Newsletter-Template aufbauen.

Unten sehen Sie ein Beispiel für einen responsiven Newsletter von Primavera. Zweispaltige Elemente in der Desktop-Darstellung brechen in der mobilen Ansicht automatisch um:

Responsiver Newsletter von Primavera in der Desktop-Version (Screenshot)
Responsiver Newsletter von Primavera in der mobilen Version (Screenshot)

Tipps zur Optimierung Ihres Newsletter-Templates für die responsive Darstellung

Trotz der responsiven Newsletter-Vorlagen gibt es ein paar Dinge, die Sie selbst optimieren können:

  • Prüfen Sie in Ihrem Newsletter-Reporting, von welchen Geräten Ihre Empfänger Ihre Newsletter öffnen. Werden Ihre Newsletter beispielsweise zu 80 % auf dem Desktop gelesen, müssen Sie sich weniger Gedanken um die mobile Darstellung machen (sollten diese aber natürlich trotzdem im Blick behalten).
  • Verwenden Sie ein einfaches Layout, insbesondere wenn Ihr Newsletter hauptsächlich mobil gelesen wird. Komplexe Layouts können auf kleinen Bildschirmen überladen wirken und die Lesbarkeit beeinträchtigen. Halten Sie Ihr Design daher einfach und übersichtlich.
  • Wenn Sie Ihren Newsletter schreiben, behalten Sie die Textlänge im Auge. Da in der mobilen Version viele Elemente untereinander statt nebeneinander dargestellt werden und der Text nicht so breit läuft, wirkt der Newsletter sowieso schon länger als die Desktop-Variante. Fassen Sie sich also lieber kurz und kommen Sie auf den Punkt. Beachten Sie auch, dass in der mobilen Version der oberste CTA-Button oft weiter runter rutscht. Deshalb sollten Sie besonders die Einleitung kurz formulieren, damit auch mobil der erste CTA “above the fold” steht.
  • Vermeiden Sie zu große Bilder, die den Ladevorgang verlangsamen könnten. Wir empfehlen eine Bildbreite von 600 Pixel und eine Dateigröße von weniger als 1 MB – je kleiner, desto besser!
  • Wählen Sie gut lesbare Schriftarten und passen Sie die Schriftgrößen entsprechend an, damit sie auf allen Geräten gut lesbar sind.

So überprüfen Sie Ihre responsiven E-Mails

Die Darstellung Ihres Newsletters in der Desktop- und Mobil-Variante können Sie selber vor dem Versand überprüfen:

  • In unserer virtuellen Vorschau direkt im Editor sehen Sie die Anzeige Ihres Newsletters auf verschiedenen Geräten (Smartphone, Monitor).
  • Nach einem Testversand können Sie Ihre E-Mail in Ihrem Posteingang auf verschiedenen Endgeräten öffnen und in Augenschein nehmen.
  • Durch einen kostenpflichtigen Design- und Spam-Test sehen Sie außerdem das Layout Ihres Newsletters bei verschiedensten E-Mail-Clients und ob der Newsletter korrekt zugestellt wird.

Versenden Sie responsive Newsletter mit CleverReach

Die Optimierung Ihrer Newsletter für alle Geräte spielt eine entscheidende Rolle für den Erfolg Ihrer E-Mail-Marketing-Kampagnen. Durch die Verwendung responsiver Newsletter-Templates und die Beachtung der Tipps zur Optimierung können Sie sicherstellen, dass Ihre Inhalte auf jedem Bildschirmformat optimal dargestellt werden und Ihre Botschaften bei Ihren Empfängern ankommen. Die E-Mail-Marketing-Software von CleverReach unterstützt Sie dabei, ansprechende und effektive Newsletter zu erstellen.

Mit CleverReach bringen Sie Ihr Marketing auf das nächste Level!

Jetzt kostenfrei anmelden und durchstarten:


CleverReach Newsletter
Tipps und Tricks für erfolgreiches E-Mail-Marketing!