• Articles
• admin

Denken Sie darüber nach, HTML-Newsletter oder E-Mail-Kampagnen zu entwerfen, die die Aufmerksamkeit Ihres Publikums auf sich ziehen? Hervorragend. Sie haben eine Marketing-Entscheidung getroffen, die Ihnen viel ROI bringen wird.

Dieser Beitrag hilft Ihnen beim Einstieg. Wir stellen Ihnen die Grundlagen des E-Mail-Designs, der HTML-Newsletter-Codierung und der E-Mail-Zustellung vor, damit Sie Ihre Softwareoptionen vollständig verstehen.

Was ist ein HTML-Newsletter oder eine HTML-Kampagne?

In der Welt des E-Mail-Marketings gibt es zwei Arten von E-Mails. Klartext-E-Mails und HTML-E-Mails.

Die meisten Branchen, insbesondere diejenigen, die E-Mails für den Vertrieb verwenden, verwenden HTML-E-Mails.

Eine Kombination aus herausragenden Bildern, einem auffälligen Call-to-Action (CTA) und gut geschriebenem Text erregt die Aufmerksamkeit Ihrer Abonnenten im Posteingang. Wie in diesem Beispiel von Rooted NYC:

Der größte Vorteil der Erstellung von HTML-E-Mails gegenüber einfachem Text ist das Newsletter-Design.

Sie können genau steuern, wie die E-Mail in Posteingängen angezeigt wird. Dies entspricht dem Senden einer Website oder einer Hochglanz-Werbebroschüre direkt an einen Posteingang. Sie können Farben, Schriftarten und Bilder so mischen und anpassen, dass Ihr Markenimage erfasst wird.

Beachten Sie jedoch, dass in anderen Branchen wie dem Rechtsbereich und der Technologie Klartext-E-Mails eine bessere Leistung erbringen können, da sie einen gewissen Grad an Ernsthaftigkeit vermitteln. Sie sehen weniger wie Werbung aus.

Entwerfen, Codieren und Versenden eines HTML-Newsletters

Wenn Sie lernen, eine HTML-E-Mail oder einen HTML-Newsletter zu erstellen, müssen Sie erkennen, dass es 3 isolierte Schritte gibt, die in die Erstellung einfließen.

1. Gestalten Sie Ihre E-Mail. Entscheiden Sie, wie es in den Posteingängen Ihrer Abonnenten aussehen soll.
2. Kodieren Sie Ihr Design in HTML. Setzen Sie das Design in eine Programmiersprache, die E-Mail-Clients rendern können.
3. Senden Sie Ihre E-Mail. Stellen Sie sicher, dass es in den Posteingängen Ihrer Zielgruppe ankommt.

Es gibt eine Vielzahl von Programmen, die Sie für alle Aspekte der Newsletter-Erstellung verwenden können. Sie können ein separates Programm für Design, Codierung und Senden auswählen.

Oder Sie können ein einziges Tool für alle drei Schritte verwenden – eine E-Mail-Marketing-Software. Wir empfehlen Ihnen, für diesen Prozess ein einzelnes Tool anstelle von drei separaten Tools auszuwählen (vorzugsweise Sendinblue). 😉

Sie sparen Zeit und Energie.

Aber wir werden Sie durch alle möglichen Optionen führen, damit Sie genau wissen, womit Sie es zu tun haben.

Erste Schritte beim Entwerfen eines HTML-Newsletters

Der größte Vorteil der Verwendung von Design-Software für den ersten Schritt der Erstellung eines Newsletters besteht darin, dass Sie mit einer bestimmten Design-Software vertraut sind. Das Erstellen Ihres Newsletters oder Ihrer E-Mail in einem Grafikdesignprogramm erschwert Ihnen jedoch die Arbeit.

Sie können Ihr Design nicht einfach als HTML-E-Mail exportieren oder Ihre .ai-Datei automatisch codieren.

Sie müssen es codieren oder jemanden mit professioneller HTML-Expertise dazu bringen.

Aber wenn Sie Ihre kreative Arbeit am besten in einem bestimmten Werkzeug erledigen, dann verwenden Sie es. In der Tat, wenn es um den Design-Teil geht, wird jeder Foto-Editor oder Layout-Tool den Job machen.

Hier sind die 3 wichtigsten Designeinschränkungen, die beim Entwerfen von HTML-E-Mails zu berücksichtigen sind:

1. Responsives E-Mail-Design:
   Ihre E-Mail oder Ihr Newsletter muss auf jedem Gerät lesbar sein, das Ihre Abonnenten verwenden. Es wird berichtet, dass 66% aller E-Mails in den USA auf Smartphones geöffnet werden. Dies bedeutet, dass Sie einen Entwurfsplan für die Desktop-Ansicht und die mobile Ansicht benötigen.
2. Feste Breite:
   Alle Newsletter sollten eine feste Breite haben, sodass Abonnenten nicht horizontal scrollen müssen. Sie möchten um jeden Preis vermeiden, dass sie ein herausforderndes Leseerlebnis haben! 600 Pixel ist der Industriestandard für die Breite von HTML-E-Mails, da er für die meisten Geräte geeignet ist. Sie können bis zu 650 gehen und trotzdem Ihre E-Mail korrekt rendern lassen.
3. Above the fold:
   Die Betreffzeile Ihrer E-Mail ist die erste Chance, die Aufmerksamkeit Ihres Abonnenten auf sich zu ziehen. Wenn Sie diesen Test bestehen und sie Ihre E-Mail öffnen, haben Sie noch eine Chance, ihre Aufmerksamkeit mit einem wirklich guten Header zu halten. Dies ist der Bereich, den Ihre Kontakte sehen, bevor Sie scrollen müssen. Es wird der Above-the-Fold-Raum genannt. Fügen Sie die wichtigsten Informationen gleich zu Beginn hinzu.

So erstellen Sie HTML-Newsletter mit Photoshop

Öffnen Sie ein neues Dokument in Photoshop

Erstellen Sie zunächst ein neues Dokument.

Die Breite sollte etwas größer sein als bei einem normalen Newsletter, da Sie so einen Hintergrund in Ihren Newsletter aufnehmen können. Die empfohlene Gesamtbreite beträgt 800 Pixel.

Was die Länge betrifft, sind Sie hier nicht eingeschränkt. Wenn Sie nicht sicher sind, wo Sie anfangen sollen, wählen Sie eine Länge von 1000 Pixel.

In Bezug auf die Auflösung reichen 72 DPI für einen Newsletter aus. Wie alle Bilder für das Web sollten Sie RGB-Farbe wählen, nicht CMYK, das besser zum Drucken geeignet ist.

Erstellen Sie ein 600 Pixel breites Feld im Dokument und zentrieren Sie es. Dies ist, wo der Inhalt Ihres Newsletters gehen wird. Wählen Sie als Nächstes eine Hintergrundfarbe für den Rest des Dokuments. Weiß oder Hellgrau als Hintergrundfarbe schafft ein angenehmes Leseerlebnis, das nicht ablenkt. Einige Marken haben auch mit weichen Pastellfarben für den Hintergrund gut abgeschnitten.

Wenn Ihre Marke für ihre Kühnheit bekannt ist, wählen Sie eine dreiste Kontrastfarbe für den Hintergrund. Solange es um die Marke geht, sind Sie gut (für einige Newsletter-Branding-Ideen klicken Sie hier).

Richten Sie Ihren Newsletter mit einer 600px breiten Box ein

Jetzt haben Sie Ihre Datei eingerichtet und können loslegen. Lassen Sie uns das Design von oben nach unten durcharbeiten.

Es ist üblich, einen Link zu einer Webversion des Newsletters oder der Kampagne oben in Ihrer HTML-E-Mail zu platzieren. Wenn Bilder nicht angezeigt werden (was in Microsoft Outlook standardmäßig der Fall ist) oder der E-Mail-Client Ihre E-Mail aus einem anderen Grund nicht korrekt wiedergibt, kann der Benutzer sie über den Link zu einer Webversion in seinem Browser und nicht über seinen E-Mail-Client anzeigen.

Immer mehr Marken lassen jedoch den Link zur Webversion weg oder platzieren ihn diskret am Ende der E-Mail.

Auf diese Weise lenkt es Ihre Leser nicht ab oder beeinträchtigt das koordinierte Design von allem über der Falte. Beachten Sie, dass viele Ihrer Abonnenten Microsoft Outlook verwenden, wenn Sie im B2B-Bereich arbeiten.

Fügen Sie direkt unter dem unauffälligen Link zu einer Webversion (oder wenn Sie den Link überspringen, dann als erstes Element in Ihrem Newsletter) ein Teaser-Bild hinzu. Sie können die Bildgröße in Photoshop sowie den Text anpassen.

Oft enthält das Teaser-Bild Ihr Logo und ein erkennbares Markenbild. Sie können auch eine Call-to-Action-Schaltfläche (CTA) in das Teaser-Bild einfügen. Dieser Bereich repräsentiert den kostbaren Raum über der Falte. Im Allgemeinen sollte die Länge 200-250 Pixel betragen, aber der beste Weg, um sicherzustellen, dass Sie den Bereich über der Falte abgedeckt haben, besteht darin, ihn in E-Mail-Marketing-Software zu testen.

Ein abgeschlossener Newsletter, entworfen in Photoshop

Direkt nach dem Header kommt der Körper Ihres Newsletters oder Ihrer E-Mail-Kampagne. Fügen Sie hier ein 600-Pixel-Rechteck ein, fügen Sie Text hinzu und fügen Sie Bilder nach Ihren Wünschen ein.

Duplizieren Sie einfach diesen Block für zusätzliche Newsletter-Inhalte. Verwenden Sie Hilfslinien, um die Blöcke anzupassen und die Abstände zu überprüfen. Stellen Sie sicher, dass Sie einen ausreichenden Abstand verwenden, um ein hervorragendes Leseerlebnis zu gewährleisten.

Wenn Sie Ihrem Newsletter oder Ihrer E-Mail-Kampagne Social-Media-Schaltflächen hinzufügen möchten, fügen Sie diese am Ende unter dem Text der E-Mail ein.

Schließen Sie schließlich mit einer Fußzeile. Hier sollten Sie Unternehmensinformationen und Links für Benutzer einfügen, um ihre Abonnementeinstellungen zu aktualisieren und den Newsletter einfach abzubestellen. Sie können eine kleinere, normale Schriftart verwenden, solange sie noch perfekt lesbar und anklickbar ist.

So erstellen Sie HTML-Newsletter mit InDesign

Erstellen Sie ein 600 pixel breites Dokument in InDesign

Erstellen Sie für InDesign ein neues Dokument mit einer Seitenbreite von 600 Pixel. Was die Länge betrifft, wählen Sie, was auch immer funktioniert. Speichern Sie die Seite als benutzerdefiniertes Format und öffnen Sie sie.

Ihr E-Mail-Layout folgt der gleichen Struktur wie bei der Verwendung von Photoshop:

1. Optionaler Link zum Anzeigen im Browser
2. Kopfbild über der Falte
3. Körper (Hauptinhalt)
4. Fußzeile

Ein abgeschlossenes Newsletter-Design in InDesign

Verwenden Sie in InDesign das Rechteck-Werkzeug, um drei Rechtecke übereinander zu erstellen, die seitenweit sind. Hier fügen Sie die Kopfzeile, den Newsletter-Inhalt und die Fußzeile ein.

Fügen Sie der Kopfzeile ein Bild hinzu. Platzieren Sie das Bild und fügen Sie es proportional ein. Stellen Sie sicher, dass alle Bilder, die Sie in einem InDesign-Newsletter verwenden, online gehostet werden, damit Ihre Abonnenten sie sehen können.

Fügen Sie dem Newsletter-Text einen weißen Hintergrund hinzu, um ein reibungsloses Leseerlebnis zu gewährleisten. Verwenden Sie das Textwerkzeug zum Einfügen von Text und fügen Sie schließlich Ränder hinzu, damit er nicht gegen den Rand der Seite läuft.

Die Fußzeile ist der beste Ort, um einen Abmeldelink und die anderen Unternehmensdetails zu platzieren.

So erstellen Sie HTML-Newsletter mit Illustratoren

Illustrator ein großartiges Werkzeug zum Entwerfen von Bildern.

Es ist jedoch nicht die beste Wahl für die Gestaltung eines gesamten Newsletters. Verwenden Sie Illustrator, um Ihren Newsletter-Hintergrund, Ihre Logos oder andere Grafiken zu gestalten.

Erstellen Sie Hintergründe mit Illustrator

Der Newsletter selbst sollte in einem anderen Programm erstellt werden.

So erstellen Sie einen HTML-Newsletter mit Adobe XD

Eines der neuesten Designprogramme, das sich gut für das Design von E-Mail-Vorlagen eignet, ist Adobe XD.

Tatsächlich ist es das einzige Tool, das unser Grafikdesignteam für die Erstellung von Vorlagen empfiehlt. Und sie sollten es wissen. Sie entwerfen viele von ihnen.

Adobe XD ist ein reduziertes Grafikdesign-Tool, das einfach zu erlernen, kostenlos und intuitiv ist. Um einen Newsletter in Adobe XD zu erstellen, erstellen Sie einfach eine Datei und befolgen Sie die Anweisungen unter Photoshop.

Was an der Funktionalität von Adobe XD auffällt, ist das Wiederholungsraster-Tool. Anstatt ein Feld immer wieder zu duplizieren, können Sie die Option Raster wiederholen auswählen.

Die Wiederholungsrasterfunktion

Angenommen, Sie haben einen Newsletter mit 4 Inhaltsblöcken, die als Teaser für Blog-Elemente fungieren. Erstellen Sie einen Inhaltsblock, fahren Sie mit der Maus über die Auswahl und wählen Sie Raster wiederholen. Ziehen Sie dann die Gruppe, bis Sie 4 Inhaltsblöcke haben.

Angenommen, Sie senden das Design zur Genehmigung an Ihren Chef oder Kollegen.

Und sie genehmigen es mit nur einer Änderung. Sie wollen, dass alle Schlagzeilen in der neuen Marke Pink statt in der älteren Marke Grau sind. Anstatt jede einzelne Überschrift manuell auswählen und ändern zu müssen, müssen Sie nur eine ändern, und das Muster wird automatisch in die anderen übernommen.

Eine fertige E-Mail-Kampagne, die in Adobe XD

entworfen wurde, ist besonders hilfreich, wenn Sie mit wiederholten Rastergruppen von Dutzenden oder sogar Hunderten von Bildern arbeiten. Dies ist die Art von Problem, das Sie regelmäßig im E-Commerce-Bereich begegnen.

Nicht genug Design-Tipps für Sie? Schauen Sie sich unbedingt unsere Newsletter-Design-Tipps an, wenn Sie weitere Anleitungen benötigen!

Tipps zum Codieren von HTML-Newslettern

Haben Sie Ihr Design? Haben Sie alle Zeichen-offs, die Sie brauchen? Großartig! Jetzt kommen wir zum schwierigen Teil: Wie Sie Ihren Newsletter codieren.

Einige Designprogramme haben die Möglichkeit, Ihr Dokument in HTML zu exportieren. Aber lass dich nicht täuschen. Leider funktioniert dies nicht für eine HTML-E-Mail.

Die Programmierung von HTML für E-Mails unterscheidet sich erheblich von der Programmierung für das Web. Darüber hinaus funktioniert jeder E-Mail-Client anders, sodass Sie testen müssen, wie er in verschiedenen E-Mail-Clients aussehen wird.

Wenn Sie bereits mit der Programmierung vertraut sind, lesen Sie weiter. Wir haben einige Tipps für Sie.

Wenn Sie jedoch kein Programmierer mit Erfahrung in der E-Mail-Codierung sind, haben Sie mehrere Möglichkeiten, Ihr Design in ein Format zu bringen, das korrekt gerendert wird:

1. Stellen Sie einen Programmierer ein, der Erfahrung in der Codierung von HTML-E-Mails hat
2. Wählen Sie einen E-Mail-Dienstanbieter wie Sendinblue (oh, hey, das sind wir!), und erstellen Sie das Design neu 1:1 im Drag-and-Drop-Kampagnen-Editor der Newsletter-Software.
3. Die Luxusoption: Wählen Sie einen E-Mail-Dienstanbieter, der den Add-On-Service der Programmierung einer Vorlage für Ihren Newsletter oder Ihre E-Mail-Kampagne anbietet. Sie senden ihnen die Designdateien, die genau zeigen, wie die Vorlage aussehen soll, und sie führen die Codierung im Backend der Software durch. Dann müssen Sie sich nur noch bei der Software anmelden, den gewünschten Text und die gewünschten Bilder in Ihre neue Vorlage einfügen und auf Senden klicken.

Wenn Sie Erfahrung mit der Programmierung für Website-Design haben, aber noch nie zuvor für HTML-E-Mails codiert haben, sollten Sie einige Tipps beachten.

Warum HTML-E-Mail-Programmierung so anders ist

Einer der Gründe, warum das Codieren für E-Mails so anders ist als das Codieren für Webdesign, ist, dass hier viel mehr Faktoren eine Rolle spielen, wie eine E-Mail gerendert wird. Bei der Programmierung für das Web müssen Sie sich mit Faktoren wie Betriebssystem, Browser und Bildschirmgröße auseinandersetzen.

Bei der Programmierung für E-Mails müssen Sie diese und viele weitere Faktoren berücksichtigen. Dazu gehören E-Mail-Clients, Bildblockierungsoptionen und Sendedienste.

Was mehr ist – während es nur ein paar Browser gibt, die Sie beim Codieren für das Web berücksichtigen müssen – gibt es mindestens 1.000 E-Mail-Clients weltweit, auf die Ihre HTML-E-Mail vorbereitet sein muss.

Selbst wenn Sie sich nur die E-Mail-Clients mit dem größten Marktanteil ansehen, haben Sie es immer noch mit etwa 50 E-Mail-Clients zu tun, die möglicherweise Ihre HTML-E-Mail rendern.

Außerdem werden webbasierte E-Mail-Apps in verschiedenen Browsern unterschiedlich dargestellt. Und Sie haben Tonnen von Geräten und Bildschirmgrößen, auf denen Ihre E-Mails angezeigt werden.

Um das Ganze abzurunden, müssen Sie sich mit der Tatsache auseinandersetzen, dass E-Mail-Clients meistens HTML der alten Schule verwenden. Viele der neueren Entwicklungen in HTML wurden einfach nicht von E-Mail-Client-Software übernommen. Und es gibt keine universellen Standards für E-Mail-Clients.

Alles in allem ist es eine knifflige Aufgabe, für E-Mails zu programmieren. Nichts für schwache Nerven.

HTML-Code für Newsletter und andere E-Mails: Worauf Sie achten sollten!

Um Ihren Code zu erstellen, können Sie einen einfachen Texteditor oder ein visuelles Tool wie Dreamweaver verwenden. Dieser Dinosaurier der Programmierwelt eignet sich gut zum Codieren von HTML-E-Mail-Vorlagen, da es ihn schon immer gab.

Wie wir festgestellt haben, unterscheidet sich die Programmierung eines Newsletters erheblich von der Webentwicklung. Hier sind einige der wichtigsten zu berücksichtigenden Unterschiede:

• Beginnen Sie mit der Struktur. Ihre HTML-Vorlage beginnt mit einem Doctype, der dem E-Mail-Client mitteilt, was zu erwarten ist. Folgen Sie dem mit Ihrem Header. Dies ist, wo Ihre Medienabfragen, Styling und alle Animationen gehen. Alles, was Ihrem Header folgt, zählt als Hauptteil der E-Mail. Schließen Sie diesen Inhalt mit Body-Tags ein.
• Vergessen Sie separate CSS-Dateien. Die meisten E-Mail-Clients unterstützen sie nicht. Das bedeutet, dass Sie HTML und CSS auf eine andere Weise gut zusammenspielen lassen müssen: Inline-CSS-Stile. Sie sind für die meisten E-Mail-Clients erkennbar und können für wichtige Newsletter-Designelemente wie Hintergrundfarben und Schriftarten verwendet werden.
• Umfassen Sie den Tisch. Verwenden Sie für das Newsletter-Layout verschachtelte HTML-Tabellen. Ich weiß. Ich weiß. Das fühlt sich sehr 1999 an, aber damit müssen wir arbeiten. Mit Tabellen-Tags umgehen Sie die Tatsache, dass E-Mail-Clients weder das rowspan-Attribut noch das Colspan-Attribut unterstützen. Sie möchten Tabellen überall verwenden. Verwenden Sie die Zellenauffüllung für eine verbesserte Lesbarkeit.
• Merken Sie sich den Alternativtext. Speichern Sie Ihre Bilder separat und fügen Sie Alt-Text-Tags hinzu. Dies verbessert die Zugänglichkeit und erleichtert das Lesen Ihres Newsletters in E-Mail-Clients, die Bilder blockieren.
• Seien Sie spezifisch über Ihre Schriftart! Die üblichen HTML-Tags wie H1 und H2 werden in E-Mail-Clients nicht korrekt gerendert. Sie müssen Schriftgröße und -stil direkt im HTML-Code angeben. Beachten Sie jedoch, dass nicht alle Schriftarten korrekt gerendert werden. Lesen Sie mehr über die beste Schriftart für E-Mails.

Im Folgenden finden Sie ein Beispiel für einen Code, den Sie beim Starten Ihrer E-Mail-Kampagne verwenden können. Dies wird als weißer Text auf schwarzem Hintergrund gerendert.

Versand Ihres Newsletters

Jetzt kommen wir zum dritten und letzten Schritt: Ihrem E-Mail-Versand-Tool.

Sie denken vielleicht, Sie können Ihre E-Mail einfach senden, indem Sie alle Ihre Kontakte in ein BCC-Feld mit Ihrem kostenlosen E-Mail-Dienst wie Google Mail eingeben. Leider wird die Verwendung eines regulären kostenlosen E-Mail-Anbieters für Massen-E-Mail-Kampagnen nicht ausreichen.

Das größte Problem ist, dass Sie eine extrem niedrige E-Mail-Zustellbarkeit haben, was bedeutet, dass die meisten Ihrer E-Mails es nicht einmal auf den Server der Posteingänge Ihrer Kontakte schaffen. Ihre E-Mails werden buchstäblich nie das Licht der Welt erblicken, oder, wissen Sie, der hintergrundbeleuchtete Bildschirm eines Posteingangs.

Anstatt zu versuchen, Ihre E-Mails von einem privaten E-Mail-Konto aus zu senden, müssen Sie eine Newsletter-Software wie Sendinblue verwenden. Ihr E-Mail-Marketing-Service verfügt über viele Tools und Verfahren, um sicherzustellen, dass Ihre E-Mails im Posteingang ankommen.

Mit den meisten E-Mail-Marketing-Tools können Sie den HTML-Code Ihrer E-Mail-Newsletter-Vorlagen direkt hochladen. Sobald Sie es entworfen und codiert haben, können Sie es hochladen und direkt senden.

Die schnellste Alternative zur Newsletter-Codierung

Aber es gibt einen besseren Weg. Sie müssen kein Designer oder Programmierer sein, um eine professionelle E-Mail-Kampagne zu versenden, da die Erstellung von Newslettern demokratisiert wurde.

Anstatt drei verschiedene Werkzeuge zu verwenden, können Sie alles, was hier beschrieben wird, in einem einfachen Werkzeug ausführen. Die All-in-One-Option besteht darin, eine Newsletter-Vorlage in einer E-Mail-Marketing-Software wie Sendinblue zu erstellen. Hier sind die drei Schritte der Newsletter-Erstellung:

1. Nachdem Sie einige Newsletter-Inspirationen erhalten haben, gestalten Sie Ihre E-Mails mit einem Drag-and-Drop-Editor.
2. Die Codierung erfolgt automatisch im Hintergrund, sodass Sie sich nicht um den technischen Aspekt kümmern müssen.
3. Zum Senden klicken Sie einfach auf eine Schaltfläche, um sicherzustellen, dass Ihre E-Mail den Spamfilter vermeidet und in Posteingänge gelangt.

Möchten Sie es auf unserer Plattform ausprobieren? Sie müssen lediglich ein kostenloses Sendinblue-Konto eröffnen:

Ich möchte kostenlose Newsletter mit Sendinblue erstellen >>

Für weitere Inhalte wie diesen, abonnieren Sie unseren monatlichen Blog-Newsletter und folgen Sie uns auf Twitter!