So erstellen Sie HTML-E-Mails

Veröffentlicht: 2022-01-28

Das Erstellen von HTML-E-Mails ist nicht so schwer, wie es sich anhört. Sie müssen kein Entwickler sein, und Sie müssen nicht wirklich wissen, wie man programmiert.

Wenn Sie jemals einen WYSIWYG-E-Mail-Editor (What You See Is What You Get) verwendet haben, haben Sie bereits eine HTML-E-Mail erstellt. Jedes der Module, die Sie ziehen und ablegen, besteht aus HTML und Inline-CSS, die definieren, wie verschiedene E-Mail-Elemente aussehen und sich verhalten sollen.

Wenn Sie also in den meisten E-Mail-Editoren mit Drag-and-Drop-Tools entwerfen können, warum müssen Sie HTML beherrschen, um E-Mails zu erstellen?

Gute Frage.

Während die meisten E-Mail-Editoren Ihnen innerhalb der Module ziemlich viel Kontrolle geben, werden Sie nicht in der Lage sein, jeden wesentlichen Aspekt Ihrer E-Mail zu optimieren. Sie benötigen wahrscheinlich HTML, um Dinge zu ändern wie:

  • Schriftgröße
  • Alt-Text
  • Grenzen
  • Ränder
  • Polsterung
  • Bildgröße
  • Farben

Haben Sie den E-Mail-Editor von Twilio SendGrid verwendet ? Sie können E-Mails mit einer Kombination aus Drag-and-Drop-Modulen und HTML-Bearbeitung erstellen. Ein kombiniertes Kraftpaket wie dieses gibt Ihnen die vollständige Kontrolle über das Erscheinungsbild Ihrer E-Mails und gewährleistet ein konsistentes, erstklassiges Markenerlebnis in jeder Nachricht.

Glücklicherweise ist das Codieren einer HTML-E-Mail nicht allzu schwierig. Im Folgenden geben wir Ihnen die Tipps und das Know-how zur E-Mail-Struktur, das Sie benötigen, um bessere E-Mails zu erstellen.

5 Tipps zum Codieren einer HTML-E-Mail

Das Codieren einer HTML-E-Mail ist relativ einfach, aber E-Mail-Clients und Posteingänge können pingelig sein. Befolgen Sie diese Best Practices, um sicherzustellen, dass Ihre Nachrichten unabhängig vom Client, Browser oder Gerät Ihrer Empfänger gut aussehen.

1. Machen Sie Ihre E-Mails reaktionsschnell

Empfänger öffnen E-Mail-Nachrichten über verschiedene Betriebssysteme, Geräte, Bildschirmgrößen, Browser und E-Mail-Anwendungen hinweg. Jeder dieser Faktoren wird Ihre E-Mail anders darstellen, daher ist es Ihre Aufgabe sicherzustellen, dass Ihre E-Mail reaktionsschnell ist und in den meisten Posteingängen wie vorgesehen funktioniert.

Sie können viele responsive E-Mail-Vorlagen finden, aber die Aufgabe ist etwas komplizierter, wenn Sie eine HTML-E-Mail von Grund auf neu codieren. Hier sind ein paar Dinge, die dazu beitragen, dass Ihre E-Mails reaktionsschneller werden:

  • Medienabfragen einbeziehen: Mit Medienabfragen können Sie Ihre E-Mail-Vorlagen an verschiedene Geräte anpassen.
  • Verwenden Sie eine einzelne Spalte: Auf einem Desktop-Computer sind zweispaltige E-Mails möglicherweise einfach zu lesen, auf Mobilgeräten kann es jedoch etwas unübersichtlich werden.
  • Erhöhen Sie die Schriftgröße: Gehen Sie nicht kleiner als eine 13- oder 14-Punkt-Schrift.
  • Platzieren Sie Ihre Links: Sie möchten nicht, dass Leser versehentlich auf den falschen Link klicken, weil Ihre Links zu dicht beieinander lagen.
  • Alt- Tags hinzufügen: Alt-Tags beschreiben Ihre Bilder, falls die Bilder nicht geladen werden können.

2. Fügen Sie Bilder sparsam hinzu

Bilder sind großartige Ergänzungen zu Ihren E-Mail-Kampagnen, aber achten Sie darauf, es nicht zu übertreiben. Zu viele Bilder können die Ladezeiten verlängern und das Rendern von E-Mails erschweren.

Verwenden Sie kleinere Bilder, die schneller geladen werden und nicht den gesamten Bildschirm einnehmen. Fügen Sie außerdem responsive Größenelemente wie „Breite“ und „Maximale Breite“ hinzu, um sicherzustellen, dass Ihre Bilder auf jedem Gerät und E-Mail-Client richtig geladen werden.

3. Halten Sie es einfach

Denken Sie an den Zweck Ihrer E-Mail. Viele E-Mail-Designer verlieren sich in der Kunst und Kreativität und vergessen das übergeordnete Ziel der E-Mail – nämlich nicht, Oohs und Aahs zu verdienen.

Erstens möchten Sie, dass die Leute Ihre E-Mails öffnen. Als Nächstes möchten Sie, dass sie klicken und Maßnahmen ergreifen. Das kann sein, Ihre Website zu besuchen, einen Blogbeitrag zu lesen, einen Kauf zu tätigen oder sich für eine Veranstaltung anzumelden.

Halten Sie die Dinge einfach. Bieten Sie Ihren Empfängern einen Mehrwert, locken Sie sie mit Inhalten und leiten Sie sie dann zu Ihrem Aufruf zum Handeln. Das ist es. Meistens ist alles andere Flusen.

Wenn Sie Ihrer E-Mail verschiedene HTML-Elemente hinzufügen, stellen Sie sich die Frage: „Hilft dies der E-Mail, ihren Zweck zu erfüllen?“ Wenn nicht, entfernen Sie es aus Ihrem E-Mail-Design.

4. Verwenden Sie vorgefertigte E-Mail-Vorlagen

Sie finden vorgefertigte HTML-E-Mail-Vorlagen mit allem, was Sie zum Versenden einer herausragenden Kampagne benötigen. Vorlagen haben bereits die harte Arbeit geleistet, um ein gut aussehendes, responsives E-Mail-Design zu erstellen.

Wenn Ihnen eine E-Mail-Vorlage gefällt, aber nicht 100 % zufrieden damit ist, können Sie oft den HTML-Code herunterladen und die gewünschten Änderungen vornehmen. Dies kann eine hervorragende E-Mail-Bearbeitungsmethode für HTML-Neulinge sein.

5. Testen Sie Ihre E-Mails

Senden Sie niemals eine E-Mail, ohne sie vorher zu testen. Der klassische Weg, dies zu tun, wäre, eine Test-E-Mail an verschiedene E-Mail-Adressen (über E-Mail-Clients hinweg) zu senden und zu versuchen, sie auf verschiedenen Geräten zu öffnen. Wenn das nach viel verschwendeter Zeit und Kopfschmerzen klingt, haben Sie Recht.

Glücklicherweise gibt es heutzutage einen besseren Weg.

Das E- Mail -Testtool von Twilio SendGrid ist in Ihren Design-Editor integriert und hilft Ihnen, Probleme von einer einzigen Anwendung aus zu beheben. Es hilft Ihnen zu sehen, wie Ihre E-Mails auf Clients, Browsern und Geräten dargestellt werden. Beispielsweise können Sie sehen, wie Ihre E-Mails auf einem Mobilgerät mit Google Mail und auf einem Desktop mit Outlook aussehen.

E-Mail-Testtools können Ihnen auch dabei helfen, defekte Links und Schaltflächen, nach Spam aussehende Inhalte und Formatierungsprobleme zu finden.

HTML-E-Mail-Struktur

HTML-E-Mails haben eine einfache Struktur:

  • DOCTYP
  • Header
  • Körper

DOCTYP

Verwenden Sie <!DOCTYPE>, um dem Browser mitzuteilen, was er erwartet – in diesem Fall wäre es eine HTML-E-Mail.

Header

Verwenden Sie den Kopfzeilenabschnitt, um Elemente wie Stil, Größenanpassung und Metatext einzufügen.

Körper

Verwenden Sie den Textkörper für die visuellen Elemente Ihrer E-Mail, wie Text, Bilder, Tabellen, Links und dergleichen.

E-Mail-Vorlage mit HTML-Code

Hier ist ein Beispiel für eine E-Mail-Vorlage mit HTML-Code. Sie können sehen, wie diese E-Mail-Vorlage für Reise-Newsletter auf Desktop-, Tablet- und Mobilgeräten dargestellt wird.

Gefällt dir, was du siehst? Klicken Sie auf „Vorlage herunterladen“, und wir senden Ihnen eine Kopie des HTML-Codes an Ihren Posteingang. Sie können den Code dann kopieren und in Ihren E-Mail-Design-Editor einfügen, um die Vorlage zu importieren und an Ihre Marke und Kampagne anzupassen.

Sehen Sie sich andere E-Mail-Vorlagen von Twilio SendGrid an

Möchten Sie weitere E-Mail-Vorlagen? Zum Glück haben wir eine ganze Galerie voll davon . Egal, ob Sie einen Newsletter, eine Passwortzurücksetzung oder eine Terminerinnerungsvorlage benötigen, unsere kostenlose Vorlagengalerie bietet alles.

Außerdem sind diese Designs reaktionsschnell und stellen sicher, dass Ihre E-Mails auf allen Clients, Browsern und Geräten gut aussehen. Oh, und haben wir erwähnt, dass die Vorlagen kostenlos sind?

Beginnen Sie noch heute mit der Erstellung besserer HTML-E-Mails mit einer vorgefertigten Vorlage.