Grundlagen des E-Mail-Designs und wichtige Begriffe

Das Design Ihrer E-Mail sagt eine Menge über Sie aus. Es ist der erste Eindruck, den Sie hinterlassen, und den wollen Sie nicht verpfuschen!

Leider ist es auch ein kompliziertes Thema. Ein durchschnittliches E-Mail-Design kann in Dutzende verschiedener Teile unterteilt werden, und jeder Teil hat sein eigenes, einzigartiges Vokabular. Wie können Sie als hart arbeitender Geschäftsinhaber überhaupt die Zeit haben, das alles zu verstehen? Und noch schlimmer: Wie können Sie Ihre Bedürfnisse mit einem erfahrenen Designer besprechen? Wir helfen Ihnen!

Arten von E-Mail-Kampagnen

Bevor Sie sich Gedanken über die visuelle Gestaltung Ihrer E-Mail machen können, müssen Sie wissen, welche Art von E-Mail Sie versenden.

Nein! Ich meine nicht das Ziel der E-Mail-Kampagne. Das ist eine ganz andere Geschichte. Ich spreche vom eigentlichen Inhalt der E-Mail, der sich in zwei große Kategorien unterteilen lässt.

Die Klartext-E-Mail

Die erste Kategorie ist am einfachsten zu beherrschen.

Es handelt sich um eine schnörkellose E-Mail-Kampagne, die sich auf den reinen Text stützt. In ihrer reinsten Form haben Sie nicht einmal verlinkten Text! Es geht nur um Ihre Worte, Ihre Website und Ihre Zielgruppe.

Wenn ein Nutzer die umfangreichen Elemente einer erweiterten E-Mail nicht sehen kann, ist diese einfache Version Ihre Rettung! Solche E-Mail-Kampagnen garantieren außerdem, dass sie unabhängig von Gerät oder Browser-Version gelesen werden.

Die besten Ergebnisse erzielen Sie mit standardisierten E-Mail-Vorlagen im Klartext. Vergessen Sie auch nicht die wichtigen Links, denn auch in einfachen Text-E-Mails muss ein Link zum Abbestellen enthalten sein.

Die Rich-HTML-E-Mail

Die zweite Kategorie ist die häufigste.

Die Rich-HTML-E-Mail (oder, für die Neugierigen unter uns, die Rich-Hypertext-Markup-Language-E-Mail) ist eine Mischung aus schriftlichen und visuellen Inhalten. Diese E-Mail-Kampagnen enthalten Bilder, Links und einen unterschiedlichen Grad an Komplexität. Außerdem können die Designer im Gegensatz zu den reinen Text-E-Mails verschiedene Schriftarten einbetten, um das Marketingmaterial interessanter zu gestalten!

Sie können diese Kampagnen so kompliziert gestalten, wie Sie wollen, und einige Marken haben fortgeschrittene Programmierkenntnisse eingesetzt, um interaktive Elemente in den Posteingängen der Benutzer zu erstellen. Wenn Sie jedoch gerade erst anfangen, ist es in Ordnung, einfache Kampagnen nur mit Text zu versenden. (Sogar große Marken verschicken noch reine Text-E-Mails!)

Interaktive E-Mail-Designs

Ja! Es mag seltsam klingen, aber Sie können immersive Posteingangserlebnisse schaffen. Sie brauchen allerdings einige Programmierkenntnisse!

Die einfachsten Formen interaktiver Inhalte beruhen auf einer cleveren Mischung aus dynamischen CSS-Effekten, internem JavaScript und HTML. Mit diesen Elementen lassen sich E-Mails mit unterschiedlichem Grad an Interaktivität erstellen. Die Ergebnisse können verblüffend sein, aber sie sind auf E-Mail-Clients angewiesen, die JavaScript unterstützen.

Ein alternativer Ansatz ist eine AMP-E-Mail, die durch die AMP-Technologie (Accelerated Mobile Pages) von Google ermöglicht wird. Diese E-Mails können Ihr Engagement wirklich steigern, aber sie funktionieren nicht mit mehreren E-Mail-Clients.

In jedem Fall brauchen Sie mehr als nur eine Prise HTML-Kenntnisse!

Nette Spielchen mit mobilen Geräten

Sie werden auch wissen wollen, wie Ihr E-Mail-Design auf Desktops und mobilen Geräten funktioniert.

“Mobile-first”-E-Mail-Design ist eine beliebte Lösung, aber es ist nur einer von vielen modernen Ansätzen für dieses Problem.

Was das E-Mail-Design betrifft, so überschneidet sich Ihre mobile Kompatibilität mit jedem anderen Element Ihrer Kampagnen. Sie werden viele der Begriffe in anderen Abschnitten dieses Artikels während Ihrer Reise durch das mobile Design sehen, daher werde ich diesen Abschnitt kurz halten.

Tatsächlich gibt es nur einen einzigen wichtigen Begriff, den Sie kennen müssen und der nur im Bereich der mobilen Geräte vorkommt! Und das ist …Responsive Design.

Ein responsives E-Mail-Design stützt sich auf mehrere interne Faktoren, um auf die Anzeige zu reagieren.

Mit anderen Worten: Die E-Mail ruft Informationen von den Geräten der E-Mail-Leser ab – in erster Linie vom Gerät und vom Browser. Anhand dieser Informationen wird der Inhalt dann entweder verkleinert oder vergrößert, um sich der Seite anzupassen. So haben die Nutzer die Möglichkeit, E-Mails vertikal und horizontal zu betrachten. Noch wichtiger ist, dass jede Kampagne auf Desktops und mobilen Geräten funktioniert.

Teile einer E-Mail-Marketing-Kampagne

Schauen wir uns nun die eigentliche E-Mail an.

Alles hat seinen Platz. Alles hat einen Zweck.

Lassen Sie uns also eine digitale Sezierung vornehmen. Ihr Inhalt kann in verschiedene Teile unterteilt werden, die jeweils einen eigenen Titel und einen eigenen Zweck haben. Jede E-Mail besteht aus denselben Teilen, unabhängig davon, ob Sie sich an Büroangestellte am Schreibtisch oder an mobile Nutzer im Urlaub wenden.

Das E-Mail-Layout

Einer der wichtigsten Bestandteile eines E-Mail-Designs ist das Gesamtlayout. Ein “E-Mail-Layout” umfasst alles, was ein Leser in einer Nachricht sieht. Es ist die Gesamtheit Ihrer E-Mail, das Gesamtkonzept und die beabsichtigte Botschaft.

Der Text, die Aufforderung zum Handeln und das Design sind nur einige Teile eines E-Mail-Layouts.

Da wir uns jedoch noch nicht mit der Anatomie einer E-Mail befasst haben, ist jetzt der perfekte Zeitpunkt, um damit zu beginnen!

Der Textkörper und der Textteil

Der Hauptteil einer E-Mail ist der große Teil des Inhalts nach der Kopfzeile. Hier platzieren Sie all die guten, schmackhaften Informationen.

Im E-Mail-Design und -Marketing umfasst der Textteil einer Nachricht normalerweise Text und Bilder. Es gibt aber auch Kampagnen, die nur aus Bildern oder Text bestehen.

Hier haben Sie die Möglichkeit, Ihre Markenidentität zu unterstreichen. Ihr Text kann so seriös oder skurril sein, wie Sie wollen; letztendlich geht es darum, was die Aufmerksamkeit des Lesers erregt. Sie versuchen (normalerweise), Ihre Zielgruppe mit so wenigen Worten wie möglich anzusprechen. (Langform-E-Mails sind eine Ausnahme. Beispiele für solche Kampagnen sind informative Artikel, Nachrichtenübersichten und Newsletter).

Call-to-Action

Wird kurz auch als CTA bezeichnet und kann eine Schaltfläche, ein Symbol, ein Bild oder ein einfacher Text sein. Unabhängig vom Format ist die Idee dieselbe.

Sie versuchen, zum Handeln zu verleiten. Sie möchten, dass die Leser Ihrer E-Mail auf diesen Link klicken!

Die besten CTAs vermitteln ihren Zweck mit wenigen Worten. Diese kurzen, prägnanten und umsetzbaren Weiterleitungen machen Ihre E-Mails mobilfreundlich. Noch wichtiger ist, dass kürzere Texte in der Regel zu höheren Klickraten führen.

Ein CTA kann am Anfang oder am Ende einer E-Mail platziert werden; Ihr Ziel ist es, den CTA an einer möglichst verlockenden Stelle zu platzieren. Sie wollen, dass er auf dem Höhepunkt des Interesses Ihrer E-Mail-Nutzer steht!

Auch dies ist normalerweise das Ende einer E-Mail. Eine zusätzliche CTA am Anfang ist jedoch eine gute Möglichkeit, ungeduldige Leser anzulocken.

E-Mail-Fußzeilen

Der nächste Teil ist weniger aufregend, aber trotzdem wichtig!

Eine E-Mail-Fußzeile ist Teil vieler vorgefertigter Vorlagen und befindet sich immer am Ende einer Nachricht. Diese standardisierten E-Mail-Elemente sind meist mehrzeilig und enthalten wichtige Links. Die meisten Marken verwenden Fußzeilen, um physische Adressen und auffällige Banner anzuzeigen. Außerdem sollten Sie hier Links zum Abbestellen von E-Mails und einschlägige Haftungsausschlüsse unterbringen.

Kopfzeilen

Als letztes haben wir unsere Kopfzeilen. Betrachten Sie diese als die Betreffzeile Ihrer E-Mail-Nachricht.

Sie sind groß, fett und auffallend!

In der Regel haben Sie eine große Kopfzeile am Anfang Ihres E-Mail-Designs. Dies ist Ihr Titel und wird als Kopfzeile der ersten Ebene kodiert. Jede weitere Überschrift ist eine Unterüberschrift, und zwar in aufsteigender Reihenfolge (H1, H2, H3 und so weiter).

In der Regel werden Sie für Ihre Überschriften einfachen Text verwenden. Wenn Sie sich jedoch für ein Bild entscheiden, achten Sie darauf, dass Sie einen angemessenen beschreibenden Alt-Text verwenden! Andernfalls schließen Sie einen großen Teil Ihrer Zielgruppe von Ihrer E-Mail-Kommunikation aus.

E-Mail-Elemente

Nachdem wir nun die Struktur kennen, wollen wir uns die Bausteine ansehen.

Ihre E-Mail-Elemente sind die kleinen Bausteine, die zusammen Ihr E-Mail-Marketing ausmachen.

Diese Begriffe mögen einfach erscheinen, aber es gibt einige technische Details, die Sie kennen sollten. Diese Details können nämlich den Unterschied zwischen großartigen dynamischen Inhalten und gewöhnlichen Marketingkampagnen ausmachen!

Bilder

Jeder kann Bilder zu einem E-Mail-Design hinzufügen. Dank moderner, benutzerfreundlicher Drag-and-Drop-Editoren gehören umständliche Anhänge der Vergangenheit an. Jetzt kann jeder mit ein paar Klicks wunderschöne, mobilfreundliche E-Mails gestalten.

Aber das ist noch nicht das Ende der Geschichte!

Ansprechende Bilder sagen mehr als tausend Worte, aber sie nehmen Platz weg.

Bilder können Ihre Kampagnen unnötig mit Bandbreite belasten. Um dieses Problem zu lösen, werden Bilder einfach komprimiert und somit in Ihrer Speichernutzung minimiert. Im Rahmen dieses ultimativen Leitfadens habe ich eine Liste mit den drei Formaten erstellt, die Sie kennen sollten. Probieren Sie es aus!

GIF (Grafik-Austausch-Format): Diese Bilder sind ideal für animierte oder detailarme Inhalte. Ihre Verwendung ist durch ihre 8-Bit-basierte 256-Farben-Palette begrenzt.

JPG und JPEG (Joint Portable Export Group): Sowohl JPG- als auch JPEG-Dateien sind im modernen Webdesign nach wie vor weit verbreitet. Sie sind in der Lage, große Bilder mit kleinen Dateigrößen zu unterstützen, obwohl sie bei wiederholter Bearbeitung unter Qualitätsverlusten leiden. Außerdem können Sie keine transparenten JPEG-Dateien erstellen.

PNG (Portable Netzwerk Grafik): Wie GIFs unterstützen auch PNGs Transparenz und Animation. Allerdings bieten diese Dateien auch eine verlustfreie Komprimierung (im Gegensatz zu JPEGs) und eine umfangreiche Farbpalette. Dieses Format ist ideal für transparente Bilder und eignet sich hervorragend für Grafiken, die große Flächen einer einzigen Farbe enthalten.

Links

Diese Textblöcke (oder in manchen Fällen Bilder) leiten die Nutzer oft auf externe Zielseiten weiter, obwohl einige auch zu internen Ankern führen. Wie auch immer, Links sind ein wesentlicher Bestandteil jeder E-Mail, und die Empfänger werden verwirrt sein, wenn Sie keine Links einfügen.

Links erscheinen standardmäßig als unterstrichener blauer Text, aber Sie können CSS- und HTML-Codes verwenden, um markengerechte Farben einzubinden.

Es gibt zwei Haupttypen von Links, sowohl im E-Mail- als auch im Web-Design:

Externe Links führen zu einer externen Zielseite. In den meisten Fällen leiten Sie die Leser auf Artikelseiten oder Ihr Ladengeschäft weiter.

Interne Links beruhen auf internem Code und Ankertext. Wenn ein Nutzer auf diese Links klickt, wird er automatisch zu einem vordefinierten Abschnitt einer Webseite weitergeleitet.

Es gibt verschiedene Arten von Links, nämlich:

Schaltflächen verwenden CSS, HTML oder JavaScript, um dynamische Inhalte anzuzeigen. Diese Links sehen aus wie Standard-Webbuttons, leiten den Benutzer aber an die gewünschte Stelle weiter, wenn er darauf klickt.

Bildlinks können auf benutzerdefinierten Inhalten oder vordefinierten Symbolen basieren. Wenn Sie ein Bild verwenden, sollten Sie den Alt-Text verwenden, um den Benutzern mitzuteilen, wohin sie gehen, anstatt den Inhalt zu beschreiben.

Klartext-Links sind das, wonach sie klingen. Es handelt sich um schnörkellose Links, die auf allen Plattformen funktionieren und somit die perfekte mobilfreundliche Lösung für jede E-Mail-Kampagne darstellen.

Zusätzlich zu Ihrem CTA sollten Sie immer eine Art von Link für Ihre Abmeldeschaltfläche und rechtliche Hinweise verwenden.

So das war eine Menge an Informationen, und wir haben kaum an der Oberfläche gekratzt! Es gibt noch so viel mehr über E-Mail-Design zu lernen. Von Webfonts und dynamischen Inhalten bis hin zu E-Mail-Clients und Landing Pages – Sie befinden sich immer noch an der Spitze des Eisbergs.

Fühlen Sie sich überwältigt?

Das ist kein Problem! Ich würde sogar sagen, es ist verständlich.

Als Unternehmer haben Sie so viel zu tun, und die Perfektionierung des E-Mail-Designs steht nicht gerade an erster Stelle, oder? Wer hat schon Zeit, an einem E-Mail-Layout zu feilen und zu optimieren?

Bei DSM haben wir ein Team von Spezialisten, die sich genau dieser Aufgabe widmen. 

Sie benötigen Unterstützung mit Ihrem E-Mail Marketing? Dann setzen Sie sich mit mir in Verbindung, und wir vereinbaren ein kostenloses Erstgespräch!