Tipps zum E-Mail-Design und häufige Fehler, auf die Sie achten sollten

Es ist eine bekannte Tatsache, dass Menschen dazu neigen, zuerst auf die visuellen Elemente zu achten, was sie oft dazu bringt, die Form dem Inhalt vorzuziehen. E-Mail-Marketing ist keine Ausnahme. Es ist die Struktur einer E-Mail, Illustrationen, Textformatierung, Farbpalette und mobile Optimierung, die normalerweise bestimmen, ob Benutzer Ihre E-Mail zu Ende lesen und die gewünschte Aktion ausführen.

E-Mail-Design beeinflusst nicht nur die Wahrnehmung des Lesers, sondern auch die Reputation des Absenders. Postfachanbieter markieren E-Mails mit Layout- und Designfehlern oft als Spam. Dies ist ein guter Grund, warum Sie sich um das Design Ihrer E-Mail-Vorlage kümmern sollten.

In diesem Artikel geben wir Ihnen einige Tipps zum E-Mail-Design, wie Sie Ihre E-Mails optisch ansprechend und insgesamt effektiv gestalten können. Wir sprechen auch über die häufigsten Designfehler und zeigen Beispiele für gut gestaltete E-Mails verschiedener Marken.

Tipps zum Design von E-Mail-Vorlagen

Eine Vorlage ist die Grundlage jeder E-Mail. Es definiert das Layout und das visuelle Erscheinungsbild Ihrer zukünftigen E-Mails und beeinflusst das Gesamtergebnis Ihrer Kampagnen.

Beim Design Ihrer E-Mail-Vorlage sollten Sie dieselben visuellen Richtlinien befolgen, die Sie für die Website eines Unternehmens, soziale Medien und andere Plattformen verwenden würden. Lassen Sie uns einige häufige E-Mail-Designfehler und E-Mail-Designtipps durchgehen, die Sie beim Erstellen Ihrer Vorlage besser berücksichtigen sollten.

Fehler zu vermeiden

1. Ändern Sie das Design von E-Mail-Vorlagen nicht zu oft. Wenn Benutzer jedes Mal eine andere E-Mail erhalten, wird es für sie schwieriger, sich an Sie zu erinnern und sie wiederzuerkennen.

2. Verwenden Sie keine Bilder anstelle von Text, weil

• Bilder werden möglicherweise nicht angezeigt;
• Sie müssen die Vorlage jedes Mal manuell ändern, wenn Sie den Text ändern möchten.
• Jegliche Promo-Codes, die auf dem Bild platziert sind, können bei Bedarf nicht kopiert und eingefügt werden;
• Postfachanbieter können E-Mails, die nur aus Bildern bestehen, als Spam markieren.

3. Verwenden Sie Ihre Unternehmensfarbe nicht als Hauptfarbe Ihrer E-Mail, wenn sie zu fett und hell ist.

4. Verwenden Sie keinen hellen oder komplexen Hintergrund für den Text.

5. Zögern Sie nicht, sich auf die Hilfe eines professionellen E-Mail-Designers zu verlassen, wenn Sie eine solche Gelegenheit haben. Eine schlecht gestaltete E-Mail kann den Ruf eines Unternehmens ruinieren oder einfach von einem Postfachanbieter als Spam markiert werden. In der Zwischenzeit kann ein professioneller Designer ein langlebiges E-Mail-Vorlagendesign erstellen, das Ihre Abonnenten interessiert und engagiert hält.

Best Practices zu befolgen

1. Entwerfen Sie E-Mail-Vorlagen immer basierend auf den visuellen Richtlinien Ihres Unternehmens. Eine ganzheitliche Betrachtung Ihres digitalen Auftritts steigert die Markenbekanntheit und stärkt die Kundenbindung.

2. Wenn Sie sich für A/B-Tests entscheiden, testen Sie einzelne Elemente anstelle einer ganzen E-Mail. So wissen Sie sicher, welche Details mehr oder weniger wirkungsvoll sind und der Stil Ihres Unternehmens bleibt für das Publikum erkennbar.

3. Erstellen Sie separate Vorlagen für verschiedene E-Mail-Typen und gestalten Sie diese in einem ähnlichen Unternehmensstil. Dies wird Ihren Abonnenten helfen, Ihre E-Mails nicht nur von denen anderer Marken zu unterscheiden, sondern sie auch anhand ihres Typs voneinander zu unterscheiden.

4. Platzieren Sie die wichtigsten Informationen und den CTA beim ersten Scrollen und stellen Sie sicher, dass die gesamte E-Mail ausgewogen aussieht. Wenn Ihre Überschriften und Beschreibungen sauber gestaltet sind, die Call-to-Action-Buttons ins Auge fallen und die Bilder hochwertig sind, werden die Empfänger reibungslos durch die gesamte E-Mail bis zum Call-to-Action geführt.

5. Versuchen Sie, Ihre E-Mails 600 px breit zu machen, damit sie in jedem E-Mail-Client korrekt angezeigt werden.

6. Alternative Textblöcke und Bilder. Dies ist nicht nur für die Lesbarkeit wichtig, sondern auch für eine bessere Zustellbarkeit Ihrer E-Mails, insbesondere wenn Sie vor nicht allzu langer Zeit begonnen haben, E-Mails zu versenden. Im Allgemeinen empfehlen wir Ihnen, das Text-Bild-Verhältnis von 80:20 oder 60:40 einzuhalten.

7. Denken Sie daran, dass es für einen hellen Hintergrund immer besser ist, einen kontrastierenden, stumpfen Platzhalter zu verwenden.

8. Sofern Sie sich nicht auf die Hilfe eines Designers verlassen können, können Sie E-Mail-Vorlagen mithilfe von Drag-and-Drop-E-Mail-Editoren selbst erstellen.

Sehen wir uns nun einige Beispiele an, die diese Best Practices in Aktion demonstrieren.

Die ersten beiden Beispiele haben wir von Behance übernommen. Beide Vorlagen, eine für Willkommens-E-Mails und eine für wöchentliche „Neue Inspiration“-E-Mails, folgen ähnlichen Designprinzipien, sehen jedoch etwas anders aus. Die Willkommens-E-Mail hat einen großen und klaren Titel, hochwertige Bilder, ein unterbrochenes Rasterlayout und eine gut lesbare Schriftart. Die Text- und Bildblöcke sind abgewechselt, was die Lesbarkeit der E-Mail erleichtert.

Eine wöchentliche E-Mail ist insgesamt kürzer und legt mehr Wert auf Bilder, da ganz oben eine fette CTA-Schaltfläche angezeigt wird.

Hier ist ein weiteres Beispiel für eine gute E-Mail-Vorlage von Downshiftology. Das Unternehmen kann sich rühmen, minimalistische E-Mails mit einem gut strukturierten Raster zu versenden. Sie beginnen normalerweise mit einem Header und einem Intro, gefolgt von einigen hochwertigen Food-Fotos und den Hyperlinks zu den Rezepten. Eine bündig ausgerichtete Ausrichtung und helle Farben machen die E-Mail angenehm zu durchschauen und gut lesbar.

Tipps zum responsiven E-Mail-Design

Wenn Sie über das Layout und die Vorlage für Ihre E-Mails nachdenken, denken Sie immer daran, wie sie auf verschiedenen Geräten, einschließlich Mobilgeräten, aussehen werden. Hier sind einige Fehler, die Sie vermeiden sollten, und Tipps, die Sie für ein responsives E-Mail-Design befolgen sollten.

Fehler zu vermeiden

1. Vermeiden Sie die gleichzeitige Verwendung mehrerer Hyperlinks, da dies zu Unordnung führen kann. Ein Empfänger kann versehentlich auf den falschen Link tippen, der sich zu nahe an dem befindet, auf den er klicken wollte.

2. Machen Sie Ihre CTA-Buttons nicht zu klein. Das Heranzoomen, um auf eine Schaltfläche zu klicken, kann die Empfänger wirklich frustrieren.

3. Verwenden Sie keine Schriftarten, die kleiner als 14px für den E-Mail-Text und 20px für E-Mail-Schlagzeilen sind, da Ihre E-Mail dadurch auf kleinen Bildschirmen schwer zu lesen ist.

Best Practices zu befolgen

1. Befolgen Sie die Regeln der responsiven E-Mails. Wenn Ihre E-Mail-Vorlage beispielsweise aus mehreren Spalten besteht und diese an mobile Bildschirme angepasst werden sollen, fügen Sie einen speziellen Code ein und erstellen Sie Ihre E-Mail in einer Tabelle.

2. Verwenden Sie vorgefertigte adaptive E-Mail-Vorlagen von SendPulse oder erstellen Sie Ihre eigenen in unserem Drag-and-Drop-Builder, wenn Sie sich nicht mit dem Code herumschlagen möchten. Sie sind bereits sowohl für Desktop als auch für Mobilgeräte angepasst; Außerdem können Sie Ihre E-Mail-Vorlage jederzeit für beide Geräte in der Vorschau anzeigen.

Schauen Sie sich die folgende E-Mail von Uniqlo an, die sowohl auf dem Desktop als auch auf dem Handy gut angezeigt wird. Folgendes sieht ein Desktop-Benutzer:

Das Layout der mobilen Version ist etwas anders:

Tipps zur Verwendung von Text in Ihrem E-Mail-Vorlagendesign

Selbst die ansprechendste Kopie wird nicht beachtet, wenn sie unattraktiv aussieht oder schwer zu lesen ist. Eine E-Mail mit einem ordentlichen Layout, kurzen Absätzen, einprägsamen Überschriften und ordentlichen Hervorhebungen der wichtigsten Informationen werden Nutzer dagegen kaum vernachlässigen.

Fehler zu vermeiden

1. Mischen Sie nicht zu viele Schriftarten, Stile, Farben und Schriftgrößen in einer E-Mail, da sie dadurch schlampig aussehen können.

2. Vermeiden Sie zu kleine oder blasse Schriftarten ― in beiden Fällen kann Ihre E-Mail kaum lesbar sein.

3. Erstellen Sie keine textbasierte E-Mail ohne Absätze, Überschriften und hervorgehobene Schlüsselpunkte. Es wird Ihre Leser höchstwahrscheinlich langweilen, auch wenn Ihr Text eigentlich interessant ist.

Best Practices zu befolgen

1. Wählen Sie eine oder zwei Hauptschriftarten für Überschriften und den Haupttext, nicht mehr.

2. Verwenden Sie grundlegende Schriftarten, die von den meisten E-Mail-Clients wie Gmail, Yahoo, Outlook und anderen korrekt wiedergegeben werden. Wenn ein Dienst Ihre Schriftart nicht erkennt, wird sie durch eine andere Schriftart ersetzt, was sich negativ auf das gesamte Design der E-Mail-Vorlage auswirken kann. Als sicherste Schriftarten gelten Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier und Impact.

3. Fühlen Sie sich frei, Ihre eigenen Corporate Fonts auf Bannern und Bildern zu verwenden. Achten Sie jedoch darauf, dass die Schriftart auf dem Banner und in der E-Mail gut zusammenpasst.

4. Teilen Sie Ihren Text mit Überschriften und kurzen Absätzen in Abschnitte ein. Ein gut strukturierter Text ist immer leichter zu lesen.

5. Machen Sie Ihre Schrift nicht kleiner als 14px.

Ein Beispiel für ein gutes Textlayout ist eine E-Mail von DesignLab. Es hat eine fette zentrierte Überschrift und besteht aus drei kurzen Absätzen, gefolgt von dem prominenten CTA, der orange hervorgehoben ist.

Tipps zur Verwendung von Farbe im E-Mail-Vorlagendesign

Farbe ist ein leistungsstarkes Werkzeug, das die Stimmung einer E-Mail erzeugen und Ihre Botschaft verstärken kann. Wenn Sie jedoch die falschen Farben wählen, riskieren Sie, dass Ihre E-Mails zu langweilig, ablenkend oder chaotisch werden.

Fehler zu vermeiden

1. Überfordern Sie Ihre Leser nicht mit einem Haufen Farben. Zu viel Rot, Gelb als Hintergrund für den Text oder eine Kombination von Farben, die nicht zueinander passen, können den Eindruck, den Sie vermitteln möchten, ruinieren, da sie die Benutzer höchstwahrscheinlich von der Hauptidee ablenken.

2. Verzichten Sie auf zu viele Steigungen. Wenn sie unprofessionell verwendet werden, können sie Ihre E-Mail schlampig aussehen lassen oder die Sichtbarkeit des Textes verringern.

Best Practices zu befolgen

1. Verwenden Sie kräftige und helle Farben nur, um einzelne Elemente oder Wörter hervorzuheben, während Sie beruhigende Farben für Ihren Hintergrund wählen.

2. Berücksichtigen Sie die Vorlieben Ihres Publikums bei der Auswahl eines Farbthemas. Kissmetrics berichtete beispielsweise, dass Männer kontrastierende Farben bevorzugen, während Frauen weichere Farbpaletten wählen. Um herauszufinden, welche Farben Ihren Nutzern am besten gefallen, führen Sie A/B-Tests durch und versuchen Sie, die Farbe eines einzelnen oder mehrerer Elemente gleichzeitig zu ändern, um die Ergebnisse genau zu messen.

3. Verwenden Sie Werkzeuge wie Adobe Color, um eine perfekte Farbpalette auszuwählen, die optisch ausgewogen aussieht.

B&Q verwendet zum Beispiel ihr Corporate Orange als Highlighter und hält sich bei den restlichen Elementen an neutralere Töne.

Tipps zum Design von E-Mail-Headern

Der Header ist der erste Block einer E-Mail, der ganz oben platziert wird. Es enthält normalerweise ein Logo, Links zu Website-Abschnitten, Kontaktdaten und andere allgemeine Informationen. Der E-Mail-Header hilft Benutzern zusammen mit einem Absendernamen, einen Absender zu identifizieren.

Fehler zu vermeiden

1. Versuchen Sie nicht, zu viele Informationen in die Kopfzeile zu schreiben. Ja, Sie können zum Beispiel Links zu Ihrer Website geben, aber wenn Sie auch Ihre Social-Media-Links, detaillierte Kontaktinformationen und andere Blöcke in Ihrem Header platzieren, wird dieser zu groß und höchstwahrscheinlich verwirrend.

2. Verwenden Sie keine Bilder von schlechter Qualität in Ihrem Header und an anderer Stelle in Ihrer E-Mail, da dies den Eindruck eines Amateur-Designs erweckt.

Best Practices zu befolgen

1. Betonen Sie die Hauptinformationen Ihres Headers und lassen Sie die anderen Elemente etwas kleiner oder weniger hell sein.

2. Verwenden Sie spezielle thematische Überschriften während der Feiertage, der Verkaufssaison und anderer besonderer Ereignisse, um die Stimmung zu stimmen. Sie können auch Header für verschiedene Arten von E-Mails variieren, z. B. Digests oder Transaktions-E-Mails.

Schauen Sie sich den minimalistischen Header in der E-Mail von TheRealReal an:

Tipps zum Design von E-Mail-Fußzeilen

Der allerletzte, aber nicht der kleinste Block einer E-Mail ist die Fußzeile. Es enthält normalerweise eine E-Mail-Signatur, einen Abmeldelink, Kontaktdaten des Unternehmens und Links zu sozialen Medien. Obwohl dieser Block am einfachsten zu entwerfen zu sein scheint, gibt es dennoch einige Fehler, die Unternehmen häufig machen.

Fehler zu vermeiden

1. Überladen Sie Ihre Fußzeile nicht mit zu vielen allgemeinen Informationen, damit sie nicht unordentlich und verwirrend aussieht.

2. Verstecken Sie den Abmeldelink niemals, machen Sie ihn zu klein oder kaum sichtbar. Wenn es einem Benutzer schwerfällt, sich abzumelden, wird er höchstwahrscheinlich auf „Spam“ klicken, was immer eine schlechte Nachricht für Ihren Ruf des Absenders ist.

Best Practices zu befolgen

1. Fügen Sie nur die Links zu Ihrer Fußzeile ein, die für Ihre Benutzer wirklich wichtig sind; Versuchen Sie, ähnliche Inhaltsblöcke zu gruppieren, um die Lesbarkeit zu verbessern.

2. Seien Sie ehrlich zu Ihrem Publikum und machen Sie Ihren Abmeldelink gut sichtbar.

3. Fügen Sie Ihrer Fußzeile eine kreative E-Mail-Signatur hinzu, um Ihre E-Mail freundlich zu beenden und den Empfänger darauf zu freuen, das nächste Mal von Ihnen zu hören.

Die Fußzeile der E-Mail von LinkedIn, die Sie unten sehen können, folgt den oben genannten Tipps perfekt. Es enthält eine E-Mail-Signatur, einen eindeutigen Abmelde-Button und die Kontaktdaten des Unternehmens, ohne dass unnötige Angaben gemacht werden.

Tipps zur Verwendung von Bildern im E-Mail-Design

Visuals spielen eine wichtige Rolle in einem E-Mail-Design: Eine kluge Auswahl an Bildern kann Ihre Abonnenten sofort auf eine bessere Basis stellen und ihre Bindung an die E-Mail bis zum Ende sicherstellen.

Fehler zu vermeiden

1. Erstellen Sie keine E-Mails, die nur aus Bildern bestehen, da 43% der Benutzer die Bilder in ihren E-Mail-Clients deaktivieren; Beachten Sie jedoch, dass der Inhalt Ihrer E-Mail klar bleiben sollte, auch wenn die Bilder nicht sichtbar sind.

2. Machen Sie keine Bilder größer als empfohlen. Wenn beispielsweise empfohlen wird, Bilder mit einer Breite von 300 Pixeln zu verwenden, verwenden Sie keine Bilder mit einer Breite von 1200 Pixeln.

Best Practices zu befolgen

1. Optimieren Sie Bilder, bevor Sie sie zu Ihrer E-Mail hinzufügen. Das Laden einer E-Mail mit vielen Bildern dauert länger, insbesondere auf Mobiltelefonen. Höchstwahrscheinlich wartet ein Benutzer nicht auf das Laden von Bildern und schließt die E-Mail einfach. Verwenden Sie zum Optimieren von Bildern Tools wie Squoosh oder TinyPNG.

2. Fügen Sie Ihren Bildern Alternativtext hinzu, damit die Benutzer verstehen, worum es bei den Bildern geht, falls sie nicht automatisch geladen werden.

3. Vergrößern Sie Ihre Symbole um das Doppelte, damit sie auf iPhone- und Macbook-Geräten mit Retina-Bildschirm gut aussehen. Wenn Sie beispielsweise ein 70×20-Symbol verwenden müssen, laden Sie eine 140×40-Version auf den Server hoch und ändern Sie dann die Größe des Symbols in Ihrer E-Mail mit dem folgenden Attribut: width="70" .

Notiz! Wenn Sie diese Methode verwenden, ändern Sie nur die Größe eines Bildes und nicht sein Gewicht. Deshalb sollten Sie Ihre Bilder zuerst optimieren und dann auf den Server hochladen.

4. Bilder anklickbar machen. Wenn Sie sich eine Klickkarte Ihrer E-Mails ansehen, werden Sie meistens feststellen, dass die Leute auf Bilder klicken. Nutzen Sie diesen Vorteil, um Menschen auf Ihre Website oder Ihre sozialen Medien zu führen.

5. Verwenden Sie qualitativ hochwertige Bilder, die Sie selbst aufgenommen oder auf Stock-Foto-Websites gefunden haben.

Wenn Sie zu den Beispielen übergehen, werden Sie möglicherweise feststellen, dass TheSill daran denkt, alternativen Text hinzuzufügen, um zu verdeutlichen, welche Arten von Blumen auf den Bildern abgebildet sind.

Währenddessen verwendet das New York Times Magazine hochwertige Bilder und einzigartige Illustrationen, um ihre mit Text gefüllten E-Mails aufzuhellen.

CTA-Designtipps

Ein Call-to-Action in einer E-Mail ist ein Link oder eine Schaltfläche, die erstellt wird, um eine Art Antwort von einem Benutzer zu erhalten – Registrierung, Kauf oder Kontakt mit einem Manager. Ein klarer Call-to-Action und seine korrekte Platzierung helfen Ihnen, Ihre CTR zu erhöhen, während Fehler in einem CTA die Fähigkeit Ihres Abonnenten erschweren können, eine gewünschte Aktion auszuführen, wodurch Ihre E-Mail einfach nutzlos wird.

Fehler zu vermeiden

1. Verstecken Sie keinen einzigen Call-to-Action-Button am Ende Ihrer E-Mail oder sogar hinter dem ersten Scrollen.

2. Lassen Sie die Benutzer nicht raten, was sie tun müssen, sondern geben Sie ihnen stattdessen einen klaren Anruf.

3. Verbergen Sie Ihre Hyperlinks nicht, wenn Sie sie anstelle von CTA-Schaltflächen verwenden. Sie sollten nicht gegen andere Elemente der E-Mail verloren gehen. Sie sollten auch nicht zu klein oder entsättigt sein.

Best Practices zu befolgen

1. Platzieren Sie Ihren Haupt-CTA beim ersten Scrollen. Wenn Ihre E-Mail lang ist, können Sie die CTA mehrmals wiederholen.

2. Stellen Sie sicher, dass Ihre Betreffzeile und Ihr CTA dem gleichen Thema gewidmet sind.

3. Machen Sie Ihre CTA-Taste hell und sichtbar. Es sollte sich vom Hintergrund, Text und anderen Elementen einer E-Mail abheben.

In einer ihrer E-Mails wiederholte LinkedIn beispielsweise ihren CTA nicht nur zweimal, sondern machte ihn auch fett und kontrastreich.

An einem anderen Beispiel von Neil Patel sehen Sie möglicherweise, dass die Betreffzeile der E-Mail mit dem CTA-Text korreliert:

Eine Checkliste mit Tipps zum E-Mail-Design

Damit Sie Ihre E-Mails vor dem Senden leicht überprüfen können, haben wir alle Richtlinien zusammengestellt, an die Sie sich erinnern sollten, und sie nach Kategorien gruppiert.

Wir glauben, dass Sie mit all diesen Tipps in der Lage sein werden, ansprechende und gut gestaltete E-Mails zu erstellen, und das nicht ohne SendPulse. Der Service hilft Ihnen auch beim A/B-Testen verschiedener Elemente Ihrer E-Mail und bei der Auswahl der besten Optionen für Ihre Kampagne.