Newsletter-Vorlage: vier Beispiele zum kostenlosen Download
Ein gutes Newsletter-Template ist eine Spalte von maximal 600 Pixeln Breite, mit Ihrem Logo oben, einer klaren Hierarchie aus Überschriften und Text, einem Hauptbutton, Alt-Texten bei jedem Bild, Ihrer Botschaft in echtem Text, einem Abmeldelink und der Adresse des Absenders unten. Wer diese acht Bestandteile in einem wiederverwendbaren Template festlegt, muss pro Ausgabe nur noch den Inhalt austauschen.
Unten finden Sie zuerst die vier Start-Templates von 2Mail als Beispiel für eine Newsletter-Vorlage, jeweils kostenlos als HTML herunterladbar und mit der Situation, für die das Layout gedacht ist. Danach, was in jedes Template gehört, wo es im Dunkelmodus, auf dem Handy und in Outlook schiefgeht und wie Sie eine solche Vorlage im Drag-&-Drop-Builder von 2Mail aufbauen.
Vier Newsletter-Vorlagen in HTML
Das sind die vier Start-Templates, mit denen Sie im Template-Builder von 2Mail beginnen. Sie wählen eines aus, ersetzen Text, Farben und Bilder und speichern das Ergebnis als Ihr eigenes Template. Lieber bei null anfangen? Dann starten Sie mit einer leeren Arbeitsfläche.
Newsletter
Überschrift mit einer farbigen Linie darunter, eine kurze Einleitung, zwei Artikel nebeneinander, ein Button und eine Fußzeile mit Abmeldelink. Das Layout für einen Newsletter mit festem Rhythmus.
Als HTML herunterladen
Ankündigung ("Announcement")
Ein großes Bild oben, eine Überschrift, ein kurzer Text, drei Punkte mit einem Häkchen und ein klarer Button. Für einen Launch, eine neue Dienstleistung oder ein Angebot.
Als HTML herunterladen
Einladung ("Event Invitation")
Überschrift, ein auffälliger Datumsblock, der Name der Veranstaltung und darunter Ort und Programm nebeneinander. Der Button führt zur Anmeldung.
Als HTML herunterladen
Einfacher Text ("Simple Text")
Keine Bilder und kein Button: eine Anrede, Ihr Text, eine Unterschrift und eine Fußzeile mit Abmeldelink. Liest sich wie eine persönliche Mail.
Als HTML herunterladenDie Bilder sind Screenshots der Start-Templates selbst, und jeder Download ist dieselbe Datei: das HTML, das der Builder von 2Mail für dieses Template erzeugt. Der Beispieltext ist englisch; Sie ersetzen ihn durch Ihren eigenen Inhalt. Sie sind Kunde? Dann wählen Sie im Builder "Start from template": dasselbe Layout, aber mit Blöcken bearbeitbar. Eine heruntergeladene Datei laden Sie über Templates → "Upload HTML" hoch und bearbeiten sie danach im Code-Editor.
Vorlage, Template, Layout oder Format?
Diese vier Wörter werden durcheinander verwendet und bedeuten in der Praxis dasselbe: die feste Gestaltung, in die Sie jede Ausgabe gießen. "Template" und "Vorlage" bezeichnen die wiederverwendbare Datei, "Layout" und "Format" eher deren Aufteilung.
Das Layout eines Newsletters
Das Layout ist die Reihenfolge und der Rhythmus der Blöcke: was oben steht, wie viele Themen folgen und wo der Button sitzt. Eine Spalte ist die sichere Wahl; zwei Spalten sind für ein Produktraster in Ordnung, sofern sie auf dem Handy untereinander rutschen.
Der Header eines Newsletters
Der Header ist der Streifen über der ersten Überschrift: Ihr Logo, verlinkt auf Ihre Website, und eventuell ein Link, um die Mail im Browser anzusehen. Halten Sie ihn niedrig und ruhig. Ein Navigationsmenü mit sechs Links gehört auf eine Website, nicht in eine Mail, und drückt den Inhalt nach unten.
Format und Abmessungen
Das gängige Format ist 600 Pixel breit, mit Bildern, die Sie in doppelter Breite anliefern, damit sie auf einem Telefon scharf bleiben. Die Länge ist frei, aber halten Sie das HTML schlank: Gmail schneidet eine Nachricht ab, sobald der Code über etwa 100 kB liegt, und dann verschwindet auch Ihr Abmeldelink.
Newsletter-Gestaltung: die acht Bestandteile eines guten Templates
Keine Designvorlieben, sondern Bestandteile, die jeweils ein konkretes Problem verhindern: Unlesbarkeit, Spamfilter, Beschwerden oder eine rechtliche Pflicht, die Sie vergessen.
Eine Spalte, 600 Pixel breit
Eine Spalte liest sich überall gleich, vom breiten Bildschirm bis zum Telefon. 600 Pixel ist die Breite, die praktisch jeder Mailclient ohne horizontale Bildlaufleiste anzeigt.
Ihr Logo oben
Der Empfänger muss auf einen Blick sehen, von wem die Mail kommt. Das Logo verlinkt auf Ihre Website und steht im Header, über der ersten Überschrift — nicht als großes Banner, das den Inhalt nach unten drückt.
Eine klare Hierarchie
Eine Hauptüberschrift, Zwischenüberschriften pro Thema und kurze Absätze. Wer überfliegt, muss in fünf Sekunden wissen, worum es in der Mail geht. Verwenden Sie Schriftgrößen, die auch auf einem kleinen Bildschirm lesbar bleiben.
Ein Hauptbutton
Jeder Newsletter hat eine Sache, die der Leser tun soll: bestellen, anmelden, lesen. Geben Sie dieser Aktion einen Button, der als Text formatiert ist, nicht als Bild, damit er auch ohne Bilder sichtbar bleibt.
Alt-Texte bei jedem Bild
Verschiedene Postfächer zeigen Bilder erst nach einem Klick. Der Alt-Text ist dann das, was der Leser sieht. Ohne Alt-Texte bleibt von einem bilderreichen Newsletter nur Leerraum übrig.
Ihre Botschaft in echtem Text
Schreiben Sie, was Sie zu sagen haben, in Textblöcke, nicht in ein einziges großes Bild. Spamfilter misstrauen einer Mail, die nur aus Bildern besteht, und wer Bilder blockiert hat, sieht dann nichts. Echter Text bleibt immer lesbar.
Ein Abmeldelink
Pflicht, und in Ihrem eigenen Interesse: Wer sich nicht abmelden kann, klickt auf 'Spam', und das wiegt schwerer als eine Abmeldung. Setzen Sie den Link sichtbar nach unten, in verständlicher Sprache.
Die Adresse des Absenders
Ihr Firmenname und Ihre Postanschrift unten in jedem Newsletter. Das ist eine gesetzliche Pflicht und zugleich ein Vertrauenssignal: ein echtes Unternehmen an einer echten Adresse.
Dunkelmodus, Handy und Outlook
Ein Template, das in Ihrem Browser gut aussieht, ist noch nicht fertig. Drei Umgebungen sorgen für die meisten Überraschungen.
Dunkelmodus
Mailclients im Dunkelmodus kehren Ihre Farben um oder passen sie an. Ein dunkles Logo auf transparentem Hintergrund verschwindet; weißer Text in einem farbigen Button wird unlesbar. Verwenden Sie Logos mit eigenem Hintergrund und testen Sie im Dunkelmodus, bevor Sie senden.
Handy
Ein großer Teil Ihrer Empfänger liest auf dem Telefon. Eine Spalte skaliert von selbst mit, aber Buttons müssen groß genug sein, um sie mit dem Daumen zu treffen, und Schriftgrößen unter 14 Pixeln werden auf dem Handy vergrößert oder ignoriert.
Outlook
Die Desktopversion von Outlook nutzt eine eigene Rendering-Engine, die viel modernes CSS nicht kennt: Hintergrundbilder, abgerundete Ecken und manche Abstände fallen weg. Bauen Sie Ihr Template auf Tabellen auf, halten Sie die Gestaltung einfach und senden Sie einen Test an ein Outlook-Konto.
Das Testen in echten Postfächern ist deshalb keine Formalität. Legen Sie in 2Mail eine kleine Testgruppe mit Ihren eigenen Adressen an und senden Sie die Kampagne zuerst dorthin, an mindestens drei echte Postfächer: ein Webmail, ein Telefon und Outlook auf einem PC. Was dort gut aussieht, sieht fast überall gut aus.
Der Template-Builder von 2Mail
Sie müssen kein HTML schreiben. Der Drag-&-Drop-Template-Builder im Dashboard verwandelt die acht Bestandteile oben in Blöcke, die Sie ziehen, ausfüllen und speichern.
Blöcke ziehen
Text, Bild, Button, Trennlinie und Spalten: Sie ziehen die Blöcke in die gewünschte Reihenfolge und füllen sie aus. Der Builder hält Breite und Struktur in Ordnung und baut das HTML auf Tabellen auf, mit Vorkehrungen für Outlook.
Wiederverwendbare Templates
Speichern Sie Ihren Aufbau als Template und verwenden Sie ihn für jede Ausgabe wieder. Logo, Farben, Fußzeile und Abmeldelink stehen fest; Sie tauschen nur den Inhalt aus. So bleibt jeder Newsletter erkennbar und Sie vergessen keinen Pflichtbestandteil.
Live-Vorschau auf Desktop und Mobilgerät
Während Sie bauen, sehen Sie die Mail in einer Live-Vorschau und wechseln mit einem Klick zwischen der Ansicht auf Desktop und auf Mobilgerät. Möchten Sie sie im echten Postfach sehen, senden Sie die Kampagne zuerst an eine kleine Testgruppe mit Ihren eigenen Adressen und denen Ihrer Kollegen und erst danach an Ihre Liste.
Ein Template in fünf Schritten aufbauen
Rechnen Sie mit einem halben Tag für die erste Version. Danach kostet eine neue Ausgabe Sie nur noch die Zeit, den Inhalt zu schreiben.
Wählen Sie die Struktur
Beginnen Sie mit einer Spalte von 600 Pixeln und legen Sie die Reihenfolge fest: Logo, Hauptüberschrift, Einleitung, zwei oder drei Themen, Button, Fußzeile. Skizzieren Sie es auf Papier, bevor Sie den Builder öffnen; das geht schneller als Ziehen und Zurückziehen.
Platzieren Sie die festen Bestandteile
Setzen Sie im Builder die Blöcke, die in jeder Ausgabe wiederkehren: das Logo, die Farben, die Fußzeile mit Ihrem Firmennamen und Ihrer Postanschrift und den Abmeldelink. Das ist der Teil, den Sie nie wieder anfassen.
Füllen Sie Inhalt und Hauptbutton ein
Schreiben Sie pro Thema eine Überschrift und zwei bis drei Sätze, fügen Sie ein Bild mit Alt-Text hinzu und setzen Sie einen klaren Button. Prüfen Sie in der Live-Vorschau, wie das Ganze auf Desktop und auf Mobilgerät aussieht.
Testen Sie in echten Postfächern
Legen Sie eine kleine Testgruppe mit Ihren eigenen Adressen an und senden Sie die Kampagne zuerst dorthin: an ein Webmail, ein Telefon und ein Outlook-Konto. Sehen Sie sie sich auch im Dunkelmodus an. Korrigieren Sie, was verrutscht oder verschwindet, und testen Sie erneut.
Speichern Sie es als Template
Speichern Sie den getesteten Aufbau als wiederverwendbares Template. Die nächste Ausgabe starten Sie aus diesem Template und tauschen nur den Inhalt aus, sodass Design und Pflichtbestandteile intakt bleiben.
Checkliste, bevor Sie senden
Gehen Sie diese sechs Punkte bei jeder Ausgabe durch. Sie kosten zwei Minuten und verhindern die Fehler, die Sie nicht mehr zurückholen können, sobald die Kampagne unterwegs ist.
