Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Design » Newsletter-Design: So erstellst du moderne E-Mails, die wirken

Newsletter-Design: So erstellst du moderne E-Mails, die wirken

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dieter Petereit
  • 23. Februar 2018

Das Design eines E-Mail-Newsletters ist eine Aufgabe, die unter mehreren Aspekten angegangen werden muss. Die Ästhetik ist ein Gesichtspunkt, Marketingziele ein anderer. Wir zeigen dir, wie du alle Aspekte unter einen Hut bekommst.

Natürlich muss ein E-Mail-Newsletter hübsch anzusehen sein. Warum? Ganz einfach, weil Menschen sich lieber schönen Dingen zuwenden. Und wenn sie die Wahl haben, aus ihrer ohnehin überfüllten Inbox, eine Nachricht zu öffnen, die schon in der Preview gut aussieht, gegenüber einer, die so trocken aussieht, wie die Information, die sie mutmaßlich beinhaltet, welche werden sie dann wohl wählen?

Übrigens: Dieser Tage haben wir uns hier bei Dr. Web auch mit der Frage befasst, ob der E-Mail-Newsletter im Sterben liegt oder gar schon verschieden ist. Aus diesem Beitrag kannst du sicher einige zusätzliche Erkenntnisse entnehmen.

Gängige Probleme im E-Mail-Newsletter-Design

In der Regel werden E-Mail-Newsletter verwendet, um Interessenten zu Kunden zu konvertieren. Der Newsletter ist in dieser Funktion so etwas wie das Schaufenster eines Ladens in der Fußgängerzone. Sieht das uninteressant aus, gehen die Passanten weiter.

Mit deinem Newsletter hast du den großen Vorteil, dass potenzielle Kunden sich schon einmal aktiv dazu entschlossen haben, dein virtuelles Schaufenster zu sich nach Hause in die Inbox zu lassen. Überzeugen musst du sie dennoch jedes Mal aufs Neue. Immerhin ist der „Unsubscribe”-Link in Deutschland Pflicht.

Was dir das Newsletter-Versenderleben schwer macht, sind die vielen verschiedenen E-Mail-Clients, mit denen deine potenziellen Kunden ihre E-Mails öffnen. Sogar Gmail kann erst seit kurzem von sich behaupten, eine einigermaßen brauchbare HTML-Rendering-Engine integriert zu haben. Outlook ist nach wie vor gefürchtet.

Erschwerend kommt hinzu, dass inzwischen mehr als jede zweite E-Mail von einem mobilen Gerät aus geöffnet wird. Du kommst also an Responsivität als Gestaltungsgrundsatz absolut nicht vorbei. Die genannten Einschränkungen sorgen dafür, dass die Kreativität beim Newsletter-Design eine weniger große Rolle spielt als die Technik der Umsetzung selbst.

woman 3083377 1280 Newsletter-Design: So erstellst du moderne E-Mails, die wirken
E-Mails werden vorwiegend mobil gelesen. (Foto: Pixabay, Nastya Gepp)

Newsletter-Design unter Marketingaspekten

Beginnen wir mit den Marketing-Gesichtspunkten. An dieser Stelle ist es wichtig, zu identifizieren, was genau das Ziel deines Newsletters ist. Möchtest du mit versendeten Artikelteasern für Traffic auf deiner Website sorgen oder möchtest du tatsächlich aus dem Newsletter heraus Produkte verkaufen? Suchst du lediglich eine persönlichere Kommunikationsform für deine Botschaften? Eine Mischform besteht in der Verknüpfung von persönlich wirkenden Botschaften mit dem Verkauf der in den persönlichen Botschaften empfohlenen Produkte.

Dienstleistungs-Freelancer versenden eventuell zielgruppenwichtige Informationen mit dem Hintergedanken, dass die Empfänger der E-Mail den Absender als kompetenten Fachmann im Kopf behalten oder sogar tiefergehende Informationen und Leistungen auf der Basis der Kurzinformationen im Newsletter anfordern.

Nicht jeder der genannten E-Mail-Newsletter kann und sollte auf die gleiche Weise erstellt werden. Das Ziel des Newsletters und die Erwartungen der anvisierten Zielgruppe müssen dabei unbedingt Berücksichtigung finden.

Merkposten: Bevor du an das Design deines Newsletters gehst, musst du dir über dessen Zielsetzung und dessen Zielgruppe so klar werden wie nur irgend möglich.

Auf der Basis deiner Zielsetzung und Zielgruppe gehst du an die weiteren Überlegungen. Dabei gelten durchaus allgemeine Regeln. Wenn du dir nur zwei Regeln merken kannst oder nur zwei anwenden willst, dann sollten es diese sein:

  • Fasse dich so kurz wie möglich
  • Setze einen (oder jedenfalls wenige) glasklaren Call-to-Action (Handlungsaufruf)

Damit dürftest du bereits um die 80 Prozent Erfolgsquote erreichen – immer vorausgesetzt, du formulierst ziel- und zielgruppengerecht.

stockvault businessman drawing a circle around people icons178079 Newsletter-Design: So erstellst du moderne E-Mails, die wirken
Die richtige Zielgruppe zu erreichen, ist entscheidend. (Foto: Stockvault, Jack Moreh)

Verzichte auf zu viele Themen. Das verwässert den Call-to-Action und verteilt die begrenzte Aufmerksamkeit im schlimmsten Falle so stark, dass die Handlungsschwelle für das einzelne Thema beim Leser nicht mehr überschritten wird. Du hättest dir in dem Falle die Mühe der Erstellung des Newsletters völlig vergeblich gemacht.

E-Mail-Newsletter-Design unter gestalterischen Aspekten

Auch die gestalterischen Aspekte müssen sich den Marketing-Zielen unterordnen. Insofern handelt es sich dabei nicht um eigenständige Empfehlungen, die man unabhängig von den eben genannten Marketing-Aspekten anwenden könnte. Vielmehr ergeben sich weite Teile des Designs aus eben jenen Festlegungen.

Nicht jeder E-Mail-Client bietet eine Preview, also eine Vorschauansicht der erhaltenen E-Mail aus dem Posteingang heraus. Vielfach stellen deine potenziellen LeserInnen auch gezielt die Previews ab. In diesen Fällen ist dein E-Mail-Betreff das einzige Element, über dass du verfügst, um deine Adressaten davon zu überzeugen, deinen Newsletter zu lesen. Du brauchst also in jedem Falle einen starken Betreff, damit dein Newsletter nicht im Nachrichtenstream untergeht.

An dieser Stelle kommst du um das Thema „Clickbait oder nicht” nicht herum. Natürlich empfiehlt es sich nie, Betreff-Zeilen zu formulieren, die Inhalt ankündigen, den der Newsletter letztlich gar nicht bietet. Dennoch sollte ein in Maßen mutiger Formulierungsansatz durchaus helfen, den Inhalt zur Kenntnis zu geben.

IMG 20180222 093529 Newsletter-Design: So erstellst du moderne E-Mails, die wirken
Outlook, der Schrecken aller E-Mail-Designer. (Foto: D. Petereit)

Achte auf starke Bilder, denn Textwüsten sind nie attraktiv. Verwende dabei aber nicht irgendwelche Bilder, sondern solche, die den Text und das allgemeine Ziel des Newsletters unterstützen.

Dabei gilt es allerdings jene Nutzer zu beachten, die in ihren E-Mail-Clients willentlich oder automatisch die Anzeige von Bildern deaktiviert haben. Der Anteil derer soll sogar in Gmail beachtliche 43 Prozent aller User betragen. Hier solltest du auf Techniken, wie etwa formatierte ALT-Attribute zurück greifen, mit denen du wenigstens den Eindruck erweckst, es solle so aussehen, anstatt lediglich leere Boxen anzuzeigen. Auch die strukturierte Verwendung von Hintergrundfarben mildert den Effekt fehlender Bilder um einiges.

Was du auf jeden Fall vermeiden solltest, sind E-Mails, die sich komplett aus Bildern zusammen setzen. Der diesbezügliche Trend, E-Mail-Newsletter mit Photoshop zu bauen und dann zu slicen, ist noch gar nicht so lange her.

Stets sollte die optische Verbindung zu deiner Marke klar ersichtlich sein. Selbst wenn dein Logo nicht mehr sichtbar ist, also beim Herabscrollen, sollte das allgemeine Gestaltungsschema, also Farben, Aufteilung, Typografie, klar als jenes deiner Marke erkennbar sein.

Wo wir schon bei Typografie sind: In E-Mails verwenden wir Fonts, die mit großer Sicherheit auf den Systemen der Leser vorhanden sind und verzichten auf solche, die wir auf die ein oder andere Weise mitliefern müssten. Als anerkannt sicher gelten Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida, Trebuchet und Times. Als optimale Schriftgröße haben sich 14 px für längere und 16 px für kurze Textpassagen erwiesen.

Das Konzept des Above the Fold ist im Newsletter-Design weiterhin gültig. Die wichtigsten Informationen sollten im Fenster des E-Mail-Clients angezeigt werden, ohne, dass der Nutzer nach unten scrollen muss. Im Webdesign konnte in den letzten Jahren festgestellt werden, dass das Konzept an Wichtigkeit verliert. Wer einmal auf einer Seite angekommen ist, ist offenbar zum Scrollen bereit. Im E-Mail-Client wird das auch so sein. Allerdings scrollt er hier dann eher durch die Liste der Eingänge.

newsletter template litmus Newsletter-Design: So erstellst du moderne E-Mails, die wirken
Kostenloses, modernes E-Mail-Newsletter-Template. (Quelle: litmus)

Für die Wichtigkeits-Hierarchie sprechen auch Erkenntnisse der Aufmerksamkeitsökonomie. Das, was du auf jeden Fall vermitteln willst, gehört an den Anfang. Journalisten trainieren es bis zur Erschöpfung, Texte so zu schreiben, dass man sie von unten weg immer wieder kürzen kann, ohne dabei die Hauptbotschaft zu beschädigen.

Wenn du Links setzt, dann sollten es optimalerweise ausschließlich Links zu deiner eigenen Website sein. SEO-Aspekte kannst du hierbei vollkommen außer Acht lassen. Wenn es passt, solltest du durchaus reichlich linken.

Um den Newsletter als persönliche Botschaft, als E-Mail an den Empfänger, wahrnehmbar zu machen, solltest du keine mehrspaltigen Layouts wählen. Eine E-Mail ist natürlicherweise im Storymodus erfolgreich. Die Botschaft wird von oben nach unten vermittelt, nur unterbrochen durch einen oder wenige Call-to-Action.

Quellen zum Weiterlesen

  • Ist der E-Mail-Newsletter tot? | Dieter Petereit, Dr. Web
  • 10 Rules to Make Your Email Newsletter Design Beautiful yet Effective | Karolina Jasvinaite Petraskiene, Omnisend
  • 8 Dienste für freie E-Mail-Newsletter-Templates und wie man sie einsetzt | Andreas Hecht, Dr. Web
  • Email Newsletter Design Best Practices | Bogdan Sandu, Design your Way
  • Beautiful Email Newsletters | Showcase mit einer Unmenge hübscher Newsletter-Designs
  • The Ultimate Guide to Email Image Blocking | Lauren Smith, Litmus
  • Der umfassende E-Mail-Marketing Guide: Tipps, Tricks und Ressourcen | Andreas Hecht, Dr. Web
  • E-Mail Marketing im E-Commerce: Der große Einsteiger Guide | Juliane Heise, Dr. Web
  • Online-Marketing-Basics #6: Einführung ins E-Mail-Marketing | Manuel Diwosch, Dr. Web
Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

dskom GmbH (ehem. SEO Profi Berlin)

Berlin

Logo von Lausitz Design.

Internetagentur lausitz.design

Schleife

Logo von der Warscher Digitalagentur aus Zürich, Horgen und Basel.

Warscher – Digital Experts

Horgen

WordPress Agentur Kreativdenker

Speyer

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑