So erstellen und senden Sie einen E-Mail-Newsletter kostenlos

Es gibt viele kostenpflichtige Optionen, die von vielen E-Mail-Newsletteranbietern angeboten werden. Wenn Sie jedoch eine E-Mail von Google Mail, Yahoo, Hotmail und einem anderen kostenlosen E-Mail-Konto senden können, können Sie mehr von Ihrem Budget für andere Artikel reservieren.

Wenn Sie nach besser verwalteten Newsletter-Services mit Tools zur Überwachung Ihrer E-Mail-Kampagne suchen, nutzen Sie den kostenpflichtigen Service. Wenn Sie jedoch nur ein paar Newsletter an ein paar Freunde senden möchten, werden Sie dieses Tutorial lieben.

Wir zeigen Ihnen, wie Sie Ihre eigene Newsletter-Vorlage als HTML-Vorlage speichern und mit Hilfe von CampaignMonitor versenden können.

Beginnen Sie mit der E-Mail-Vorlage in Photoshop

Wenn Sie wissen, wie Ihre Newslettervorlage aussehen soll, können Sie mit Photoshop arbeiten. Ansonsten können Sie eine Vorlage von vielen kostenlosen E-Mail-Vorlagenanbietern herunterladen. Es gibt keine bestimmte Breite und Höhe einer E-Mail-Vorlage. Um jedoch sicherzustellen, dass die E-Mail-Vorlage ohne Unterbrechungen kompatibel und lesbar ist, sollten Sie die Breite auf höchstens 650px setzen. Es gibt jedoch keine Höhenbeschränkungen, so dass dieser Parameter bei Ihnen liegt.

E-Mail-Vorlage

Sie können mit Ihrer E-Mail-Vorlage so kreativ sein, wie Sie möchten, aber mit mehr kreativen Elementen ist mehr Arbeit beim Aufteilen der einzelnen Elemente erforderlich. Die Vorlage, die wir verwenden werden, enthält nur einige einfache Elemente: Kopfzeile, Foto, Zeilen und Text zum Nutzen dieser Anleitung.

Auswahl der Schriftarten

Sie können auf jeden Fall jede in Ihrem Photoshop verfügbare Schriftart verwenden. Wenn Sie jedoch einen Newsletter erstellen, sollten Sie Webschriftarten wie Times New Roman, Arial und Georgia verwenden. Verwenden Sie andernfalls Ihre speziellen Schriftarten, speichern Sie sie jedoch als Bilder und nicht als Text.

Versuchen Sie zu begrenzen, dass Sie nicht zu viele Bilder in Ihrer Vorlage speichern müssen, da dies nur die Größe erhöht und das Laden länger dauert.

1. Schneiden Sie Ihre E-Mail-Vorlage auf

In diesem Handbuch verwenden wir eine bearbeitete Version einer kostenlosen E-Mail-Vorlage von CampaignMonitor. Laden Sie es hier herunter, um diesem Tutorial zu folgen.

Nun, da Sie mit Ihrer E-Mail-Vorlage fertig sind, öffnen Sie sie mit Photoshop und wählen Sie aus Schneidewerkzeug und fangen Sie an, jedes Element der Vorlage zu schneiden.

In diesem Prozess müssen Sie jeden einzelnen Bereich, Text, jede Linie und jedes Bild in Scheiben schneiden.

Wenn Sie einen Text in Scheiben schneiden, stellen Sie sicher, dass Sie die genaue Größe auswählen. Lassen Sie keinen zusätzlichen Platz im Textbereich. Für leere Felder schneiden Sie sie in eine große Scheibe, aber trennen Sie sie in Quadrate.

Das nächste Werkzeug, das Sie mit Photoshop verwenden müssen, ist das Slice-Auswahlwerkzeug. Verwenden Sie dieses Tool, um jedes einzelne aufgeschnittene Element in Ihrer Vorlage zu fixieren. Stellen Sie sicher, dass jede Linie verbunden ist, und lassen Sie keinen leeren Bereich, ohne sie zu schneiden.

Zoomen Sie mit dem Slice-Auswahlwerkzeug Ihre Vorlage und überprüfen Sie jedes von Ihnen erstellte Slice. Stellen Sie sicher, dass jede Leitung angeschlossen und fest ist.

Das Ergebnis wird so aussehen.

2. Speichern Sie als HTML-Vorlage

Wenn Sie mit Ihrer geschnittenen Vorlage fertig sind, gehen Sie zu Datei und wählen Sie aus Speichern Sie für Web und Geräte.

Ein Fenster mit Speicheroptionen wird angezeigt. Doppelklicken Sie zunächst auf Ihr Bildelement und benennen Sie es, damit Sie die Bilddatei beim Speichern leicht erkennen können. Klicken OK nachdem du sie benannt hast.

Legen Sie als nächstes in der rechten oberen Ecke des Popup-Fensters den Bildtyp als fest JPEG aus dem Dropdown-Menü. Die Qualität kann auf eingestellt werden 60 oder 80. Wenn Sie die Qualität auf 100 einstellen, ist die Bildqualität maximal, aber Ihre Vorlage wird schwer.

Klicken Sie nun auf die sparen Schaltfläche am unteren Rand des Fensters.

Ein neues Popup-Fenster wird angezeigt. Wählen Sie hier das Ziel, an dem die Datei gespeichert werden soll, und ändern Sie das Format in HTML und Bilder und setze das Scheiben zu Alle Scheiben.

Als nächstes unter der die Einstellungen Dropdown-Menü auswählen Andere.

Ein weiteres Popup-Fenster erscheint unter HTML Stellen Sie sicher, dass die Auswahl unter 'Formatierung' wie folgt ist. Machen Sie dasselbe für den Abschnitt "Codierung".

Nun aus dem HTML Dropdown-Menü auswählen Scheiben, und wählen Sie Slice-Ausgabe zu Tabelle generieren und legen Sie die Spalten wie folgt fest.

Jetzt von Scheiben, gehe zu Dateien speichern Gehen Sie im Dropdown-Menü zum Abschnitt "Optimierte Dateien" und überprüfen Sie die Option Bilder in Ordner ablegen und legen Sie den Namen des Image-Ordners fest. Der Standardordner für Bilder lautet "images". Dann klick 'OK'.

Wenn Sie auf OK klicken, kehren Sie zum vorherigen Popup-Fenster zurück. Klicken Sie nun auf sparen.

Nachdem Sie auf die Schaltfläche "Speichern" geklickt haben, öffnen Sie den Speicherortordner, in dem Sie die Datei gespeichert haben. Der Ordner "HTML" und "Bilder" wird angezeigt, die bereits in Ihrer E-Mail-Vorlage gespeicherte Bilder enthalten.

Öffnen Sie die ".html" -Datei in Ihrem Browser und Sie werden feststellen, dass Ihr Newsletter jetzt in eine HTML-Vorlage konvertiert wurde.

3. HTML korrigieren, Textbild in Webschriftarten ändern

Am Ende der folgenden Schritte erhalten Sie die endgültige E-Mail-Vorlage im HTML-Format.

Alle Elemente des HTML-Newsletters werden in Bildern gespeichert, die sämtlichen Text enthalten. Nun müssen Sie die Textbilder in Webschriftarten konvertieren. Öffnen Sie dazu die HTML-Datei mit dem HTML-Editor. In diesem Beispiel verwende ich Dreamweaver.

Klicken Sie auf die Kopfzeile und prüfen Sie das hervorgehobene HTML.

Das HTML wird so ähnlich sein;

Löschen Sie nun jede markierte Zeile, oder klicken Sie auf das Kopfzeilenbild, und klicken Sie auf "Löschen". Nach dem Löschen wird der Bereich mit der Standardhintergrundfarbe gefüllt.

Gehen Sie jetzt zurück zu Photoshop und überprüfen Sie die Schriftartdetails der Kopfzeile. Sie müssen die Schriftart, Farbe und Größe ermitteln.

Wenn Sie die Details der Schriftart abgerufen haben, geben Sie den Kopfzeilentext in den Kopfbereich der Vorlage ein und fügen Sie auch die Schriftartendetails hinzu. In meinem Beispiel sieht mein HTML-Header-Text folgendermaßen aus:

ABC-Newsletter

Die HTML-Zeile oben enthält 'style'. Hier definieren Sie Ihre Hintergrundfarbe, Schriftfamilie, Schriftgröße sowie den Buchstabenabstand. Versuchen Sie, den Textraum mit einem geeigneten Buchstabenabstand und einer Schriftgröße zu füllen. Stellen Sie sicher, dass Ihre Vorlage nicht beschädigt wird.

Jetzt müssen Sie den gleichen Vorgang für jeden Text in Ihrer Vorlage wiederholen. Stellen Sie sicher, dass alle Textbilder in Webschriftarten umgewandelt werden, und vermeiden Sie unnötige Bilder in HTML.

Die nächste Option ist optional. Sie können jedoch festlegen, dass der Newsletter zentriert wird

Sektion.

Um Ihre endgültige Vorlage zu überprüfen, öffnen Sie die '.html'-Datei in Ihrem Browser.

Sie können die endgültige Vorlage hier auch als Referenz herunterladen.

4. Senden Sie HTML als Newsletter per Google Mail

Hier ist ein kleiner Trick, mit dem Sie Ihre HTML-E-Mail direkt aus Google Mail senden können. Um dies zu erreichen, müssen Sie den Newsletterordner tatsächlich auf Ihren Webserver hochladen. Falls Sie jedoch noch keinen Ordner haben, können Sie ihn stattdessen mit Dropbox erledigen.

Verwenden des öffentlichen Ordners Dropbox

Wenn Sie Ihr Dropbox-Konto vor dem 1. August 2012 registriert haben, können Sie die folgenden Schritte ausführen.

1. Registrieren Sie ein kostenloses Konto bei Dropbox und installieren Sie die App auf Ihrem PC oder Mac, sodass Sie den Upload-Vorgang über das Web überspringen können. Lassen Sie die App das Hochladen für Sie übernehmen.

   

2. Die von Ihnen erstellte E-Mail-Vorlage wurde in einem Ordner gespeichert. Kopieren Sie den Ordner und fügen Sie ihn in das Verzeichnis ein Öffentlichkeit Ordner in Ihrer Dropbox (Dropbox> Öffentlich).

   

3. Suchen Sie nun Ihre '.html' -Datei im Ordner, klicken Sie mit der rechten Maustaste und wählen Sie Öffentlichen Link kopieren.

   

4. Wenn Sie "Public Link kopieren" wählen, wird der Link in Ihrem Computerspeicher gespeichert. Fügen Sie diesen Link in Ihren Webbrowser ein und öffnen Sie ihn als Webseite.

   

5. Sie müssen den Inhalt dieses Newsletters kopieren. Verwenden Sie daher Ihre Tastatur und drücken Sie Strg + A, um alle auszuwählen. Anschließend drücken Sie Strg + C, um den gesamten Inhalt zu kopieren. (Bei Mac können Sie mit Cmd + A alle auswählen und mit Cmd + C kopieren).

6. Öffnen Sie Ihr Google Mail und klicken Sie auf Komponieren Um eine leere E-Mail zu erhalten, klicken Sie mit der Maus in das Textfeld und drücken Sie Strg + V, um den Newsletter in das E-Mail-Inhaltsfeld einzufügen. Mac-Benutzer können Cmd + V drücken

   

7. Ihr Newsletter wird jetzt als E-Mail-Inhalt angezeigt. Geben Sie den Betreff und die E-Mail-Adresse ein und senden Sie Ihren ersten E-Mail-Newsletter!

Site44 App verwenden

Da Dropbox keine öffentlichen Ordner mehr für Dropbox-Benutzer bietet, die sich nach dem 1. August 2012 registriert haben, können Sie Site44 ausprobieren, eine App, die Dropbox-Ordner in Websites umwandelt.

1. Besuchen Sie Site44 und melden Sie sich mit Dropbox an, um zu beginnen.

   

2. Erlauben Sie Site44, sich mit Ihrem Dropbox-Konto zu verbinden. In den meisten Fällen müssen Sie Ihre E-Mail-Adresse bestätigen.

   

3. Klicken Sie auf "Klicken Sie auf eine neue Website", um zu beginnen.

   

4. Geben Sie im Abschnitt "Site44.com-Domäne verwenden" Ihren bevorzugten Ordnernamen für diese Website in Ihre Dropbox ein und klicken Sie auf "Erstellen". In diesem Fall verwende ich "MeinNewsletter"als mein Ordnername. Danach akzeptieren Sie die Nutzungsbedingungen, um fortzufahren.

   

5. Jetzt hat Site44 neue Ordner für die Website in Ihrer Dropbox erstellt.

   

6. Kopieren Sie den zuvor erstellten Ordner newsletter.html und images in den Dropbox-Ordner mynewsletter.site44.com.

   

7. Öffnen Sie den Webbrowser und besuchen Sie http://mynewsletter.site44.com/newsletter.html.

   

8. Sie müssen den Inhalt dieses Newsletters kopieren. Verwenden Sie daher Ihre Tastatur und drücken Sie Strg + A, um alle auszuwählen. Anschließend drücken Sie Strg + C, um den gesamten Inhalt zu kopieren. (Bei Mac können Sie mit Cmd + A alle auswählen und mit Cmd + C kopieren).

9. Öffnen Sie Ihr Google Mail und klicken Sie auf Komponieren Um eine leere E-Mail zu erhalten, klicken Sie mit der Maus in das Textfeld und drücken Sie Strg + V, um den Newsletter in das E-Mail-Inhaltsfeld einzufügen. Mac-Benutzer können Cmd + V drücken

   

10. Ihr Newsletter wird jetzt als E-Mail-Inhalt angezeigt. Geben Sie den Betreff und die E-Mail-Adresse ein und senden Sie Ihren ersten E-Mail-Newsletter!

Fazit

Solange der HTML-Ordner des Newsletters noch in Ihrem öffentlichen Dopbox-Ordner gespeichert ist, kann Ihr Empfänger Ihren Newsletter richtig anzeigen. Sobald Sie den Ordner jedoch entfernt haben, wird der Link unterbrochen und der Empfänger kann nur den Text. Ich hoffe, Sie können diesem Tutorial folgen, wie ein einfacher HTML-Newsletter mit Photoshop erstellt und dann in HTML-Form über Google Mail gesendet werden kann. Wenn Sie andere Möglichkeiten haben, teilen Sie es mit den übrigen Lesern.