Das vollständige Handbuch zum Entwerfen für E-Mails

Beim Entwurf für E-Mail geht es darum, auf den Punkt zu kommen und die kurze Chance zu nutzen, die Sie mit Ihren Abonnenten haben. Sie haben nur einen Schuss, also lohnt es sich, so viele Tricks wie möglich im Buch einzusetzen, um sicherzustellen, dass Ihre Botschaft durchgeht. Bei den Grundprinzipien geht es darum, Ihre Leser zu respektieren, indem Sie ihnen für ihre Zeit etwas Wertvolles geben, was schließlich der Grund ist, warum sie sich angemeldet haben, um von Ihnen überhaupt zu hören.

Ein Hinweis, bevor wir loslegen

Einige der Vorschläge, die ich machen werde, gelten nicht für jede Liste, Firma oder jedes Produkt. Testen Sie wie immer bei E-Mails alles Neue und sehen Sie, wie es funktioniert, um herauszufinden, was für Ihre Abonnenten am besten ist.

Regel Nr. 1: Sei transparent

Das ist wirklich wichtig. Vermeiden Sie die Verwendung rätselhafter oder kryptischer Absendernamen, Betreffzeilen, Vorsätze oder Kopien. Dies wird Ihre Leser verwirren und dazu führen, dass sie Ihre E-Mails eher löschen oder als Junk markieren.

Erzählen Sie Ihren Lesern, wer Sie sind, warum Sie ihnen eine E-Mail senden und was genau sie davon bekommen. Halten Sie das alles so weit oben in der E-Mail, wie Sie es bekommen können. Das bedeutet, sobald Ihre E-Mail geöffnet ist, sind Ihre Absichten und Ihre Identität klar und Ihr Vorschlag wird nicht übersehen.

Stellen Sie sicher, dass der Absendername, die Betreffzeile, der Vorleiter und der Inhalt "Über der Falz" alle für Ihre Kontaktaufnahme mit Ihren Lesern relevant und relevant sind.


Versuche dies! Klarer und offensichtlicher Absendername, Betreffzeile, Logo und Eröffnungsinhalt.

Regel Nr. 2: Seien Sie offenkundig, umarmen Sie die Konvention

Es mag langweilig erscheinen, aber konventionell zu sein, ist bei E-Mails wirklich nützlich. E-Mails sind klein und für eine sehr kurze Zeit geöffnet, daher muss die Funktion jedes Elements klar sein.

Machen Sie Ihre Links offensichtlich

Erstellen Sie schöne, große, leicht anklickbare und anklickbare Schaltflächen für Ihre Links. Machen Sie sie auf dem Handy zu 100% aus der Breite, so dass sie leicht mit einem der Daumen berührt werden können (kein Erreichen erforderlich).

Wenn Sie auch Textlinks in Ihrer Kopie haben möchten, stellen Sie sicher, dass sie fett und in einer kontrastierenden Farbe sind, so dass sie hervorstechen. Versuchen Sie, nicht zu viele Links in der Nähe zu haben, was dazu führen kann, dass ein Benutzer versehentlich auf den falschen tippt.

Etwa 50% der Eröffnungen befinden sich heutzutage auf Touch-Geräten. Vermeiden Sie daher eine Sprache, die keinen Sinn macht, wie "Klicken Sie hier"..


Von Justine Jordan auf litmus.com

Zögern Sie nicht, einen Pfeil hinzuzufügen. Studien haben gezeigt, dass sie effektiver sind. Testen Sie jedoch wie immer Ihre eigenen Abonnenten.

Machen Sie die Vorteile des Klickens offensichtlich

Die besten Schaltflächen kombinieren den Vorteil des Klickens mit der Aktion selbst. Beispiel: "Ihr neues Konto verwenden" oder "Kostenlose Testversion anfordern".

Regel Nr. 3: Weniger sagen

Schreibe nicht viel Ihre Empfänger werden die E-Mail nach Dingen durchsuchen, die sie interessieren, anstatt die gesamte E-Mail zu lesen. Teilen Sie sie in mundgerechte Stücke auf, die so kurz wie möglich sind.

Ihr Ziel bei der Marketing-E-Mail ist es, Menschen dazu zu bringen, auf Ihre Website zu klicken, sodass Sie nicht mit einem längeren Monolog aufschieben müssen, zumal eine lange aussehende E-Mail Ihre Leser mit psychischer Erschöpfung überfordert und wahrscheinlicher macht "Löschen" drücken.


Versuche dies! Kurze und kräftige Bissen mit klaren Handlungsaufforderungen.

Machen Sie es scannbar

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

Verwenden Sie klare Überschriften und nennen Sie wichtige Konzepte in Fettdruck, damit Ihre Lesegeräte den Überblick erhalten, auch wenn sie nicht alles lesen (was die meisten nicht tun)..


Versuche dies! Kurze, schlagkräftige Sätze mit offensichtlichen Knöpfen.

Sie können später mehr sagen

Wenn Sie längere Inhalte versenden möchten, die Ihren Lesern gefallen, sage ich definitiv nicht, dass im E-Mail-Marketing dafür kein Platz ist.

Menschen lesen E-Mails in allen möglichen Szenarien. Einige sind unterwegs und zwischen wichtigen Besprechungen, andere können sich im Wartezimmer eines Zahnarztes extrem langweilen, und es tut mir sehr leid, Ihnen zu sagen, dass andere immer noch auf der Toilette sitzen werden. Diese Szenarien sind alle sehr unterschiedlich, aber es ist leicht, für jeden zu sorgen, indem man sich an eine logische Hierarchie hält.

Geben Sie zuerst die kürzesten und druckstärksten Informationen an und fügen Sie dann Ihren längeren Inhalt hinzu. Auf diese Weise zwingen Sie niemanden, längere Inhalte durchzugehen, außer denen, die sich aktiv durch Ihre E-Mails arbeiten.

Wiederholen Sie Ihren Hauptaufruf

Wenn Ihre E-Mail-Nachricht lang ist und ein Benutzer den gesamten Inhalt durchlaufen hat, stellen Sie sicher, dass er leicht auf einen weiteren Aufruf zur Aktion zugreifen kann, ohne den gesamten Weg zurück zum Anfang Ihrer E-Mail-Adresse zu blättern.


Versuche dies! Priorisieren Sie Ihr Hauptangebot und fügen Sie darunter sekundäre und / oder längere Inhalte hinzu.

Werbe-E-Mails und Ankündigungen

Diese Tipps beziehen sich auf Marketing-Mitteilungen, bei denen Sie normalerweise ein oder zwei Hauptthemen ansprechen, zu denen Sie Ihre Abonnenten kontaktieren.

Verwässere deine Nachricht nicht

Wenn Sie Ihren Lesern über eine Sache schreiben, versuchen Sie, die Nachricht nicht zu verdünnen, indem Sie viele andere Dinge unter oder in einer Seitenleiste hinzufügen. Mit jeder zusätzlichen Option erhöhen Sie das Risiko, sie zu entgleisen.

Entfernen Sie alle nicht wesentlichen Elemente

Bewerten Sie das Design Ihrer E-Mail, identifizieren Sie alles, was für die Übermittlung Ihrer Nachricht nicht wesentlich ist, und entfernen Sie sie. Weniger Ablenkungen bedeuten eine klarere Kommunikation.

Geben Sie nicht zu viele Möglichkeiten

Eine zu große Auswahl erhöht die kognitive Belastung Ihrer Leser und macht sie weniger wahrscheinlich, eine Entscheidung zu treffen.

Überlegen Sie, was die Mindestanforderung ist, jemanden dazu zu bringen, auf Ihre Website zu klicken, und führen Sie dann schrittweise weitere Details ein. Das Überladen von Personen mit zu viel Auswahl zu Beginn fördert nur die Aufgabe der Aufgabe.

Wenn Sie versuchen, Ihre Abonnenten dazu zu bewegen, ein Produkt auszuwählen und zu kaufen, zeigen Sie nicht alle Optionen in der E-Mail an. Bringen Sie sie einfach auf Ihre Website und beginnen Sie mit der erforderlichen Komplexität.

Versuchen Sie, die Menschen schrittweise zu engagieren

Manchmal ist es einschüchternd, eine E-Mail mit der Aufforderung "KAUFEN! REGISTRIEREN! COMMIT !!" zu erhalten.

Versuchen Sie stattdessen, die Benutzer auf einem früheren Schritt der Reise auf Ihre Website zu bringen, z. B. "Wählen Sie Ihre Schuhgröße aus, um die verfügbaren Modelle zu sehen", anstatt "Diese Schuhe kaufen"..

Einen zentralen Punkt haben

Machen Sie den primären Handlungsaufruf zum Hauptschwerpunkt Ihrer E-Mail. Stellen Sie sicher, dass Ihre Leser nicht in einem Meer der Gleichheit nach einem Aufruf zum Handeln suchen müssen.

Einen Schwerpunkt zu erstellen ist einfach. Stellen Sie zunächst sicher, dass Sie ein vorrangiges Ziel haben. Dann müssen Sie es nur größer machen als alles andere und sicherstellen, dass um ihn herum genügend Platz vorhanden ist, so dass der Blick zuerst auf diesen Bereich gerichtet wird. Dies gilt mehr für Ihr Desktop-Design, wenn ein Benutzer viele E-Mails auf einmal sieht.

Verwenden Sie Whitespace um Elemente

Wenn Sie viele Dinge haben, die alle eine ähnliche Größe und ein ähnliches Gewicht haben, ohne Leerzeichen um sie herum, erscheinen sie als ein großer, amorpher Block, den das Auge einfach überspringt. Verwenden Sie Leerzeichen um Elemente, um den Blick auf die wichtigen Dinge zu lenken.


Versuche dies! Ein klarer Schwerpunkt und eine Struktur, die den Leser anleitet.

Universelle Tipps

Wenn die Leute gehen wollen, lassen Sie sie gehen

Vergraben, verbergen oder verdecken Sie Ihre Informationen zum Abbestellen nicht. Abgesehen davon, dass es in vielen Ländern rechtswidrig ist, ist es unhöflich und kontraproduktiv. Wenn jemand sich von Ihrem Newsletter abmelden möchte und Sie es Ihnen unmöglich machen, dies zu tun, wird er nicht mehr ein zufriedener Abonnent sein. Es erzeugt nur einen schlechten Willen für Ihre Marke, da sie gezwungen ist, Ihre E-Mails weiter zu verarbeiten (oder einen Filter einrichten, um Ihre Nachrichten in den Papierkorb zu verschieben)..

Vermeiden Sie zu viele vertikale Teilungen

Je mehr vertikale Einteilungen in einem Layout vorhanden sind, desto ablenkender ist es für das Auge. Halten Sie sich an zwei oder drei vertikale Unterteilungen innerhalb eines Gitters.

Feste Ränder sind für das Auge sehr ablenkend, halten Sie diese also auf ein Minimum.


Versuche dies! Weniger vertikale Einteilungen erleichtern das Auge.

Praktische Überlegungen

Halten Sie es unter 600px breit

Dies ist im Allgemeinen die sicherste maximale Breite für Ihr Desktop-Design, um sicherzustellen, dass Benutzer nicht horizontal scrollen müssen.

Verwenden Sie die progressive Verbesserung

Bevor Sie jedem Feld abgerundete Ecken und Schatten geben, sollten Sie sich überlegen, wie Ihr Layout funktioniert ohne diese Verbesserungen. Behandeln Sie das als "Basis" -Design, zu dem Sie Ihre abgerundeten Ecken und Schatten als Verbesserungen hinzufügen.

Das Erstellen kräftiger Formen mit eckigen Kanten sieht genauso gut aus. Benutzer neuerer E-Mail-Clients werden Ihre abgerundeten Ecken als zusätzlichen Bonus sehen können.

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

Gib deinem Design etwas Atempause

Überzeugen Sie sich davon, dass es nicht immer möglich ist, die Dinge in jedem E-Mail-Client bis zum letzten Pixel identisch aussehen zu lassen. Entwerfen Sie in diesem Sinne, um die Kopfschmerzen weiter zu lindern.

Erstellen Sie Designs, die ein bisschen Raum zum Atmen haben, bei denen es nicht darauf ankommt, ob ein Client 7 Pixel Mystery Space darunter hinzufügt. Zumindest sollten Sie sich nicht mit besonders winzigen Details auseinandersetzen, die beschädigt aussehen würden, wenn sie nur einen Pixel entfernt sind.

Betrachten Sie die ganze Erfahrung

Ihre E-Mail ist ein zusammenhängendes Ganzes. Denken Sie also darüber nach, wie alles zusammenarbeitet. Die Benutzer sehen die E-Mail zuerst in ihrem Posteingang und lesen Ihren Absendernamen, Betreff und Vorläufer. Dann wird wahrscheinlich eine Version Ihrer E-Mail mit deaktivierten Bildern angezeigt, die Standardeinstellung für die meisten E-Mail-Clients. Zum Schluss wird Ihre E-Mail so angezeigt, wie Sie es beabsichtigt haben - sofern sie Bilder zulässt.

Stellen Sie sicher, dass alles gut miteinander verbunden ist und die Abonnenten Ihre Nachricht auch mit deaktivierten Bildern verstehen können.


Im E-Mail-Posteingang (links) und bei ausgeschalteten Bildern (rechts).

Fügen Sie Ihre Hauptbotschaft nicht in ein Bild ein. Es wird standardmäßig blockiert und viele E-Mail-Clients zeigen auch keine alten Tags an.

Im folgenden Beispiel können Sie sehen, wie fast alles in der Nachricht ohne aktivierte Bilder fehlen würde, da der gesamte Text in Bildern enthalten ist und der Alt-Text nicht lesbar gemacht wurde.


Eine Velocity-Vielflieger-E-Mail mit Bildern (links) und Bildern auf (rechts).

Gestalten Sie Ihre Alt-Tags

Sie können CSS-Formatvorlagen (oder deren übergeordnete Zellen- oder Link-Tags) hinzufügen, um sicherzustellen, dass sie in Clients angezeigt werden, die alt-Tags unterstützen. Dies kann die Gesamterfahrung für Ihre Abonnenten wirklich verbessern.

Test auf Farbenblindheit

Wenn Sie Photoshop verwenden, ist dies integriert. Es gibt auch eine Reihe von Tools, mit denen Sie sehen können, wie Ihr Design auf die 10% der Menschen mit einer Form von Farbsehschwäche wirken wird.

Verbinden Sie alles

Verknüpfen Sie beim Bauen nicht nur Ihre Knöpfe. Stellen Sie sicher, dass Sie alles verknüpfen, sodass Benutzer überall klicken können. Verknüpfen Sie das Bild, die Schaltfläche und die Überschrift. Heck, verlinke sogar den Text, wenn er funktioniert.

So gestalten Sie mobilfreundliche E-Mails

Es gibt mehrere Möglichkeiten, wie Sie eine mobile E-Mail erstellen können.

1. Einspaltiges, geräteunabhängiges Design

Dies ist zweifellos der einfachste Weg, um eine mobilfreundliche E-Mail zu erhalten. Bei dieser Methode werden Bilder und Text als ziemlich groß festgelegt, sodass die Schriftart lesbar ist und die Bilder bereits groß genug sind, unabhängig davon, ob die E-Mail auf einem Desktop oder einem Mobiltelefon angezeigt wird.

Der Vorteil dieser Art von Design ist, dass Sie nur ein einziges Layout codieren müssen. Es ist definitiv Ihre schnellste und einfachste Option. Smartphone-Clients, die die Skalierung unterstützen, skalieren Ihre E-Mail auf 100% Breite. Wenn dies nicht der Fall ist, wird das horizontale Scrollen nur sehr wenig durchgeführt.

Der Nachteil ist, dass die Desktop-Version sehr groß ist (was ich persönlich nicht als Nachteil empfinde)..

Um dieses Layout zu erreichen:

  1. Entwerfen Sie Ihre E-Mail-Adresse mit einer Breite von etwa 450 Pixel
  2. Überschriften sollten mindestens 30px betragen
  3. Die Textkopie sollte mindestens 20 Pixel betragen

2. Vollständig ansprechendes E-Mail-Design

Eine vollständig reagierende HTML-E-Mail verwendet Medienabfragen, um die E-Mail auf eine bestimmte Weise anzuzeigen, abhängig von der Größe des Geräts, auf dem sie angezeigt wird. Fast keine der großen Desktop- und Webmail-Clients unterstützt Medienabfragen, aber viele Smartphone- und Tablet-Mail-Clients. Dies bedeutet, dass das Codieren von responsiven E-Mails im Vergleich zum Codieren von responsiven Websites ein wenig von vorne nach hinten ist, da Ihre Desktopversion die Basisversion ist und Sie eine Abfrage mit maximaler Breite verwenden, um das Layout an kleinere Geräte anzupassen.

Der Vorteil dieser Art von Design ist, dass Sie eine großartige E-Mail mit mehreren Spalten erstellen können, die in eine einfach zu lesende, einspaltige mobile Version übersetzt wird. Medienabfragen sind außerdem vielseitig, da Sie auf bestimmte Bildschirmgrößen und auch auf bestimmte Bildschirme mit der Pixeldichte (zum Anzeigen von Bildern mit hoher Auflösung) zielen können..

Der Nachteil ist, dass die Google Mail-App für Android (der beliebteste E-Mail-Client unter Android) keine Medienabfragen unterstützt und ungewöhnliche Ergebnisse beim Rendern Ihrer vollständig reagierenden E-Mail-Builds generieren kann. Vollständig ansprechende E-Mails benötigen auch viel mehr Zeit zum Code als ihre geräteunabhängigen Vettern.

3. Vollständig fließendes E-Mail-Design

Betrachten Sie dies als Reaktionsfähigkeit ohne die Medienanfragen.

Bei dieser Methode wird ein fließendes Design mit einer Breite von 100% und einer maximalen Breite von 600 px auf dem äußeren Tisch erstellt. Bedingte Kommentare sind erforderlich (für Outlook) sowie eine Medienabfrage (für Apple Mail, die die Eigenschaft max-width komischerweise nicht unterstützt)..

Der Vorteil dieser Art von Design ist, dass es in jedem E-Mail-Client, einschließlich der Google Mail für Android-App, ansprechbar ist. Diese Methode kann auch in Verbindung mit Medienabfragen verwendet werden, um die Textgröße und Schaltflächen der Clients, die sie unterstützen, weiter zu verfeinern.

Der Nachteil ist, dass es nur mit Designs funktioniert, die ziemlich unkompliziert sind und im Allgemeinen nicht mehr als eine Spalte enthalten. Zwei Spalteninhalte sind in Ordnung, solange sie klein genug sind, um in einer schmalen Spalte auf einem Smartphone-Bildschirm gut auszusehen.

Sie müssen auch die Möglichkeit haben, prozentuale Breiten für Ihre Bilder zu verwenden, was beim Erstellen von Vorlagen nicht immer möglich ist (häufig müssen Bilder in Vorlagen eine festgelegte Pixelbreite haben)..

Verbessern Sie Ihr E-Mail-Design

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

Hintergrundbilder

Früher waren Hintergrundbilder etwas für den "Too Hard" -Haufen, aber dank Stig Morten Myre und den Leuten von Campaign Monitor gibt es jetzt einen super einfachen Bulletproof Email Backgrounds-Generator, der den ganzen Ärger mit sich bringt. Das Hinzufügen von Hintergrundbildern zu Ihren Kampagnen ist nicht mehr erforderlich.

Web-Schriften

Die Verwendung von Webfonts ist auch eine großartige Möglichkeit, Ihr Design von den übrigen abzugrenzen. Mit ein paar zusätzlichen Überlegungen zum Design und einer kurzen Bauzeit ist es einfach, Web-Schriftarten zu implementieren, die in einer überraschend großen Anzahl von E-Mail-Clients wirklich gut dargestellt werden.

CSS3-Animation

Moderne E-Mail-Clients (z. B. Apple Mail und solche auf iPhone- und Android-Geräten) unterstützen tatsächlich CSS3-Animation. Das bedeutet, dass Sie darüber nachdenken können, ob Sie Ihren Kampagnen einige wirklich coole Dinge hinzufügen möchten. Sowohl Übergänge als auch Keyframe-Animationen werden ziemlich gut dargestellt und können eine fantastische Ergänzung für E-Mails sein (sofern sie sich in einem gewissen Maße verschlechtern), da sie die Dateigröße nicht so stark erhöhen wie eine animierte GIF.

Fazit

Da ist ein Menge zu berücksichtigen bei der Gestaltung von E-Mails! Die in diesem Artikel aufgelisteten Tipps geben Ihnen einen guten Start und suchen nach weiteren Beiträgen in dieser Reihe, die verschiedene Aspekte (wie z. B. die Verwendung von Webfonts und responsives Design) ausführlicher behandeln.