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 » E-Mail-Marketing » 7 responsive Newsletter-Vorlagen

7 responsive Newsletter-Vorlagen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 3 Kommentare
Lesedauer: 6 Minuten
  • von Markus Seyfferth
  • 5. August 2015

Für viele Online-Geschäftsbereiche ist es mittlerweile unerlässlich, E-Mail-Newsletter zu versenden. Doch auch private Anwendungsbereiche für Newsletter sind durchaus vorstellbar. Vielleicht möchten Vereine oder Hobby-Gruppen sich auf diese Art und Weise im Gespräch halten.

Egal welchen Anwendungsbereich Sie sich für einen E-Mail-Newsletter vorstellen können, zuerst einmal benötigen Sie eine schicke Vorlage, die möglichst responsiv ist, damit man den Newsletter auf allen denkbaren Geräten einwandfrei lesen kann. Daher stellen wir Ihnen in diesem Artikel einige Quellen für kostenlose Newsletter-Templates vor und zeigen Ihnen, wie einfach sich die Templates mit dem E-Mail-Client Ihrer Wahl nutzen lassen.

Kostenlose E-Mail-Newsletter-Templates

Sie können Ihre Newsletter entweder über einen Online-Dienst wie MailChimp oder AWeber erstellen und versenden, oder Sie machen alles in reiner Handarbeit. Bei nur relativ wenigen Empfängern lohnen sich die professionellen Dienste meist nicht, ein eigenes Template und das Erstellen des Inhalts in Handarbeit reicht da völlig aus.

Was ist ein E-Mail-Newsletter-Template?

Ein Template ist eine Vorlage für einen Newsletter. Das Design ist zumeist bereits fertig und der Inhalt vordefiniert mit Platzhaltern. Um die Templates gut nutzen zu können, brauchen Sie einen HTML-Editor. In diesem Editor wird die Vorlage geöffnet und angepasst. Grafiken können nun ausgetauscht und Texte angepasst werden. Der Quellcode eines Newsletter-Templates wird Sie wahrscheinlich noch an die 1990er Jahre erinnern, doch leider ist es noch nicht möglich, guten Code der auch funktioniert, in einer E-Mail zu versenden. Wenn Sie nur Texte anpassen müssen oder Links hinzufügen, dann können Sie das auch in Ihrem E-Mail-Programm tun. Grafiken tauschen hingegen wird nur in einem HTML-Editor funktionieren.

quellcode-eines-email-newsletters

Sollte Ihnen die Anpassung des Templates in einem HTML-Editor zu schwierig erscheinen, keine Sorge. Nur grundlegende Dinge wie Links und ähnliches müssen im Editor angepasst werden. Den reinen Text können Sie auch direkt im E-Mail-Programm bearbeiten. Doch dazu später. Jetzt stelle ich Ihnen die besten Quellen für kostenlose E-Mail-Newsletter-Templates vor.

Email on Acid’s Responsive Design Template

mail-template

Email on Acid bietet ein schickes und responsives Newsletter-Template zum kostenfreien Download an.

Download Email on Acid Template

99designs.com

Newsletter-Templates

99designs bietet eine kleine Auswahl von 12 freien E-Mail-Newsletter-Templates an, die in einer Zip-Datei heruntergeladen werden können.

Download Newsletter-Template-Set von 99designs.com

Litmus E-Mail-Template-Set

litmus-stamplia-templates

Der E-Mail-Kampagnen Online-Test und Analyse Anbieter Litmus bietet ebenfalls ein kleines Set von 7 kostenlosen und hübschen Templates an.

Download E-Mail-Newsletter-Template-Set von Litmus

Free Email Templates

Free-Email-Templates

Free Email Templates bietet Ihnen 70 kostenlose Templates an. Eine Registrierung ist nicht nötig, nach nur 2 Klicks landen die Templates in Ihrem Downloadordner.

Free Email Templates besuchen

CampaignMonitors HTML-Email-Template-Builder

HTML-email-templates Builder
Build-your-email
Die Oberfläche des Template-Builders

Mit dem Template Builder von CampaignMonitor gelingt es Ihnen innerhalb weniger Minuten, Ihre eigene und individuelle E-Mail-Newsletter-Vorlage zu erstellen. Sie können Vorlagen verwenden, Texte einsetzen und Bilder in das Template einfügen. Die Sprache kann auf deutsch eingestellt werden, sodass wichtige Beschriftungen in der Vorlage in deutscher Sprache vorhanden sind.

Nachdem Sie Ihre E-Mail-Newsletter-Vorlage fertig erstellt und in der Vorschau geprüft haben, müssen Sie einen kostenlosen Account erstellen. Im Anschluss wird Ihnen das Template dann an Ihre E-Mail-Adresse gesendet.

Den CampaignMonitor Template-Builder ausprobieren

MailChimp

MailChimp

Mit einem kostenlosen Account bei MailChimp bekommen Sie die Möglichkeit, wirklich professionelle Newsletter-Templates selber erstellen zu können. Hierzu können Sie auf die fertig designten Vorlagen zurückgreifen oder Ihr Template komplett selbst erstellen. Alle Templates sind hierbei komplett anpassbar. Sie können schon mit dem kostenfreien Account alle Vorzüge des Template-Designers genießen. Die fertigen Newsletter können entweder gleich mit Mailchimp versendet werden oder aber als HTML exportiert werden. Die exportierte HTML-Version können Sie dann in jedem E-Mail-Programm nutzen.

Edit-Template-MailChimp
Das MailChimp-Template wird im MailChimp-Editor angepasst

Ein Newletter-Template mit dem MailChimp-Designer erstellen

Antwort

Antwort

Antwort bietet Ihnen drei responsive Vorlagen für E-Mail-Newsletter-Templates an, die jedoch noch gestaltet werden müssen. Wer sein Newsletter-Design selbst erstellen und sicher sein möchte, dass die Newsletter auf jedem Ausgabegerät gleich gut lesbar sind, der ist hier an der richtigen Stelle.

Die Antwort E-Mail-Templates von GitHub downloaden

So einfach nutzen Sie die E-Mail-Newsletter-Templates

Sobald Ihr Newsletter-Template fertiggestellt ist, oder nur noch Anpassungen am Text nötig sind, können Sie die Vorlage in das E-Mail-Programm Ihrer Wahl importieren und versenden. Der Import in das E-Mail-Programm geht denkbar einfach und ist auch für Apple Mail ohne Abstriche möglich. Auch wenn viele Webseiten die Behauptung aufstellen, Apple-Mail sei nur eingeschränkt für solche Zwecke nutzbar. Ich trete den Beweis an, dass es doch – absolut Problemlos – geht.

Punkt 1: E-Mail-Programm öffnen

Öffnen Sie das E-Mail-Programm Ihrer Wahl. Egal welches, jedes bekannte Mail-Programm funktioniert für unsere Zwecke bestens. Gmail, Thunderbird, Outlook, Apple Mail – jedes E-Mail-Programm wird den Job gut erledigen. Als Beispiel werde ich Gmail und Apple-Mail nutzen. Nachdem der E-Mail-Client sich geöffnet hat, öffnen Sie ein Fenster zum Verfassen einer neuen E-Mail.

Punkt 2: Newsletter-Template im Web-Browser öffnen

Öffnen Sie nun Ihr erstelltes E-Mail-Newsletter-Template im Web-Browser. Die Datei sollte sich mit einem Doppelklick im Browser öffnen. Tut sie das nicht, klicken Sie die Datei rechts an und wählen „Öffnen mit => Ihr Web-Browser“.

Punkt 3: Den Newsletters kopieren

Kopieren Sie nun den gesamten Inhalt des Browsers. Achtung: Ich meine nicht den Quellcode der Seite, sondern den sichtbaren Inhalt! Siehe Screenshots.

Bewegen Sie hierzu den Cursor auf eine Stelle im Sichtfenster des Browsers. Folgende Tastenkombinationen markieren den kompletten Bildschirm-Inhalt:

  • Windows: STRG + A
  • Apple: cmd + A

Sobald der komplette Inhalt des Browser-Sichtfensters markiert ist, bitte einen Rechtklick machen und „Kopieren“ anklicken. Per Tastenkombination geht das folgendermaßen:

  • Windows: STRG + C
  • Apple: cmd+ C
browser-inhalt
browser-inhalt-kopieren

Punkt 4: Die geöffnete E-Mail aufrufen und den Inhalt dort einfügen

Rufen Sie nun die unter dem Punkt 1 geöffnete E-Mail auf und fügen den Inhalt entweder per Rechtsklick „Einsetzen“ oder per Tastaturkombination ein.

  • Windows: STRG + V
  • Apple: cmd + V
inhalte-einsetzen

Das Endergebnis. Eine E-Mail mit eingefügten Newsletter-Template.

die-fertige-email-mit-newsletter

Der Newsletter in Gmail:

der-newsletter-in-gmail

Das war´s schon. Texte und Links können direkt in der E-Mail bearbeitet werden, falls noch Ungereimtheiten auffallen.

Sollten Sie Microsoft Outlook nutzen und Ihnen fällt auf, dass der Newsletter nicht genauso angezeigt wird, wie gedacht, keine Panik. Das liegt an Outlook und kann leider nicht großartig geändert werden.

Punkt 5: Newsletter professionell versenden

newsletter-versenden

Einen Newsletter professionell zu versenden ist wichtig. Erstens soll kein Empfänger zu sehen bekommen, an wen der Newsletter ebenfalls gegangen ist. Zweitens soll das Risiko, dass der Newsletter automatisch bei den Empfängern in den Spam-Ordner einsortiert wird, gemindert werden. Das erreicht man am geschicktesten dadurch, dass man sich selbst als Empfänger angibt und die eigentlichen Empfänger in BCC (Blindkopie) setzt. Zudem wählt man einen Betreff ohne „Spam-Worte“ aus. Man textet ihn also beispielsweise so, als wolle man einfach nur einem Freund eine E-Mail senden.

Fazit

In diesem Artikel haben Sie einige Quellen für absolut kostenlose E-Mail-Newsletter-Templates kennengelernt. Sie wissen jetzt, wo Sie die Grundlage Ihrer Newsletter herbekommen und wie sie anzupassen, zu nutzen und zu versenden sind. Wir wünschen Ihnen nun viel Spaß beim Experimentieren mit den Newslettern.

Links zum Beitrag

  • Download Email on Acid Template
  • Download Newsletter-Template-Set von 99designs.com
  • Download E-Mail-Newsletter-Template-Set von Litmus
  • Free Email Templates besuchen
  • Den CampaignMonitor Template-Builder ausprobieren
  • Ein Newletter-Template mit dem MailChimp-Designer erstellen
  • Die Antwort E-Mail-Templates von GitHub downloaden
Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

werbeagentur held traunstein logo

HELD Werbeagentur

Traunstein

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

Warscher – Digital Experts

Horgen

WPSteinheisser Photography

Ludwigsburg

Logo der Allgäuer Webdesign-Agentur von Thomas Soyter Der informationsdesigner.

Der Informations­designer

Kaufbeuren

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

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.

→

3 Antworten

  1. Mari sagt:
    27. Februar 2018 um 11:19 Uhr

    Hallo Andreas,
    als langjährige Grafikerin begebe mich gerade ins „Neuland“ „Newsletter erstellen“, lieber spät als nie, man lernt ja nie aus. Deine Empfehlungen sind eine große Hilfe für mich. Habe auch schon den Artikel „Newsletter-Design: So erstellst du moderne E-Mails, die wirken “ gelesen.
    Nun meine Frage: Bieten die oben vorgeschlagenen Newsletter-Templates auch automatisch den Abmelde-Button / Unsubscribe-Link an?
    Welches Programm ist so einfach gestrickt, dass meine Kundin selbst Text und Bilder austauschen kann und den Newsletter versenden bzw. das mit der Newsletter-Abmeldung managen kann? Ich würde nur das Grunddesign vorbereiten und sie würde den Rest selbst verwalten.
    Freue mich auf Deine Antwort.

    Antworten
  2. Xenia sagt:
    28. Februar 2016 um 11:30 Uhr

    Ich würde mir eine ganz einfache, responsive HTML leer-Vorlage zum selbst (in einem Editor) bearbeiten wünschen.
    Die einfachen Tricks, die ich kenne, waren bisher nichts zielführend, meine mobile Ansicht bleibt einfach zu mickrig.
    Bei den meisten Links, die ich ausprobiert habe, bekommt man keine HTML/CSS-Vorlage, sondern muss man sich anmelden, News bestellen, bestätigen oder auf der Plattform bearbeiten. Möglich, dass ich mich verlickt habe und den Baum vor lauter Wald übersehen habe.
    Ansonsten Andreas, habe ich schon öfter sehr hilfreiche Tipps von dir gelesen und möchte dir an dieser Stelle DANKE sagen!

    Antworten
  3. Christiane Peschen - You Like It webdesign sagt:
    16. August 2015 um 23:45 Uhr

    Vielen Dank für den super Artikel.
    An dieser Stelle wäre es vielleicht schön um auch noch mehr info über Eure Erfahrung zu haben über das Verschicken selbst und gute online services dafür

    Antworten

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 ↑