Aktuell

Newsletter-Design: Die wichtigsten Elemente im Kopf

Die Anatomie eines Newsletter-Designs besteht aus einer Reihe wiederkehrender Elemente. Preheader, Header-Banner und Navigation bilden dabei den Kopfbereich. Wir geben Tipps, wie man diesen ansprechend und konversionsstark gestalten kann.

Newsletter-Design: Die wichtigsten Elemente im Kopf

Preheader, Header und Navigation gehen im Newsletter-Design häufig fließend ineinander über. Aufgrund des F-förmigen Blickverlaufs beim Öffnen und Scannen der E-Mail bekommen sie aber viel Aufmerksamkeit. Deshalb sollte man sich über die optische und inhaltliche Gestaltung Gedanken machen, um Öffnungs- und Klickrate des Newsletters zu optimieren.

Preheader

Der erste darstellbare Text in einem Newsletter ist der Preheader. Durch seine Position ganz oben bildet er häufig den Einstiegspunkt in den Blickverlauf und sollte daher linksbündig ausgerichtet werden. Auch bei aktivierter Bildunterdrückung (Image-Off) wird der Preheader anzeigt.

Einige, vor allem mobile E-Mail-Clients, bilden den Preheader aber bereits im Posteingang ab. Dort erscheint er unterhalb der Betreffzeile. Inhaltlich sollte er diese also sinnvoll ergänzen und abrunden. Eine gute Harmonie von Betreff und Preheader weckt die Aufmerksamkeit des Empfängers und beeinflusst die Öffnungsrate.

Header

Gemeint ist in diesem Fall nicht das head-Element der HTML-E-Mail, sondern der Bereich unterhalb des Preheaders. Dabei handelt es sich in der Regel um eine verlinkte Bannerfläche. Links wird meist das Logo platziert, als weitere Absenderinformation und Antwort auf die Frage "Wer schreibt mir".

Rechts daneben können Vorteile, Aktionen, vertrauensbildende Maßnahmen wie Siegel, emotionale Visuals oder auch Kontaktmöglichkeiten kommuniziert werden. Während das Logo in jedem Newsletter an gleicher Stelle platziert ist, kann der rechte Teil des Headers inhaltlich von Ausgabe zu Ausgabe variiert werden.

Navigation

Direkt unterhalb des Headers werden häufig Navigationselemente platziert. Sie können an die Website-Navigation angelehnt sein, sollten diese aber nicht 1:1 abbilden. Stattdessen müssen die dort enthaltenen Links zum Kontext des Newsletters passen. Es lassen sich dort aber auch weitere erfolgversprechende Verweise setzen, beispielsweise auf Topseller. Farben, Kontraste und Schriftgrößen bewirken dabei eine Gewichtung der Menüpunkte und führen den Nutzer.

Navigationselemente sollten - wenn möglich - nicht als Grafiken, sondern als HTML-Text mit entsprechender Hintergrundfarbe angelegt werden. So sind sie auch bei Bildunterdrückung sichtbar. Wer auf Grafiken dennoch nicht verzichten kann, sollte diese mit aussagekräftigen alt-Attributen versehen.

Noch ein Tipp zum Schluss: Der Kopfbereich sollte nicht zu ausladend gestaltet werden. Denn der direkt sichtbare Bereich des Vorschaufensters im E-Mail-Client sollte auch die zentrale Botschaft des E-Mailings kommunizieren.

Kommentieren

Die E-Mail-Adresse wird nicht angezeigt, Angabe der Website ist optional.






zurück zur Übersicht

Newsletter Freeware

Jetzt ins E-Mail-Marketing starten und Software für bis zu 200 Abonnenten nutzen. Einfach und kostenlos mit der sitepackage:// Newsletter Freeware.

Jetzt starten
Newsletter

E-Mail Marketing Know-how kostenlos und frei Haus.



Hotline

Sie haben Fragen zum sitepackage:// Newsletter System? Rufen Sie uns an!

Wir beraten Sie gern unter
+49 (0)431 97997220

Feature Sheet

Erhalten Sie einen vollständigen Überblick über alle Funktionen des sitepackage:// Newsletter-Systems. Holen Sie sich einfach das Feature Sheet als PDF-Download!

Herunterladen
Über den Autor

Lars Müller

Lars Müller

Geschäftsführer
wigital GmbH