6 clevere Tipps für umwerfendes und effektives Newsletter-Design

Julia · 29. Oktober 2020
Newsletter Design Tipps

Das Design eines Newsletters muss direkt beim Öffnen der E-Mail überzeugen, damit dieser eine Chance hat, von den Empfängern gelesen zu werden. Denn nur ein ansprechendes, modernes Newsletter-Layout motiviert Abonnenten dazu, sich den Inhalt der E-Mail genauer anzuschauen. Die folgenden Basics für effektives E-Mail Design helfen Ihnen dabei, Ihre Newsletter so zu gestalten, dass sie die Leser auf den ersten Blick vom Hocker hauen! 



1. Attraktives Newsletter Design mit Wiedererkennungswert – „Above the fold”

Der erste Eindruck zählt – auch im E-Mail-Marketing! Da uns mittlerweile jeden Tag zahlreiche E-Mails erreichen, ist es umso wichtiger, dass Ihr Newsletter in den ersten Sekunden positiv auffällt, überzeugt und Lust auf mehr macht. Dabei ist im ersten Schritt natürlich ein überzeugender Newsletter-Betreff inklusive passendem E-Mail-Preheader von besonderer Bedeutung.

Ist diese Hürde erst einmal geschafft und der Abonnent hat Ihren Newsletter geöffnet, trägt im zweiten Schritt das E-Mail-Design zu seiner Entscheidung bei, ob er sich noch weiter mit dem Newsletter-Inhalt auseinandersetzt – oder die Mail sofort wieder schließt. Denn neben einem relevanten Thema und einer knackig formulierten Einleitung, die neugierig macht, braucht es ein Newsletter-Design mit Pep, das die Inhalte auf angenehme Weise präsentiert und den Blick der Leser automatisch zu den wichtigsten Stellen in der E-Mail leitet.

Ist Ihr Newsletter beim Öffnen ein wahrer Eyecatcher, der z. B. durch ein ansprechendes Headerbild oder eine interessante Farbgestaltung die Aufmerksamkeit der Abonnenten gewinnt, steigt die Wahrscheinlichkeit, dass Ihre Empfänger lesen, was Sie ihnen zu sagen haben!

Beispiel modernes Newsletter Design - Onlineshop
Beispiel für umwerfendes Newsletter-Design: Die Mischung aus ansprechendem Headerbild, durchdachter Farbgestaltung und modernem Design macht diesen Newsletter des Herzlack Onlineshops zum echten Hingucker (hier: Ausschnitt aus dem Newsletter).

Wichtig ist, dass sich die Design-Elemente, die Ihre Abonnenten im Newsletter zum Weiterlesen motivieren sollen, „above the fold” (wörtlich auf Deutsch „über der Falz”) befinden. Im Newsletter-Marketing ist damit der sichtbare Bereich der E-Mail gemeint, den Ihre Leser sofort beim Öffnen sehen, ohne erst scrollen zu müssen. In diesem Bereich sollten alle wichtigen Elemente Ihres Newsletter-Designs untergebracht sein, damit sie Ihre Empfänger direkt beim Öffnen der E-Mail überzeugen können.

Folgende Elemente verwandeln Ihren Newsletter in einen echten Blickfang:

  • Atemberaubende Fotos bzw. moderne, selbst gezeichnete Grafiken als Headerbild: Wichtig ist hier, dass das auf dem Headerbild abgebildete Motiv zum Newsletter-Thema passt und Ihre Leser allein durch den Blick auf das Bild wissen, was sie im Newsletter erwartet. Ob sich Fotos oder selbst gezeichnete Grafiken besser eignen, hängt von Ihrem Corporate Design ab: Passen Sie das Headerbild an den Design-Stil Ihrer Website bzw. Ihres Onlineshop an!
  • Informative und gut aufbereitete Infografiken zu Themen, für die Ihre Leser brennen: Ein Ausschnitt aus einer übersichtlichen Infografik oder Statistik weckt das Interesse Ihrer Leser – schließlich geht es hier um konkrete Zahlen und Werte! Indem Sie nur einen kleinen Grafik-Ausschnitt im Newsletter zeigen, sorgen Sie dafür, dass sich Ihre Abonnenten den restlichen Teil auf Ihrer Website anschauen möchten – und im Newsletter klicken.
  • In den Newsletter eingebaute Videos als Fakeplayer-Grafik oder animiertes GIF: Videos sagen mehr als tausend Worte! Kein Wunder, dass Ihre Leser beim Anblick eines Play-Buttons in Versuchung geraten und auf den Knopf klicken wollen. Da die direkte Einbindung von Videos in den Newsletter problematisch ist, können Sie Ihre Leser ganz einfach über ein Fake-Player-Bild auf Ihre Website holen. Auch animierte GIFs sorgen für den nötigen Wow-Effekt.
Beispiel-Newsletter-Design-mit-GIF
Beispiel für ein Newsletter-Design mit eingebautem GIF als Headerbild – passend zum Corporate Design auf der Website (Ausschnitt aus dem Newsletter).

Gelingt es Ihnen, Ihren Abonnenten durch ein attraktives Newsletter-Design Lust darauf zu machen, sich mit den angebotenen Inhalten auseinandersetzen, haben Sie bereits einen Fuß in der Tür! Vielleicht klicken Ihre Leser nicht direkt im ersten Newsletter auf einen Call-to-Action Button, um z. B. das beworbene Produkt zu kaufen oder sich auf Ihrer Website zu registrieren. Trotzdem haben Sie als Newsletter-Versender mithilfe des trendigen E-Mail-Layouts schon das Wichtigste gewonnen: die Aufmerksamkeit Ihrer Abonnenten.

Jetzt gilt es nur noch, die Bindung Ihrer Leser in den folgenden Newslettern weiter zu stärken und sie so langfristig vom Newsletter heraus auf Ihre Website oder in Ihren Onlineshop zu holen. Indem Sie für jeden Ihrer Newsletter beim gleichen Design-Stil bleiben und die Struktur des Newsletters in etwa beibehalten, schaffen Sie einen wertvollen Wiedererkennungswert. Auch gleichbleibende Farben – passend zu Ihrem Corporate Design – sind bei der Newsletter-Gestaltung wichtig. Öffnen Ihre Empfänger den Newsletter in ihrem E-Mail-Postfach, sehen sie anhand der Farben und des Designs sofort, von wem der Newsletter kommt und um welche Themenbereiche es gleich gehen wird. Gestalten Sie daher am besten ein individuelles Newsletter-Template im Firmendesign, das Sie für alle Ihre Mailings nutzen.

💡 Unser Tipp

Behalten Sie beim Designen Ihres Newsletter-Layouts immer Ihre Zielgruppe und das Mailing-Ziel im Hinterkopf. Je nach Branche und Unternehmen können auch schlichtere Designs ohne viele grafische Elemente angebracht sein. Schlagen Sie im Newsletter-Text z. B. aufgrund eines ernsten Themas einen sachlichen Ton an, sollte auch Ihr Newsletter eher neutral gestaltet sein. Gerade im Marketing-Bereich und bei kreativen Themen darf Ihr Newsletter dagegen ruhig bunter sein – hier können Sie Ihrer gestalterischen Kreativität freien Lauf lassen!


Sobald Sie sich für ein Newsletter-Design entschieden haben, können Sie sich für alle weiteren Newsletter daran orientieren und die Inhalte ganz einfach austauschen. Damit ist also der größte Teil der gestalterischen Arbeit geschafft. Aber: Es ist keineswegs an der Zeit, sich entspannt zurückzulehnen! Auch was das Design Ihres Newsletters betrifft, ist es wichtig, am Puls der Zeit zu bleiben und einschätzen zu können, was Ihre Zielgruppe gerade sehen möchte.

Informieren Sie sich regelmäßig über die neuesten Designtrends und überlegen Sie, wie Sie Ihr Newsletter-Layout dementsprechend auffrischen können. Zum Beispiel können Sie die Farbwahl an aktuelle Trendfarben anpassen. Während das Pantone Farbinstitut die Farbe „Klassisches Blau” zur Trendfarbe 2020 gekürt hat, sagt der Modefarben-Trendbericht des Instituts für die Frühjahr/Sommer-Saison 2021 folgende Trendfarben in der Londoner Modewelt vorher:

Farbtrends 2021 für Newsletter Design
Das sind laut Pantone Color Institute die neuen Farbtrends für die Frühjahr/Sommer-Saison 2021 – auch Ihrem Newsletter können diese Trendfarben einen frischen Anstrich verleihen! (Foto: Pantone Color Institute).

Cinemagraphs

Ein Newsletter Design-Trend, der definitiv für den nötigen Überraschungseffekt beim Öffnen der E-Mail sorgt, sind sogenannte Cinemagraphs, häufig auch als Cinemagramme bezeichnet. Cinemagraphs können z. B. als animiertes GIF in den Newsletter eingefügt werden. Im Gegensatz zu herkömmlichen GIFs erscheinen Cinemagramme, die an einer Stelle eine kleine, sich wiederholende Bewegung enthalten, dem Betrachter vielmehr als Standbild und nicht als Video. Ihre Newsletter-Abonnenten werden den Eindruck haben, Sie haben das Standbild eines Videos in den Newsletter eingefügt, bei dem eine einzige Bewegung wie durch Geisterhand weiterläuft… Oder wie würden Sie das folgende Headerbild im Newsletter beschreiben?

Cinemagraphs sorgen für ein außergewöhnliches Newsletter Design mit Wow-Effekt – in diesem Newsletter-Beispiel scheint immer mehr Honig auf das Croissant zu laufen!

💡 Unser Tipp

Melden Sie sich auch selbst zu verschiedensten Newslettern an, z. B. von Onlineshops, bei denen Sie einkaufen oder von Blogs, die Sie gerne lesen. Auf diese Weise schlüpfen Sie in die Rolle des Newsletter-Empfängers und merken schnell, welche Designs Sie mehr ansprechen und welche weniger.


3. Strukturierter Newsletter-Aufbau

Abgesehen von Ihrem Mailing am „Das-Chaos-nimmt-kein-Ende-Tag” sollte die Struktur Ihres Newsletters immer übersichtlich sein und ungefähr dem gewohnten Aufbau eines Newsletters mit allen relevanten Elementen folgen.

Im Header-Bereich der E-Mail sollte Ihr eingebundenes Firmenlogo sicherstellen, dass Ihre Leser sofort erkennen können, von wem der Newsletter kommt und um welche Themenbereiche es geht. Durch die im Header integrierten Informationen zum Versender erinnern sich Ihre Abonnenten an vorherige Newsletter und wissen, dass die Inhalte von einem seriösen Absender stammen. Verlinken Sie Ihr Logo am besten mit Ihrer Website oder Ihrem Onlineshop, damit sich die Leser ggf. durch einen Klick auf das Logo in Erinnerung rufen können, um welches Unternehmen oder welche Produkte es sich genau handelt.

Im Hauptteil eines Newsletters befindet sich neben dem Headerbild auch der Newsletter-Text. Dieser hat zur Aufgabe, das Interesse der Leser für das jeweilige Thema zu wecken. Vermeiden Sie an dieser Stelle besser lange Textblöcke und Unendlich-Sätze ohne Punkt und Komma. Gliedern Sie Ihren Text stattdessen in mehrere kurze Absätze, deren Abschluss ein einladender Call-to-Action Button bildet. Dabei sollte der Text maximal so lang sein, dass sich der CTA noch im direkt sichtbaren Bereich der E-Mail („above the fold”) befindet und nicht erst gescrollt werden muss. Unter dem Haupt-CTA können Sie dann mit weiteren Unterthemen anschließen, wobei Sie mit dem richtigen Text-Bild-Verhältnis Ihre Newsletter-Texte auflockern und ansprechender gestalten können.

💡 Unser Tipp

Newsletter-Bausteine für übersichtliches Mail Layout

Nutzen Sie Hervorhebungen und Textboxen (wie hier), Trennzeichen, Buttons, Bilder und Icons, um Ihre Inhalte gekonnt zu strukturieren. Das sorgt für die nötige Abwechslung in den Texten, die häufig eine hohe Informationsdichte enthalten und daher gut durchdacht präsentiert werden sollten. Beweisen Sie Mut zur Lücke, indem Sie genügend auflockernde Weißräume lassen und den Augen Ihrer Leser so kurze Erholungspausen gönnen. Einige „leere” Flächen heben zudem das wichtigste Newsletter-Element, den Call-to-Action Button, automatisch hervor: Der Blick Ihrer Abonnenten wird automatisch in Richtung CTA geleitet, was die Wahrscheinlichkeit eines Klicks erhöht.

Mit rapidmail stehen Ihnen im Newsletter-Editor alle nötigen Layout-Elemente zur Verfügung: Per Drag & Drop können Sie sie ganz einfach an die gewünschte Stelle in Ihrem Newsletter ziehen und dort mit den gewünschten Texten, Bildern und Links versehen. Egal ob auf dem Desktop oder am Smartphone, Ihre Newsletter werden auf jedem Endgerät in einem umwerfenden Design und mit einer übersichtlichen Struktur angezeigt!

Der Footer Ihres Newsletters bietet ausreichend Platz, um Links zu Ihren Social Media Kanälen einzubinden und um rechtlich vorgeschriebene Newsletter-Elemente wie Abmeldelink und Impressum einzubauen. Auch für weitere Angaben zu Ihrem Unternehmen wie Adresse, Öffnungszeiten oder Kontaktdaten ist der E-Mail-Footer der geeignete Abschnitt.


4. Responsives Newsletter-Design für mobile E-Mail-Öffnungen

Die meisten Abonnenten nutzen heute ihr Smartphone, um ihre E-Mails und Newsletter zu lesen. Da der Bildschirm eines Smartphones viel kleiner ist als der eines PC-Bildschirms, muss beim Newsletterversand auf eine sogenannte „responsive Darstellung” geachtet werden. Das heißt, es sollte sichergestellt werden, dass die E-Mail auch auf Smartphone-Screens korrekt dargestellt wird. Leider wird dies von vielen Newsletter-Versendern völlig außer Acht gelassen. Das führt dazu, dass das E-Mail-Design oft nicht „mobile friendly” ist, also am Smartphone nicht so angezeigt wird, wie geplant.

Werfen Sie deshalb unbedingt einen Blick auf unsere Tipps für eine korrekte Darstellung Ihres Newsletter-Designs auf mobilen Geräten!

💡 Unser Tipp

Der rapidmail Newsletter-Editor sorgt ganz automatisch für eine responsive Newsletter-Darstellung in den geläufigen E-Mail-Programmen! Egal ob Sie eine unserer 250 Newsletter-Vorlagen nutzen oder sich im Editor ein eigenes Layout gestalten – Ihre E-Mails sind alle „mobile friendly” und sehen am Smartphone genau so schön aus wie am Tablet oder Laptop. Mithilfe unserer Vorschau-Funktion können Sie vor dem Versand sogar testen, wie Ihr Newsletter-Design für die Smartphone-Bildschirme Ihrer Abonnenten angepasst wird!


5. Anzeigeoptionen der verschiedenen E-Mail-Programme

Auch wenn Sie bei der Gestaltung des Newsletters alle Tipps beachten, kann es leider sein, dass einige E-Mail-Clients Ihrer Abonnenten Ihnen einen Strich durch die Rechnung machen. Je nach E-Mail-Programm kann es z. B. sein, dass Hintergrundgrafiken oder GIFs nicht angezeigt werden oder dass Bilder erst per Klick vom Empfänger nachgeladen werden müssen.

Um Darstellungsprobleme bei Ihren Newslettern so gut wie möglich zu vermeiden, raten wir Ihnen…

  • …zu einer maximalen Newsletter-Breite von 500-600 Pixel: Da sich die Web-Oberflächen der E-Mail-Anbieter unterscheiden, sollte Ihr Newsletter nicht breiter als 600 Pixel sein. So stellen Sie sicher, dass Ihre E-Mails bei allen Abonnenten in voller Breite angezeigt werden. Bei zu breiten Newslettern kann es sonst sein, dass die Empfänger entweder dauernd nach rechts scrollen müssen, um den vollständigen Text zu lesen, oder dass die Newsletter-Breite automatisch verschmälert wird und Texte ggf. an ungünstigen Stellen auf mehrere Zeilen umgebrochen (und dadurch unendlich lang) werden. Mit rapidmail sind alle Ihre Newsletter daher automatisch auf 580 Pixel Breite eingestellt – so kann nichts schief gehen! Bei Bedarf (und auf eigenes Risiko ;)) kann die Breite natürlich trotzdem beliebig angepasst werden.
  • …einen gut sichtbaren Link zur Webversion Ihres Newsletters in den Header des Mailings zu integrieren. Falls Ihre Abonnenten aufgrund des genutzten Providers Darstellungsprobleme haben, können sie auf den Link klicken, um den Newsletter in der Browseransicht zu lesen. Hier ist die Wahrscheinlichkeit deutlich geringer, dass das angezeigte Newsletter-Design vom beabsichtigten Layout abweicht.
  • …alle eingebauten Bilder und Grafiken mit einem Alt-Text (Bildbeschreibung) zu versehen. Wenn die Newsletter-Bilder im E-Mail-Programm eines Abonnenten nicht angezeigt werden, kann er so immerhin anhand des Alt-Textes sehen, was auf dem Bild abgebildet sein soll. Außerdem wird der Alt-Text auch von Screenreadern vorgelesen, wodurch sich sehbehinderte Empfänger die Inhalte Ihres Newsletters besser vorstellen können.
Alt-Text für Newsletter Abbildungen einfügen
An dieser Stelle im rapidmail Editor kann für jede Abbildung im Newsletter ein Alt-Text eingefügt werden.
  • …vor dem Versand einen Darstellungstest durchzuführen und Testmails an verschiedene E-Mail-Provider zu versenden. Am besten auch an mehrere Kollegen, denn vier (oder mehr) Augen sehen bekanntlich mehr als zwei!

6. Auffallender Call-to-Action Button für mehr Newsletter-Klicks

Ein Newsletter soll natürlich nicht nur umwerfend aussehen, sondern die Leser zu einer Aktion motivieren, durch die eine Conversion erzielt wird (z. B. ein Kauf im Onlineshop oder eine Registrierung auf der Website). Im Vergleich zu einem lieblos gestalteten Newsletter steigert ein ansprechendes Newsletter-Design die Motivation Ihrer Abonnenten, auf den Call-to-Action Button zu klicken, um weitere Informationen zum Angebot oder zum Thema auf der Website einzuholen.

Ein durchdachtes Newsletter-Layout mit clever platziertem, auffallendem Call-to-Action-Button hilft Ihren Abonnenten außerdem dabei zu verstehen, wo sie mit dem Newsletter interagieren können. Im E-Mail-Marketing spricht man hier von conversion-zentriertem Newsletter-Design (auch „Conversion Centered Newsletter Design”). Das heißt, bereits beim Gestalten Ihrer Mailings sollten Sie immer im Hinterkopf behalten, was Sie mit dem Newsletter erreichen wollen und wie sich dieses Ziel am besten erreichen lässt.

Beispiel Conversion centered Newsletter Design
Gelungenes Beispiel für conversionzentriertes Newsletter Design: Der Reiseveranstalter BackpackerPacks integriert den Newsletter Call-to-Action Button gut sichtbar in das Headerbild – das von keinem Leser übersehen werden kann (Kängurus <3).

Damit möglichst viele Abonnenten auf Ihren CTA klicken, sollten Sie folgende Tipps beachten:

  • Call-to-Action „above the fold”: Der CTA sollte sich im oberen Bereich des Newsletters befinden, damit die Leser nicht erst lange scrollen müssen, um auf den Button zu stoßen.
  • Wenn möglich nur ein Haupt-CTA: Mit zu vielen Calls-to-Action verwirren Sie die Abonnenten, da diese oft nicht mehr verstehen, welcher Call-to-Action sie zu welchen Inhalten leitet. Weitere CTA sind möglich, jedoch sollten sie sich optisch vom wichtigsten Call-to-Action unterscheiden.
  • Farbgestaltung des CTA: Setzen Sie am besten starke Farbkontraste ein, damit der klickbare Button gut sichtbar ist und sich von den restlichen Newsletter-Inhalten abhebt.
  • Kurz und knackige Beschriftung: Damit Ihre Leser klicken, sollte der CTA-Text mehr Feuer haben als „Mehr Infos” oder „Hier klicken”.

Definitiv auch Ihre Aufmerksamkeit wert