Die vollständige Anleitung zum Entwerfen der E-Mails

() translation by (you can also view the original English article)

Das Entwerfen der E-Mails ist es das, was Sie wirklich brauchen und das ist die Möglichkeit einen Kontakt mit Ihren Abonnenten haben. Sie haben nur eine Chance und es lohnt sich, so viele Tricks, wie möglich, im Buch anzuwenden, um sicherzustellen, dass Ihre Nachricht durchkommt. Zu den grundlegenden Prinzipien gehören auch Ihre Leser zu respektieren, indem Sie ihnen als Gegenleistung für ihre Zeit etwas Wertvolles geben. Schließlich ist es der Grund, warum sie sich angemeldet haben, um überhaupt von Ihnen zu hören.

Ein Hinweis, bevor wir anfangen

Einige der Vorschläge passen nicht für jede Liste, Firma oder jedes Produkt. Testen Sie, wie immer, in den E-Mails alles Neue und sehen Sie, wie es funktioniert, um festzustellen, was für Ihre Abonnenten das Beste ist.

Regel 1: Seien Sie transparent

Das ist wirklich wichtig. Vermeiden Sie rätselhafte oder kryptische Absendernamen, Betreffzeilen, Vorüberschriften oder Kopien. Dies verwirrt Ihre Leser nur und erhöht die Wahrscheinlichkeit, dass sie Ihre E-Mail löschen oder als Junk markieren.

Sagen Sie Ihren Lesern, wer Sie sind, warum Sie ihnen eine E-Mail senden und was sie aus dieser Erfahrung herausholen werden. Halten Sie das alles so nah, wie möglich, am oberen Rand der E-Mail. Das bedeutet, sobald Ihre E-Mail geöffnet ist, Ihre Absichten und Ihre Identität klar sind und Ihr Vorschlag nicht übersehen wird.

Stellen Sie sicher, dass Ihr Absendername, Ihre Betreffzeile, Ihr Preheader und Ihr Inhalt über dem Falz aussagekräftig und relevant für Ihren Grund für die Kontaktaufnahme mit Ihren Lesern sind.

Versuchen Sie! Klarer und offensichtlicher Absendername, Betreffzeile, Logo und Eröffnungsinhalt.

Regel 2: Seien Sie offensichtlich, umarmen Sie die Konvention

Das kann langweilig sein, aber regelmäßige Kommunikation ist für E-Mails sehr nützlich. E-Mails sind klein und werden für einen sehr kurzen Zeitraum geöffnet. Daher muss die Funktion jedes Elements kristallklar sein.

Machen Sie Ihre Links offensichtlich

Erstellen Sie schöne, große, leicht anklickbare und tippbare Schaltflächen für Ihre Links. Stellen Sie sie auf Mobilgeräten auf 100% der Breite ein, damit Sie leicht mit beiden Daumen darauf tippen können (kein Erreichen erforderlich).

Wenn Sie auch Textlinks in Ihrer Kopie haben möchten, stellen Sie sicher, dass diese fett und kontrastreich sind, damit sie hervorstechen. Versuchen Sie, nicht zu viele Links nahe beieinander zu haben, da dies dazu führen kann, dass ein Benutzer versehentlich auf den falschen tippt.

Etwa 50% der Öffnungen werden heutzutage auf Touch-Geräten ausgeführt. Vermeiden Sie daher eine Sprache, die keinen Sinn ergibt, z.B. "Hier klicken".

email-graph — Von Justine Jordan auf litmus.com

Zögern Sie nicht, einen Pfeil hinzuzufügen - Studien haben gezeigt, dass sie effektiver sind -, aber testen Sie wie immer Ihre eigenen Abonnenten.

Machen Sie die Vorteile des Klickens offensichtlich

Die besten Schaltflächen kombinieren den Vorteil des Durchklickens mit der Aktion selbst. Beispiel: "Verwenden Sie Ihr neues Konto" oder "Fordern Sie Ihre kostenlose Testversion an".

Regel 3: Weniger sagen

Schreiben Sie nicht viel. Ihre Empfänger prüfen die E-Mail und finden die Dinge, für die sie sich interessieren, anstatt die gesamte E-Mail zu lesen. Teilen Sie sie daher in mundgerechte Teile auf, die so kurz wie möglich sind.

Ihr Ziel bei Marketing-E-Mails ist die Leute dazu zu bringen, dass sie auf Ihre Website zu klicken. Also, Sie müssen nicht mit einem langen Monolog verzögern, zumal eine lang aussehende E-Mail Ihre Leser mit geistiger Müdigkeit überwältigen und sie wahrscheinlicher machen wird um auf "Löschen" zu klicken.

Try this Short and punchy bites with clear calls to action — Versuchen Sie das! Kurze und schlagkräftige Bisse mit klaren Handlungsaufforderungen.

Machen Sie es durchsuchbar

Gestalten Sie Ihre E-Mail so, dass sie druckvoll ist. Der Text sollte in klaren, abgegrenzten Abschnitten erscheinen, die auf den Punkt kommen.

Verwenden Sie klare Überschriften und rufen Sie fett gedruckte Schlüsselkonzepte auf, damit Ihre Scan-Leser das Wesentliche verstehen, auch wenn sie nicht alles lesen (was die meisten von ihnen nicht tun).

Try this Short punchy sentences with obvious buttons — Versuchen Sie das! Kurze druckvolle Sätze mit offensichtlichen Knöpfen.

Sie können später mehr sagen

Wenn Sie längere Inhalte senden möchten, die Ihren Lesern gefallen, sage ich definitiv nicht, dass es im E-Mail-Marketing keinen Platz dafür gibt.

Menschen lesen E-Mails in verschiedenen Szenarien. Einige sind unterwegs und zwischen wichtigen Besprechungen, andere langweilen sich möglicherweise im Wartezimmer eines Zahnarztes, und es tut mir sehr leid, Ihnen mitteilen zu müssen, dass andere noch auf der Toilette sind. Diese Szenarien sind alle sehr unterschiedlich, aber es ist einfach, alle zu bedienen, indem man sich an eine logische Hierarchie hält.

Geben Sie zuerst die kürzesten und aussagekräftigsten Informationen ein und fügen Sie dann Ihren Inhalt in längerer Form darunter ein. Auf diese Weise zwingen Sie niemanden, sich durch längere Inhalte zu wühlen, außer denen, die sich aktiv durch Ihre E-Mails arbeiten.

Wiederholen Sie Ihren Hauptaufruf zum Handeln

Wenn Ihre E-Mail lang ist und ein Benutzer Ihren gesamten Inhalt durchgeblättert hat, stellen Sie sicher, dass er einfachen Zugriff auf einen anderen Aufruf zum Handeln hat, ohne ganz nach oben scrollen zu müssen.

Try this Prioritise your main proposition then include secondary andor lengthier content underneath — Versuchen Sie! Priorisieren Sie Ihren Hauptvorschlag und fügen Sie dann sekundären und/oder längeren Inhalt darunter ein.

Werbe-E-Mails und Ankündigungen

Diese Tipps gelten für Marketingnachrichten, bei denen es normalerweise ein oder zwei wichtige Dinge gibt, über die Sie Ihre Abonnenten kontaktieren.

Verwässern Sie Ihre Nachricht nicht

Wenn Sie Ihren Lesern über eine Sache schreiben, versuchen Sie, die Nachricht nicht zu verwässern, indem Sie viele andere Dinge unter oder in eine Seitenleiste einfügen. Mit jeder zusätzlichen Option erhöhen Sie das Risiko, sie zu entgleisen.

Entfernen Sie alle nicht wesentlichen Elemente

Bewerten Sie das Design Ihrer E-Mail, identifizieren Sie alles, was für die Übermittlung Ihrer Nachricht nicht unbedingt erforderlich ist, und entfernen Sie es dann. Weniger Ablenkungen bedeuten eine klarere Kommunikation.

Geben Sie nicht zu viele Möglichkeiten

Zu viel Auswahl erhöht die kognitive Belastung Ihrer Leser und verringert die Wahrscheinlichkeit, dass sie eine Entscheidung treffen.

Überlegen Sie, welche Mindestanforderung besteht, um jemanden zum Klicken auf Ihre Website zu bewegen, und führen Sie dann schrittweise weitere erforderliche Details ein. Das Überladen von Menschen mit zu viel Auswahl zu Beginn wird nur dazu führen, dass Aufgaben aufgegeben werden.

Wenn Sie versuchen, Ihre Abonnenten dazu zu bringen, ein Produkt auszuwählen und zu kaufen, geben Sie nicht alle Optionen in der E-Mail an. Bringen Sie sie einfach auf Ihre Website und führen Sie dort die erforderliche Komplexität ein.

Versuchen Sie, Menschen schrittweise einzubeziehen

Manchmal ist es einschüchternd, eine E-Mail zu erhalten, in der sofort steht: "KAUFEN! ANMELDEN! VERPFLICHTEN !!"

Versuchen Sie stattdessen, die Leute in einem früheren Schritt der Reise auf Ihre Website zu bringen, z. B. "Wählen Sie Ihre Schuhgröße aus, um die verfügbaren Modelle anzuzeigen", anstatt "diese Schuhe zu kaufen".

Haben Sie einen Schwerpunkt

Machen Sie den primären Aufruf zum Handeln zum Hauptschwerpunkt Ihrer E-Mail. Stellen Sie sicher, dass Ihre Leser nicht in einem Meer der Gleichheit nach einem Aufruf zum Handeln suchen müssen.

Das Erstellen eines Schwerpunkts ist einfach. Stellen Sie zunächst sicher, dass Sie ein primäres Ziel haben. Dann müssen Sie es nur noch größer als alles andere machen und sicherstellen, dass genügend Platz um es herum vorhanden ist, damit das Auge zuerst auf diesen Bereich gelenkt wird. Dies gilt mehr für Ihr Desktop-Design, wenn ein Benutzer einen Großteil der E-Mails auf einmal sieht.

Verwenden Sie Leerzeichen um Elemente

Wenn Sie viele Dinge haben, die alle eine ähnliche Größe und ein ähnliches Gewicht haben, ohne Leerzeichen, erscheinen sie als ein großer, amorpher Block, den das Auge einfach überspringt. Verwenden Sie Leerzeichen um Elemente, um das Auge auf die wichtigen Dinge zu lenken.

Try this A clear focal point and a structure that guides the reader — Versuchen Sie das! Ein klarer Schwerpunkt und eine Struktur, die den Leser führt.

Universelle Tipps

Wenn die Leute gehen wollen, lassen Sie sie gehen

Begraben, verbergen oder verdecken Sie Ihre Abmeldeinformationen nicht. Abgesehen davon, dass es in vielen Ländern rechtswidrig ist, ist es unhöflich und kontraproduktiv. Wenn sich jemand von Ihrem Newsletter abmelden möchte und Sie dies unmöglich machen, wird er nicht wieder ein glücklicher Abonnent sein. Das führt nur zu einem schlechten Willen gegenüber Ihrer Marke, da diese gezwungen ist, Ihre E-Mails weiter zu verarbeiten (oder einen Filter einzurichten, um Ihre Nachrichten in den Papierkorb zu senden).

Vermeiden Sie zu viele vertikale Unterteilungen

Je mehr vertikale Unterteilungen ein Layout enthält, desto ablenkender ist es für das Auge. Halten Sie sich an zwei oder drei vertikale Unterteilungen innerhalb eines Rasters.

Feste Ränder lenken das Auge auch sehr ab. Halten Sie diese daher auf ein Minimum.

Try this Fewer vertical divisions make it easier on the eye — Versuchen Sie das! Weniger vertikale Unterteilungen erleichtern das Auge.

Praktische Überlegungen

Halten Sie es unter 600px breit

Dies ist im Allgemeinen die sicherste maximale Breite für Ihr Desktop-Design, um sicherzustellen, dass Benutzer nicht horizontal scrollen müssen.

Verwenden Sie die progressive Verbesserung

Überlegen Sie, wie Ihr Layout ohne diese Verbesserungen funktioniert, bevor Sie jedem Feld abgerundete Ecken und Schlagschatten geben. Behandeln Sie dies als Ihr "Basis" -Design, zu dem Sie Ihre abgerundeten Ecken und Schatten als Verbesserungen hinzufügen.

Das Erstellen mutiger Formen mit quadratischen Kanten sieht genauso gut aus, und Benutzer neuerer E-Mail-Clients sehen Ihre abgerundeten Ecken als zusätzlichen Bonus.

Dieser Ansatz spart Ihnen viel Zeit beim Erstellen Ihrer E-Mails. Wenn Sie ein Textfeld mit abgerundeten Ecken und einem Schlagschatten erstellen müssen und es auf jedem E-Mail-Client funktionieren muss, müssen Sie die Effekte mithilfe von Bildern erstellen. Dies kann insbesondere beim Erstellen wiederverwendbarer Vorlagen sehr zeitaufwändig sein.

Geben Sie Ihrem Design etwas Luft zum Atmen

Umfassen Sie die Tatsache, dass es nicht immer möglich ist, dass die Dinge in jedem E-Mail-Client bis zum letzten Pixel identisch aussehen. Entwerfen Sie in diesem Sinne, um Kopfschmerzen weiter unten zu lindern.

Erstellen Sie Designs mit etwas Freiraum, bei denen es keine Rolle spielt, ob ein Kunde 7 Pixel geheimnisvollen Raum darunter hinzufügt. Vermeiden Sie zumindest besonders kleine Details, die kaputt aussehen, wenn sie nur einen Pixel entfernt sind.

Betrachten Sie die ganze Erfahrung

Ihre E-Mail ist ein zusammenhängendes Ganzes. Denken Sie also darüber nach, wie alles zusammenarbeitet. Benutzer sehen die E-Mail zuerst in ihrem Posteingang und lesen Ihren Absendernamen, Betreff und Preheader. Dann sehen sie wahrscheinlich eine Version Ihrer E-Mail mit deaktivierten Bildern, die Standardeinstellung für die meisten E-Mail-Clients. Schließlich sehen sie Ihre E-Mail so, wie Sie es beabsichtigt haben - wenn sie Bilder aktivieren.

Stellen Sie sicher, dass alles gut zusammenpasst und dass Abonnenten Ihre Nachricht auch bei deaktivierten Bildern noch verstehen könne.

In the email inbox left and with images off right — Im E-Mail-Posteingang (links) und mit deaktivierten Bildern (rechts).

Fügen Sie Ihre Hauptnachricht nicht in ein Bild ein. Es wird standardmäßig blockiert und viele E-Mail-Clients zeigen Ihre Alt-Tags auch nicht an.

Im folgenden Beispiel können Sie sehen, wie fast alles in der Nachricht ohne aktivierte Bilder übersehen würde, da der gesamte Text in Bildern enthalten ist und der Alternativtext nicht so gestaltet wurde, dass er lesbar ist.

A Velocity Frequent Flyer email with images off left and images on — Eine Velocity-Vielflieger-E-Mail mit Bildern aus (links) und Bildern ein (rechts).

Gestalten Sie Ihre Alt-Tags

Sie können CSS-Stile den Bildern (oder ihren übergeordneten Zellen- oder Link-Tags )hinzufügen, um sicherzustellen, dass sie in Clients, die Alt-Tags unterstützen, gut angezeigt werden. Dies kann das Gesamterlebnis für Ihre Abonnenten wirklich verbessern.

Test auf Farbenblindheit

Wenn Sie Photoshop verwenden, ist dies integriert. Es gibt auch viele Werkzeugs, mit denen Sie sehen können, wie Ihr Design für 10% der Menschen mit einer Form von Farbsehschwäche aussehen wird.

Alles verknüpfen

Verknüpfen Sie beim Erstellen nicht nur Ihre Schaltflächen. Stellen Sie sicher, dass Sie alles verknüpfen, damit Benutzer überall klicken können. Verknüpfen Sie das Bild, die Schaltfläche und die Überschrift. Zum Teufel, verlinke sogar den Text, wenn es funktioniert.

Wie können Sie mobile E-Mails entwerfen

Es gibt verschiedene Möglichkeiten, wie Sie eine mobilfreundliche E-Mail erstellen können.

1. Einspaltiges, geräteunabhängiges Design

Dies ist zweifellos der einfachste Weg, eine mobilfreundliche E-Mail zu erhalten. Bei dieser Methode werden die Bilder und der Text so eingestellt, dass die Schriftart lesbar ist und die Bilder bereits groß genug sind, unabhängig davon, ob die E-Mail auf einem Desktop oder einem Mobiltelefon angezeigt wird.

Der Vorteil dieser Art von Design besteht darin, dass Sie nur ein einziges Layout codieren müssen. Es ist definitiv Ihre schnellste und einfachste Option. Smartphone-Clients, die die Skalierung unterstützen, skalieren Ihre E-Mails auf 100% Breite, und bei Clients, die dies nicht tun, wird nur sehr wenig horizontal gescrollt.

Der Nachteil ist, dass die Desktop-Version sehr groß ist (was ich persönlich nicht als Nachteil sehe).

So erreichen Sie dieses Layout:

Gestalten Sie Ihre E-Mail mit einer Breite von ca. 450 Pixel
Überschriften sollten mindestens 30px sein
Die Körperkopie sollte mindestens 20 Pixel groß sein

2. Vollständig ansprechendes E-Mail-Design

Eine vollständig reaktionsfähige HTML-E-Mail verwendet Medienabfragen, um die E-Mail abhängig von der Größe des Geräts, auf dem sie angezeigt wird, auf eine bestimmte Weise anzuzeigen. Fast keiner der großen Desktop- und Webmail-Clients unterstützt Medienabfragen, aber viele E-Mail-Clients für Smartphones und Tablets. Dies bedeutet, dass das Codieren von reaktionsschnellen E-Mails im Vergleich zum Codieren von reaktionsschnellen Websites ein wenig von hinten nach vorne erfolgt, da Ihre Desktop-Version Ihre Basisversion ist und Sie eine Abfrage mit maximaler Breite verwenden, um das Layout an kleinere Geräte anzupassen.

Der Vorteil dieser Art von Design besteht darin, dass Sie eine großartige mehrspaltige E-Mail erstellen können, die in eine einfach zu lesende, einspaltige mobile Version übersetzt wird. Medienabfragen sind auch vielseitig, da Sie auf bestimmte Bildschirmgrößen und auch auf bestimmte Bildschirme mit Pixeldichte (zum Anzeigen hochauflösender Bilder) abzielen können.

Der Nachteil ist, dass die Google Mail-App für Android (der beliebteste E-Mail-Client für Android) keine Medienabfragen unterstützt und beim Rendern Ihre vollständig reaktionsfähigen E-Mail-Builds zu ungewöhnlichen Ergebnissen führen kann. Vollständig reagierende E-Mails benötigen viel länger zum Codieren als ihre geräteunabhängigen Cousins.

3. Vollständig flüssiges E-Mail-Design

Stellen Sie sich dies als Reaktionsfähigkeit ohne Medienabfragen vor.

Bei dieser Methode wird ein 100% breites Fluid-Design mit einer maximalen Breite von ca. 600 Pixel auf dem Außentisch erstellt. Bedingte Kommentare sind erforderlich (für Outlook) sowie eine Medienabfrage (für Apple Mail, die die Eigenschaft max-width komischerweise nicht unterstützt).

Der Vorteil dieser Art von Design besteht darin, dass es in jedem E-Mail-Client, einschließlich der Google Mail für Android-App, reagiert. Diese Methode kann auch in Verbindung mit Medienabfragen verwendet werden, um Dinge wie Textgröße und Schaltflächen auf den Clients, die sie unterstützen, weiter zu verfeinern.

Der Nachteil ist, dass es nur mit Designs gut funktioniert, die ziemlich unkompliziert sind und im Allgemeinen nicht mehr als eine Spalte haben. Der Inhalt von zwei Spalten ist in Ordnung, solange er klein genug ist, um in einer schmalen Spalte auf einem Smartphone-Bildschirm gut auszusehen.

Sie müssen auch in der Lage sein, prozentuale Breiten für Ihre Bilder zu verwenden, was beim Erstellen von Vorlagen nicht immer möglich ist (häufig müssen Bilder in Vorlagen eine festgelegte Pixelbreite haben).

Weitere Verbesserung Ihres E-Mail-Designs

Und schließlich gibt es ein paar ausgefallene Dinge, die Sie nutzen können, um wirklich ausgefallene E-Mails zu erstellen, die wirklich auffallen.

Hintergrundbilder

Früher waren Hintergrundbilder etwas für den "Too Hard" -Stapel, aber dank Stig Morten Myre und den Mitarbeitern von Campaign Monitor gibt es jetzt einen supereinfachen Generator für kugelsichere E-Mail-Hintergründe, der den ganzen Aufwand beseitigt. Sie müssen Ihre Kampagnen nicht mehr mit Hintergrundbildern versehen.

Web-Schriftarten

Die Verwendung von Web-Schriftarten ist auch eine großartige Möglichkeit, Ihr Design von den anderen abzuheben. Mit ein wenig mehr Designüberlegung und etwas mehr Erstellungszeit ist es einfach, Web-Schriftarten zu implementieren, die in einer überraschenden Anzahl von E-Mail-Clients wirklich gut gerendert werden.

CSS3-Animation

Moderne E-Mail-Clients (wie Apple Mail und solche auf iPhone- und Android-Geräten) unterstützen tatsächlich CSS3-Animation. Dies bedeutet, dass Sie darüber nachdenken können, Ihren Kampagnen einige wirklich coole Dinge hinzuzufügen. Übergänge sowie Keyframe-Animationen lassen sich recht gut rendern und können eine fantastische Ergänzung für E-Mails sein (sofern sie sich ordnungsgemäß verschlechtern), da sie die Dateigröße nicht so stark erhöhen wie ein animiertes GIF.

Abschluss

Beim Entwerfen für E-Mails ist viel zu beachten! Die in diesem Artikel aufgeführten Tipps geben Ihnen einen soliden Einstieg und halten Ausschau nach weiteren Beiträgen in dieser Reihe, in denen verschiedene Aspekte (z. B. die Verwendung von Web-Schriftarten und Responsive Design) ausführlicher behandelt werden.