12+ Best Practices für das Design von E-Mail-Marketing-Layouts

Sind die E-Mail-Designs Ihres Unternehmens veraltet? Denn hier ist eine heiße Einstellung: Das ist nicht unbedingt etwas Negatives. Während es viele E-Mail-Design-Trends gibt, die Sie im Auge behalten sollten, gibt es auch viele zeitlose Best Practices für das E-Mail-Design, die Sie bei der Gestaltung Ihrer Marketing-E-Mails beachten sollten. In diesem Artikel werde ich mit Ihnen die Best Practices teilen, die Sie verwenden können, um leistungsstarke E-Mail-Marketing-Layouts zu erstellen. Lassen Sie uns direkt in die Details springen!

7 wesentliche Elemente eines E-Mail-Layouts

Indem Sie jedes der Elemente verstehen, die ein leistungsstarkes E-Mail-Layout bilden, können Sie sie effektiver zusammenstellen.

Jede E-Mail hat diese sieben wesentlichen Elemente:

• Header und Metadaten
• Vorkopf
• Logo und Farben
• Bilder
• Körper
• Call-to-Action (CTA)-Schaltflächen
• Fusszeile

Lassen Sie uns eines dieser Elemente und ihre Rolle in einem E-Mail-Layout ansprechen.

1. Header und Metadaten

Wenn Ihre Abonnenten Ihre E-Mail erhalten, sehen sie als erstes die Kopfzeile und die Metadaten. E-Mail-Marketing-Clients füllen die Abschnitte „Von“ und „Antwort an“ normalerweise vorab mit Informationen aus, die Sie an Ihren E-Mail-Marketing-Anbieter senden, aber Sie können die Kopfzeileninformationen einer Nachricht ändern, indem Sie einfach auf diesen Bereich in Ihrem Entwurf klicken.

Eine wirkungsvolle Betreffzeile

Obwohl die Betreffzeile technisch gesehen kein Teil des E-Mail-Layouts ist, ist sie entscheidend für die Leistung Ihrer Marketingbotschaft. Dies ist das erste, was Ihre Empfänger sehen, und langweilige, irrelevante oder spammige Betreffzeilen können dazu führen, dass Ihre E-Mail ignoriert wird.

Eine Betreffzeile ist nicht nur nützlich, um den Empfänger zu motivieren, auf Öffnen zu klicken. E-Mails ohne Betreffzeile werden eher in den Spam-Ordner geleitet. Versuchen Sie auch, ein süßes Emoji in Ihre Betreffzeile einzufügen.

Hier sind einige nützliche Tipps zum Schreiben einer guten Betreffzeile:

• Halte es kurz. Die Idee ist, zu vermeiden, dass Ihre Betreffzeile durch E-Mail-Posteingänge abgekürzt wird.
• Sei ehrlich. Verwenden Sie die Betreffzeile, um dem Empfänger mitzuteilen, was in der E-Mail steht. Versuchen Sie nicht, zu täuschen – kein „Köder und Schalter“.
• Sei so schlau wie möglich, aber nicht zu schlau. Erkundigen Sie sich bei Ihrem Team, ob ein Witz angemessen ist.
• Vermeiden Sie Spam-Auslösephrasen (wie „FREE“ oder „$$$“) und übermäßige Satzzeichen.

2. Vorkopf

Ein E-Mail-Preheader, oft auch als Einleitung bezeichnet, ist der Text, der häufig neben der Betreffzeile im Posteingang eines Empfängers erscheint. Obwohl nicht alle E-Mail-Clients den Preheader automatisch anzeigen, ist es dennoch eine gute Idee, einen benutzerdefinierten hinzuzufügen und dies als Gelegenheit zu nutzen, Ihren Lesern genau mitzuteilen, was sie beim Öffnen der E-Mail erwartet.

Beginnen Sie mit den wichtigsten Fakten, genau wie Journalisten. Wenn Sie beispielsweise für einen Rabatt werben oder ein neues Produkt vorstellen, beginnen Sie mit diesen Informationen, um Besucher zum Klicken und Weiterlesen zu verleiten.

Preheader sind beim Senden einer E-Mail nicht erforderlich, aber sie können Ihren Lesern helfen, Ihre Inhalte klarer zu verstehen. Preheader können verwendet werden, um ein Gefühl der Dringlichkeit zu vermitteln. Achten Sie auf die ersten fünf bis acht Wörter, die praktisch immer im Posteingang einer Person erscheinen.

Wenn Sie das Preheader-Feld leer lassen, werden nur die ersten paar Zeilen Ihrer E-Mail angezeigt. Ihr Empfänger sieht Ihren Preheader sowie die ersten paar Zeilen, abhängig von seinen Einstellungen. Berücksichtigen Sie dies beim Erstellen Ihrer Kopfzeilen.

3. Logo

E-Mail-Layout-Design kann ein kreativer Prozess sein, aber wenn Sie ein starkes Gefühl dafür entwickeln möchten, wer Sie als Marke sind, ist es entscheidend, sich an bestimmte grundlegende Best Practices zu halten und konsistent zu sein. Sie möchten, dass sich Ihre E-Mail-Empfänger an Ihre Markenidentifikation gewöhnen, bevor Sie die Dinge aufmischen, also stellen Sie sicher, dass Sie einen konsistenten Satz von Markenfarben und ein großartiges Logo haben, das Sie in Ihrem E-Mail-Design anzeigen können.

Wenn Sie Ihr Logo in den Text Ihrer E-Mail einfügen, achten Sie darauf, dass es sich nicht ausbreitet und den gesamten Bildschirm einnimmt. Möglicherweise müssen Sie die Größe Ihres Logos reduzieren, damit Ihre E-Mail-Leser nicht eine ganze Seite nach unten scrollen müssen, um zu sehen, was sich darunter befindet. Stellen Sie natürlich sicher, dass das Logo groß genug ist, um identifiziert oder gelesen zu werden.

Sie können möchten, dass Ihr Logo einen transparenten Hintergrund hat oder eine Form mit der Farbpalette Ihres Unternehmens hat. Nehmen Sie sich die Zeit, Ihr Logo zu ändern, während Sie eine Vorlage erstellen, damit alle Ihre E-Mails professioneller wirken.

4. Bilder

Bilder können ein nützliches Werkzeug für Ihre E-Mails sein, aber nur, wenn sie Ihren Inhalt ergänzen. Kunden oder potenzielle Kunden können schnell an Wörtern vorbeiscrollen, aber sie halten inne, wenn sie ein überzeugendes Bild sehen. Was macht eine E-Mail-Grafik ansprechend?

Bilder sollten klar und hochauflösend sein, aber nicht so groß, dass das Laden zu lange dauert. Streben Sie eine Dateigröße von etwa 1 MB und nicht mehr als 5 MB an. Zu kleine Bilder können verpixelt erscheinen und Ihre E-Mail erscheint amateurhaft. Wenn sie übermäßig groß sind, kann es lange dauern, bis die E-Mail-Clients Ihrer Leser sie herunterladen, oder schlimmer noch, sie leiten Ihre E-Mail in den Spam-Ordner weiter.

5. Körper

Wenn jemand eine E-Mail öffnet, sieht er als Erstes den Textkörper, in dem Sie mit Ihren Designelementen kreativ werden können. Erwägen Sie die Verwendung einer Drag-and-Drop-Vorlage, die auf Ihre Branche zugeschnitten ist. Es ist auch möglich, eine maßgeschneiderte Vorlage von Grund auf neu zu entwickeln, aber eine Vorlage hilft Ihnen dabei, eine sauberere, besser gestaltete E-Mail zu erstellen, die den Best Practices entspricht.

Um Ihr Layout zu erstellen, können Sie Elemente verwenden, die oft als Inhaltsblöcke bezeichnet werden. Diese helfen Ihnen, Ihre E-Mail so zu erstellen, wie Sie es sich vorgestellt haben. Sie können enthalten:

• Text
• Bilder
• Teiler
• Tasten
• Abstandshalter
• Videos
• Social-Media-Links
• Links zu anderen Inhalten wie Ihrem Blog

Welche Informationen möchten Sie Ihren Lesern mitgeben? Dadurch werden die Inhaltsblöcke bestimmt, die in Ihre Vorlage aufgenommen werden sollen. Berücksichtigen Sie bei der Entscheidung, wo welche Blöcke platziert werden sollen, die Lesbarkeit. Behalten Sie bei der Anordnung Ihrer Inhaltsblöcke das Ziel Ihrer E-Mail im Hinterkopf.

Schreiben Sie niemals zu viel Text in einen einzelnen Block, da dies für die Leser verwirrend sein könnte. Verwenden Sie eine sanfte Hintergrundfarbe, Unterüberschriften oder Aufzählungszeichen, um das Material aufzulockern. Fügen Sie visuelle Elemente hinzu, die die Botschaft Ihrer E-Mail-Kampagne darstellen können, damit der Empfänger genau versteht, was Sie von ihm erwarten.

Es ist auch möglich, Videos zu teilen, mit Animationen zu experimentieren und sogar einen Countdown-Timer in eine E-Mail einzufügen. Achten Sie nur darauf, es nicht zu übertreiben. Verwenden Sie nicht mehr als ein oder zwei dieser interaktiven Designkomponenten in einer einzigen E-Mail.

6. CTA-Schaltflächen

Call-to-Action-Buttons sind zwar technisch im Textkörper einer E-Mail enthalten, aber so wichtig, dass sie einen eigenen Abschnitt verdienen, in dem Best Practices diskutiert werden. Ihr CTA dient als Hinweis für den Leser, dem er folgen soll.

Der Text auf den Schaltflächen weist sie an, was als Nächstes zu tun ist, z. B. „Jetzt kaufen“ oder „Mehr erfahren“. Welchen Text Sie auch immer verwenden, der grundlegende Grund, warum Sie die E-Mail überhaupt versenden, ist die Idee dahinter.

Haben Sie jederzeit einen CTA-Button mit klarer und direkter Sprache. Wenn Ihre Marke jugendlich und aufregend ist, scheuen Sie sich nicht, den Wortlaut auf der Schaltfläche anzupassen, um dies widerzuspiegeln. Verwenden Sie eine aktive Sprache und so wenig Worte wie möglich, um die Aktivität zu erklären.

7. Fußzeile

Eine Fußzeile ist der Abschnitt ganz unten in jeder E-Mail. Sie können spezielle Informationen einfügen, die von Vorschriften wie dem CAN-SPAM-Gesetz gefordert werden, ohne das Hauptdesign zu beeinträchtigen.

Pflichtangaben im Fußbereich:

• Der Name und die physische Adresse Ihres Unternehmens
• Eine Möglichkeit für Ihre Empfänger, ihre Profile zu aktualisieren
• Ein Link zum Abbestellen
• Die Datenschutzrichtlinie Ihres Unternehmens

Nachdem Sie nun die 7 wesentlichen Elemente eines E-Mail-Layouts kennengelernt haben, gehen wir zu den 15 besten E-Mail-Layout-Designpraktiken über.

Top 12+ Best Practices für das Design von E-Mail-Layouts

1. Design für Mobilgeräte

Die Anzahl der auf Mobilgeräten geöffneten E-Mails ist allein in den letzten drei Jahren um 180 Prozent gestiegen, was bedeutet, dass Sie die Mehrheit Ihrer E-Mail-Abonnenten verlieren, wenn Ihre E-Mails nicht für Mobilgeräte optimiert sind.

Nehmen Sie beim E-Mail-Design eine Mobile-First-Mentalität an. Die meisten E-Mail-Clients ändern jetzt automatisch das E-Mail-Layout für mobile Geräte, während andere dies immer noch nicht tun. Verwenden Sie anpassbare Layouts, Vorlagen und CSS-Codierung (Cascading Style Sheet), um sicherzustellen, dass Ihre E-Mails responsive sind.

Halten Sie sich wann immer möglich an ein einspaltiges Layout und verwenden Sie nie mehr als drei Spalten. Stellen Sie sicher, dass die von Ihnen verwendeten Schriftarten und Calls-to-Action (CTAs) groß, klar und einfach anzuklicken sind (46 x 46 Pixel ist eine ideale Größe für mobilfreundliche CTAs). Testen Sie Ihre E-Mails immer auf verschiedenen E-Mail-Clients und Geräten, um sicherzustellen, dass sie richtig angezeigt werden.

2. Bleiben Sie bei der Breite von 600 Pixel

Da Sie nie wissen, welchen E-Mail-Client Ihre Empfänger verwenden werden, müssen Sie bei der E-Mail-Breite auf den kleinsten gemeinsamen Nenner (hust, Microsoft Outlook) setzen.

Halten Sie Ihre E-Mails für maximale Sichtbarkeit etwa oder unter 600 Pixel breit. Dadurch wird sichergestellt, dass Ihre Marketing-E-Mails im vertikalen Vorschaufenster jedes E-Mail-Clients richtig angezeigt werden können.

3. Vermeiden Sie die Verwendung von Hintergrundbildern

Hintergrundbilder werden von einigen E-Mail-Clients (Husten, Outlook) nicht unterstützt, verwenden Sie sie also auf eigene Gefahr. Wenn Sie ein Hintergrundbild verwenden müssen, stellen Sie sicher, dass es keine wichtigen Informationen oder Bilder enthält.

4. Bringen Sie Bilder und Text in Einklang

Hintergrundbilder sind nicht die einzigen, die nicht geladen werden können. Tatsächlich blockieren viele E-Mail-Clients automatisch alle Grafiken. Darüber hinaus werden E-Mails mit vielen Bildern eher als Spam markiert, was bedeutet, dass Ihre Empfänger Ihre Marketing-E-Mails möglicherweise überhaupt nicht erhalten.

Um diesen Herausforderungen zu begegnen, sollten Sie eine 50/50-Mischung aus Grafik und Text anstreben. Sie möchten Grafiken, weil sie die Aufmerksamkeit des Lesers auf sich ziehen und Ihre Geschichte schneller erzählen als Text. Stellen Sie jedoch sicher, dass Sie Ihre Erzählung weiterhin vermitteln. Fügen Sie zusätzlich zum Fließtext Alt-Text (sowie eine Fallback-Hintergrundfarbe) für jedes Bild hinzu.

So hat Medium seine Bilder mit Text in einem E-Mail-Layout ausbalanciert:

Am Ende ist es am besten, einfach davon auszugehen, dass alle Bilder blockiert werden. Wenn niemand Ihre Bilder sehen kann, ist Ihre E-Mail dann noch sinnvoll?

5. Optimieren Sie Ihre Bilder

Neben der Verwendung von Alt-Text und Hintergrundfarben für Bilder gibt es einige weitere Bildformatierungstipps, die Sie für ein optimales E-Mail-Layout-Design beachten sollten:

• Die Bildgröße sollte optimiert werden. Je größer das Bild, desto länger dauert das Laden der E-Mail. Halten Sie die Fotos so minimal wie möglich, während Sie eine hohe Qualität beibehalten.
• Geben Sie die Breite und Höhe des Bildes an. Wenn Fotos nicht geladen werden können, hilft die Angabe der genauen Größe Ihrer Fotos, Ihre E-Mail-Struktur beizubehalten. Gehen Sie niemals über eine Breite von 600 Pixel hinaus.
• Verwenden Sie für Bildspeicherorte absolute URLs. Absolute URLs sind relativen URLs aus verschiedenen Gründen vorzuziehen. Verwenden Sie für alle E-Mail-Fotos absolute Links und hosten Sie sie auf Ihrer eigenen Website.
• PNG-Dateien sollten vermieden werden. PNGs werden nicht von allen E-Mail-Clients unterstützt. Verwenden Sie stattdessen JPGs.
• Verwenden Sie keine Videos. Flash und JavaScript benötigen viel Zeit zum Laden und leiten Ihre E-Mails häufig an Spam weiter. Wenn Sie ein Video wirklich teilen möchten, verwenden Sie ein Standbild, das auf eine Seite verlinkt, die das Video enthält, anstatt das Video in die E-Mail selbst einzubetten. (Denken Sie jedoch daran, GIFs einzubinden, um das Engagement zu steigern.)

6. Halten Sie sich an gängige Schriftarten

Halten Sie sich bei der Auswahl einer Schriftart für Ihre Marketing-E-Mails an Standardsystemschriften wie Arial, Helvetica, Georgia, Tahoma, Times New Roman und Verdana. Andere Schriftarten werden möglicherweise von einigen E-Mail-Clients nicht unterstützt und werden daher möglicherweise nicht korrekt wiedergegeben, es sei denn, Sie wählen eine websichere Fallback-Schriftart.

Die Schriftgröße ist für das Lesen von E-Mails ebenso wichtig. Für Textkörper beträgt die empfohlene Mindestschriftgröße 14 Pixel, während für Überschriften die empfohlene Mindestschriftgröße 22 Pixel beträgt.

7. Erstellen Sie einen auffälligen Header

Sofern Sie keine reine Text-E-Mail versenden, sollten Sie am Anfang Ihrer E-Mail einen einfachen, aber attraktiven Header erstellen.

Die obere linke Ecke Ihrer E-Mail ist das wertvollste Gut – dort wird das Auge des Lesers zuerst angezogen. Machen Sie davon Gebrauch, indem Sie das Logo Ihres Unternehmens zusammen mit anderen relevanten Informationen (wie Ihrer Telefonnummer oder einem wichtigen Call-to-Action) auf der rechten Seite dort einfügen.

Wenn Sie nur auf Ihr Logo aufmerksam machen möchten, stempeln Sie es in die Mitte, wie unten bei Artifact Uprising zu sehen:

Stellen Sie sicher, dass sich Ihr Header über die gesamte Breite der E-Mail erstreckt. Stauen Sie jedoch nicht zu viel in Ihrem Header; Ziel ist es, es etwa 150 Pixel groß zu halten. Wenn Sie viele Produkte oder Kategorien anzeigen möchten, sollten Sie über die Verwendung einer Navigationsleiste nachdenken. Es sollte zwischen Kopfzeile und Textkörper eingefügt werden.

8. Platzieren Sie Ihre Schlüsselbotschaft „Above the Fold“

Der Begriff „above the fold“ bezieht sich im Journalismus auf den Artikel auf der Titelseite – den ersten, den die Leser sehen (und somit denjenigen, der sie dazu bringt, entweder die Zeitung zu kaufen oder weiterzumachen).

Obwohl es im E-Mail-Marketing keine buchstäbliche Faltung gibt, bleibt das Prinzip bestehen. Stellen Sie Ihre interessantesten Informationen an den Anfang Ihrer E-Mail, wenn Sie möchten, dass die Leser beim Lesen bleiben. Der optimale Platz ist innerhalb der ersten drei Zoll der E-Mail-Tiefe.

Wir sprechen von CTA-Buttons, Grafiken und Text – gehen Sie nicht davon aus, dass Sie bis zum Ende der E-Mail warten müssen, um die Leser zum Handeln zu ermutigen. Die CTAs mit dem höchsten Engagement stehen häufig ganz oben in einer E-Mail.

Nutzen Sie auch die linke Seite Ihrer E-Mail. Laut Eye-Tracking-Technologien verweilen Menschen am längsten auf der linken Seite des Bildschirms. Denken Sie also daran, wenn Sie Schlüsselmaterial anzeigen.

9. Halten Sie Ihren Fließtext einfach

Halten Sie sich beim Verfassen einer E-Mail kurz und bündig. Dazu gehören kurze Sätze und Absätze, viel Leerraum und stilistische Hinweise wie Aufzählungszeichen und fetter Text.

Wenn Sie viel Text zu präsentieren haben, sollten Sie ein Inhaltsverzeichnis mit Links zu den einzelnen Teilen hinzufügen, damit die Leser leicht zu dem springen können, den sie sehen möchten. Vermeiden Sie jedoch zu viel Text; Es wird nicht nur die Leser überlasten, sondern auch ein Spam-Zeichen sein. Fügen Sie stattdessen klare Links zu den Inhalten Ihrer Website ein.

Wenn Sie E-Mails mit dem richtigen Namen und der richtigen E-Mail-Adresse von jemandem senden, möchten Sie vielleicht am Ende eine E-Mail-Signatur einfügen. Dies verleiht nicht nur eine persönliche Note, sondern gibt den Lesern auch einen festen Ansprechpartner, wenn sie Fragen oder Feedback haben.

10. Fügen Sie Social-Sharing-Schaltflächen hinzu

Das Vernachlässigen von Social-Sharing-Buttons in Ihren E-Mail-Marketingkampagnen ist einer der schlimmsten Fehler, die Sie machen können.

Ist es nicht Ihr ultimatives Ziel als digitaler Vermarkter, Markenbefürworter zu gewinnen? Was könnte für Ihre Marke vorteilhafter sein, als Menschen Ihre Inhalte auf ihren eigenen Social-Media-Kanälen teilen zu lassen?

Fügen Sie am Ende aller Marketing-E-Mails Links zu sozialen Netzwerken hinzu, um es ihnen einfacher zu machen. Wenn es zu eindringlich oder unrealistisch erscheint, die Leser zum Teilen des E-Mail-Inhalts zu drängen, „Folgen Sie uns!“ Tasten können stattdessen verwendet werden. Haben Sie eine mobile App? Werben Sie auch hier!

Uns gefällt, wie Uber seine Social-Sharing-Symbole auf subtile, markengerechte Weise zeigt:

11. Nutzen Sie die Fußzeile

Die Fußzeile wird zwar häufig vernachlässigt, ist aber einer der wichtigsten Aspekte jeder Marketing-E-Mail. Die Fußzeile ist ein wichtiger Bestandteil eines E-Mail-Layouts. Zunächst müssen alle kommerziellen E-Mails dem CAN-SPAM-Gesetz entsprechen, das von Ihnen verlangt, dass Sie in jeder von Ihnen gesendeten E-Mail einen Opt-out-Link sowie den Namen und die physische Adresse Ihres Unternehmens angeben. Sie sollten außerdem erklären, warum die Empfänger diese E-Mail erhalten (dh sie haben sich irgendwann angemeldet).

Diese Informationen sind nicht nur gesetzlich vorgeschrieben, sondern auch sinnvoll. Wenn Sie es Ihren Empfängern nicht einfach machen, sich abzumelden, werden sie noch unzufriedener mit Ihrem Unternehmen.

Die E-Mail-Fußzeile ist auch ein guter Bereich, um zusätzliche Kontaktinformationen, Abonnementoptionen und Links zu relevanten Website-Seiten (z. B. Ihr neues Inventar, die Filialsuche oder den Veranstaltungskalender) aufzunehmen.

12. Denken Sie an Einfachheit

Vor allem einfache und unkomplizierte E-Mail-Vorlagen sind der richtige Weg. Sie sind nicht nur für Leser leichter zu scannen und zu verdauen, sondern auch für E-Mail-Clients zu überfliegen und zu verdauen.

13. Testen und verbessern

Um schließlich die beste Formel für Ihr E-Mail-Design zu finden, müssen Sie sie testen. Senden Sie sich vor dem Versenden Testversionen von E-Mails, um zu prüfen, wie sie in verschiedenen E-Mail-Clients aussehen (und ob sie möglicherweise im Spam-Ordner landen).

Nach dem Versand der Nachricht sollten Sie zusätzlich Tests durchführen. Keine zwei E-Mail-Vorlagen sind gleich, ebenso wie keine zwei Leser gleich sind. Teilen Sie Ihre Liste auf und testen Sie mehrere Variationen Ihrer Marketing-E-Mails, um die optimalen Lieferzeiten, CTA-Platzierungen und andere Faktoren zu finden.

Machen Sie Ihr E-Mail-Marketing-Layout-Design einfach mit AVADA Marketing Automation

AVADA Marketing Automation ist ein leistungsstarkes E-Mail- und SMS-Marketing-Tool, das Ihnen mit seinem Drag-and-Drop-E-Mail-Builder dabei helfen kann, Ihre E-Mails einfach zu gestalten. Mit diesem Tool werden Design-E-Mails zum Kinderspiel, da Sie Ihre E-Mail-Elemente nur per Drag-and-Drop verschieben müssen, ohne dass eine Codierung erforderlich ist. Es bietet auch alle Funktionen, die Sie zum Erstellen und Verwalten von E-Mail-Marketingkampagnen benötigen.

Letzte Worte

Das ist es! Ich hoffe, dass dieser Artikel Ihnen die Best Practices für das Design von E-Mail-Marketing-Layouts vermittelt hat. Bitte zögern Sie nicht, unten Kommentare zu hinterlassen, um weitere Diskussionen zu diesem Thema zu führen!