12.05.2022 Aufrufe

Deep Dive E-Mail-Templates

Otimiertes E-Mail-Design für Newsletter-Templates - 10 Schritte zum Erfolg Wer E-Mail-Templates erstellen möchte, die den Empfänger überzeugen, sollte neben einer klugen Marketing-Strategie auch die Grundlagen des Design beherrschen. Denn Design ist eine der wichtigsten Säulen für ein erfolgreiches Marketing. Es kann Blicke führen, wichtige Informationen herausstellen, Emotionen erzeugen und Wünsche wecken. Es sollte durch Klarheit, Einheitlichkeit und Authentizität überzeugen. In diesem Guide haben wir für Sie die Wichtigesten Infos und Experten-Tipps zusammengestellt, damit die nächste Kampagne ein Volltreffer wird.

Otimiertes E-Mail-Design für Newsletter-Templates - 10 Schritte zum Erfolg
Wer E-Mail-Templates erstellen möchte, die den Empfänger überzeugen, sollte neben einer klugen Marketing-Strategie auch die Grundlagen des Design beherrschen. Denn Design ist eine der wichtigsten Säulen für ein erfolgreiches Marketing. Es kann Blicke führen, wichtige Informationen herausstellen, Emotionen erzeugen und Wünsche wecken. Es sollte durch Klarheit, Einheitlichkeit und Authentizität überzeugen.

In diesem Guide haben wir für Sie die Wichtigesten Infos und Experten-Tipps zusammengestellt, damit die nächste Kampagne ein Volltreffer wird.

MEHR ANZEIGEN
WENIGER ANZEIGEN

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

YUMPU macht aus Druck-PDFs automatisch weboptimierte ePaper, die Google liebt.

Deep Dive

E-Mail-Templates.

Optimiertes E-Mail-Design

für Newsletter-Templates.

www.adrom.net


ntro

Wer E-Mail-Templates erstellen möchte, die den Empfänger

überzeugen, sollte neben einer klugen Marketing-Strategie

auch die Grundlagen des Design beherrschen. Denn Design ist

eine der wichtigsten Säulen für ein erfolgreiches Marketing. Es

kann Blicke führen, wichtige Informationen herausstellen, Emotionen

erzeugen und Wünsche wecken. Es sollte durch Klarheit,

Einheitlichkeit und Authentizität überzeugen.

In diesem Guide haben wir für Sie die Wichtigesten Infos und

Experten-Tipps zusammengestellt, damit die nächste Kampagne

ein Volltreffer wird.

Mit einer gut geplanten E-Mail-

Media-Kampagne erzielen Sie

mehr Umsatz, steigern Ihren

Bekanntheitsgrad und erhöhen

Ihren Marktanteil.

www.adrom.net


STEP 1

Die Basis zum Erfolg.

Ein E-Mail-Template besteht in der Regel aus mehreren Teilen:

Header

Der obere Bereich eines E-Mail-Templates sollte aus dem Logo des

Absenders, der Navigation und einem Link zur Web-Version des

Newsletters bestehen. Achten Sie darauf, dass in der Kopfzeile nicht

der Inhalt des Betreffs wiederholt wird, sondern weiterführende Infos

im Fokus stehen.

Stage

Im folgenden Hauptteil befinden sich die Inhaltselemente. Ein großer

Banner mit Fokus auf Ihre Hauptbotschaft, gefolgt von einem Editorial

mit personalisierter Ansprache, Einstiegstext und Call-to-Action.

Banner & Teaser

Weitere Themen, die tiefer ins Detail gehen. Angebote, Produktbeschreibungen,

Ansprechpartner, ...

Footer

Der Footer bildet den Abschluss und enthält weiterführende Erklärungen,

Social Media Icons, ein Impressum und Abmeldelinks.

lightbul

Trennen Sie im E-Mail-Layout Header, Stage und Footer klar voneinander.

Nutzen Sie dafür beispielsweise eine andere Spaltenanzahl,

andere Farben oder eine Trennlinie. Dies sorgt für eine klare

Struktur mit dem Vorteil, dass die Empfänger Ihren Inhalt und vor

allem die Kernbotschaft/-anliegen sofort erfassen.

www.adrom.net


STEP 2

Fokus auf das, was zählt !

Nachdem Sie das Grundgerüst des E-Mail-Templates erstellt haben,

gilt es nun dieses mit Leben zu befüllen. Konzentrieren Sie sich in

jeder E-Mail auf eine Kernbotschaft. Vermeiden Sie dabei unnötige

Floskeln und detaillierte Ausführungen.

Durch die kurze Aufmerksamkeitsspanne der Kunden ist es wichtig,

die Kernbotschaft sowie den CTA (Call-to-Action) bereits im Sichtbereich

(Above-the-fold) deutlich zu platzieren. Mit jedem Scroll down

verlieren Sie die Aufmerksamkeit 50% der User.

STEP 3

Branding.

Ein Mailing ist das Schaufenster für Ihre Marke. Achten Sie darauf, das

Logo im Sichtbereich zu platzieren und die Farb- und Textgestaltung

dem Corporate Design/Identity anzupassen.

A

LOGO

www.adrom.net


STEP 4

Personalisierung.

Sprechen Sie den Leser mit Namen an und gehen Sie auf persönliche

Interessen ein. Eine individuelle Betreffzeile, die den Empfänger direkt

anspricht und kundenspezifische Inhalte erhöhen die Öffnungs- und

Klickraten Ihrer E-Mail-Kampagnen. Durch die Relevanz der gesendeten

Inhalte steigt die Bereitschaft einen Kauf zu tätigen. Zusätzlich sinkt dank

personalisierter E-Mail-Inhalte die Abwanderungsrate Ihrer Kunden.

Mehr zu KI-basierten Lösungen finden Sie unter: https://adrom.net/data

1

2

1) Eine personalisierte Betreffzeile steigert Ihre Öffnungsrate um 26%.

2) Den Namen des Kunden zu nennen, erhöht die Chance, dass die

E-Mail geöffnet wird um 15%.

www.adrom.net


STEP 5

Bilder sagen mehr als tausend Worte.

Bilder sind aufmerksamkeitsstark und erhöhen die emotionale Bindung

der User. Aber achten Sie auf ein ausgewogenes Verhältnis zwischen

Bild und Text.

lightbul

Ein Verhältnis von Text zu Bild von 60:40 oder 70:30 zugunsten

des Textes ist ideal.

Bilder sollten in der Größe immer optimiert werden. Außerdem helfen

aussagekräftige Bildbeschreibungen den Spamfilter zu umgehen,

denn fehlende oder kryptische Beschreibungen können sich negativ

auf die Einstufung der E-Mails auswirken.

Wenn Sie Text im Bild verwenden, empfehlen wir, ein extra Bild für

die mobile Version bereit zu stellen. Damit ist auch auf dem mobilen

Endgerät die perfekte Darstellung gewährt (siehe auch Mobile First).

Durch die Häufung von Retina Displays raten wir, die verwendeten

Bilder in der doppelten Größe abzuspeichern. Vergessen Sie dann

nicht, die Weite im Code anzugeben.

Header Desktop

Header Mobil

www.adrom.net


STEP 6

Interaktive Grafiken und Videos.

Sie können heute sogar Bewegtbilder in Form eines GIF‘s verwenden,

jedoch werden diese nicht von allen Clients unterstützt. Oft wird

das GIF als reguläres Bild dargestellt. Deshalb sollte darauf geachtet

werden, dass der erste Frame alle wichtigen Informationen enthält.

Der sicherste Weg, wie Videos in Ihre E-Mail eingebunden werden können

ist, dieses auf eine Streaming Plattform wie YouTube oder Vimeo

hochzuladen und ein verlinktes Symbolbild in die E-Mail einzufügen.

Sofern Sie interaktive Grafiken oder Videos in Ihre E-Mail-Vorlagen

integrieren möchten, halten Sie sich an folgende Regel: pro Nachricht

nur ein interaktives Element.

Fun Fact

Der Morsecode für das @-Zeichen lautet:

www.adrom.net


STEP 7

Push the button !

Der sogenannte Call-to-Action (kurz CTA) ist der entscheidenste Teil

im E-Mail-Template.

Liefern Sie Ihren Usern einen unwiderstehlichen Grund zu klicken

oder aktiv zu werden z. B. ein limitiertes Angebot, die Einladung zu

einem Wettbewerb oder der Besuch Ihrer Webseite.

Gestalten Sie den CTA besonders und verleihen Sie ihm Relevanz. Die

Hervorhebung mittels Farbe, eine prominente Platzierung und eine

klare Aussage sind dabei hilfreich. Sorgen Sie dafür, dass er leicht

identifizierbar ist und nicht zu weit unten im Template platziert wird.

Eindeutige und direkte Aussagen wie „JETZT BESTELLEN“, „HIER

KLICKEN UND UNFORMIEREN“ oder „JETZT MITMACHEN“ erhöhen

die Reaktion auf Ihre E-Mail. Eine Mindestgröße von 44 x 44 Pixeln

ist heute Standard, damit die Usability auf auf mobilen Endgeräten

gegeben ist.

Beispiel Textlink

Beispiel CTA

image

image

Produkt € 19,95 Produkt € 19,95

Jetzt bestellen

Jetzt bestellen

www.adrom.net


STEP 8

Auf Nummer sicher, auch beim Hintergrund.

Hintergrundbilder in Newslettern sind ein Thema für sich. Einige Clients

unterstützen diese nicht, wodurch es zu Darstellungsproblemen

kommen kann. Es empfielt sich, eine Fallback-Farbe zu hinterlegen,

oder auf Hintergrundbilder ganz zu verzichten.

www.adrom.net


STEP 9

Designtrend Dark Mode.

Ein Trend, der gekommen ist um zu bleiben! Viele User haben den Dark

Mode mittlerweile als Standard-Einstellung gewählt. Dabei wird das bisherige

Farbschema – also dunkler Text auf weißem Grund – gänzlich und

systemübergreifend umgekehrt. Im Dark Mode sind die Hintergründe

also dunkel, während die darüber liegenden Elemente wie Text, Icons

und UI Elemente meist weiß dargestellt werden. Abgesehen davon, dass

dieses Design von den meisten Leuten als ansprechender empfunden

wird, schont es zudem Augen und Akku.

Die Umsetzung des Dark Modes variiert jedoch abhängig vom Client.

Einige zeigen die Benutzeroberfläche im Dark Mode an (Menüleisten

um die E-Mail), verändern die E-Mail selbst jedoch nicht, während andere

Clients lediglich die Elemente verändern, bei denen dunkler Text/

Grafiken auf hellem Hintergrund liegen und wieder andere Clients passen

sogar die Bereiche farblich an, deren Hintergründe bereits dunkel

sind. Um den Newsletter für den Dark Mode zu optimieren, testen Sie

diesen am Desktop und am Handy im gerätespezifischen Dark Mode.

www.adrom.net


Achten Sie dabei besonders auf folgene Punkte:

1) Können Sie alle Texte einwandfrei lesen?

2) Sind Logos, Icons, Buttons etc. gut erkennbar?

3) Haben Bilder und Grafiken, die nicht rechteckig sind,

einen unschönen weißen Rahmen?

4) Sind die Farbkombinationen und Kontraste optisch

weiterhin ansprechend und angenehm fürs Auge?

5) Funktioniert weiterhin die Blickführung durch das

Mailing und ist der Call-to-Action optimal erkennbar?

Fotos und Grafiken optimieren:

Geben Sie dunklen Elementen und Grafiken, einen passenden, hellen

Rahmen, um zu garantieren, dass diese auch auf dunklem Hintergrund

sichtbar sein werden.

LOGO

LOGO

Speichern Sie Fotos und Grafiken, die nicht quadratisch sind, entweder

als PNG oder GIF. Diese Formate erlauben Transparenzen. So vermeiden

Sie unschöne, weiße Rahmen, die auf dunklem Hintergrund entstehen.

PNG

JPG

www.adrom.net


STEP 10

Aus Responsive Design wird Mobile First.

mobile tablet desktop

41%

Smartphone

5%

Tablet

54%

Computer

Mobile Only ist derzeit in aller Munde. Nicht nur die Tatsache, dass

Google bei Webseiten-Rankings nur noch mobile Versionen berücksichtigt

deutet darauf hin, dass die mobile Internetnutzung an Oberhand

gewinnt. Aus diesem Grund sollte das Prinzip auch auf E-Mail-

Marketing übertragen werden, was bedeutet, dass der Startpunkt der

Design-Umsetzung des Newsletters, immer das mobile Endgerät sein

sollte. Sieht das Mailing auf dem Smartphone gut aus, können Sie sicher

sein, dass es am Desktop großartig sein wird!

lightbul

Gerade bei mobilen Endgeräten spielt die Nutzerfreundlichkeit

eine wichtige Rolle. Eine schlechte Usability bedeutet: keine Reaktion,

keine Aktion und somit auch keinen ROI.

Aus diesem Grund sollten Sie folgenden Besonderheiten Aufmerksamkeit

schenken:

1) Reduzieren Sie Ihre Inhalte auf das Wesentliche um unnötiges

Scrollen zu vermeiden.

2) Achten Sie auf eine passende Schriftart, die auch auf kleineren

Devices gut lesbar ist!

3) Aus Maus wird Finger - Die Größe und Position von Klickelementen

ist auf mobilen Endgeräten umso entscheidender.

4) Achten Sie auf genügend White Spaces. Abstände verbessern die

Lesetauglichkeit und wichtige Eckdaten kommen dadurch noch

besser zur Wirkung.

www.adrom.net


Die Umsetzung von mobilen E-Mail-Newslettern beruht auf sogenannten

Media Queries. Diese ermöglichen die Erstellung unterschiedlicher

Designs via CSS in Abhängigkeit von bestimmten Eigenschaften des

Ausgabemediums. Unter anderem können folgende Eigenschaften als

Kriterien herangezogen werden:

1) Änderung der Hierarchie

2) Änderung der Navigation

3) Schriften vergößern

4) Farben ändern

6) Bilder skalieren

7) Abstände ändern

8) Inhalte verstecken

9) Buttons vergrößern

5) Layout ändern

Mobile Darstellung ohne

Media Queries.

Mobile Darstellung mit

Media Queries.

www.adrom.net


Wichtige Design-Elemente bei der Mobiloptimierung

text-hei

Schriftart und Schriftgröße:

Während in der Desktop-Variante von Templates eine

Schriftgröße von 14px bis 16px optimale Lesbarkeit gewährleistet,

wirken diese Maße in der mobilen Ansicht

viel zu klein. Eine entsprechende Anpassung der Headline-

und Fließtext-Schriftgrößen ist zwingend erforderlich

(mindestens 16px).

image

Schrift auf Bildern:

Gerne werden für die Desktop-Variante von Templates

Grafikelemente mit Text oder Buttons verwendet. Während

diese Gestaltungstechnik auf dem großen Bildschirm

durchaus ihre Berechtigung hat, kann die Skalierung auf

mobilen Geräten zu einer Unlesbarkeit der Bildinhalte führen.

Die Elemente müssen entsprechend für die mobile

Ansicht konzipiert oder aus dieser völlig entfernt werden.

minus-ci

Deaktivieren von Elementen:

Templates, die in der Desktop-Variante Elemente wie eine

Vielzahl von Bildern oder eine sehr detaillierte Navigation

beinhalten, wirken in der mobilen Ansicht häufig überladen.

Daher empfiehlt es sich, einige Elemente, die nicht zwingend

für die Nachricht der E-Mail notwendig sind, in der

mobilen Ansicht zu deaktivieren.

www.adrom.net


LAST BUT NOT LEAST.

Tipps von unseren Grafikprofis :

Breite

max. 600 Pixel für eine

korrekte Darstellung

max. 480 Pixel für eine

korrekte Darstellung

Höhe

Unbegrenzt - Kerninformationen &

CTA in den ersten 300px

Spalten

Zweispaltige Layouts sind

möglich. Je mehr Spalten,

desto aufwändiger die

Umsetzung und mobile

Anpassung.

Einspaltige Layouts sind

optimal. Zwei Spalten nur

in Ausnahmefällen (z.B.

Footer) verwenden.

Schriftgrößen

Mindestens 16 Pixel für Fließtext.

Circa 20 Pixel für Überschriften.

Bilder

JPG, PNG oder GIF

verwenden. Auf gute

Bildqualität achten.

Bei Schrift im Bild eventuell

extra Bilder für mobile

Darstellung wählen.

CSS-Styles

Inline definieren. So wird

eine korrekte Darstellung

in allen Clients garantiert.

Mobiles CSS wird im

Head-Bereich des

Newsletters definiert.

www.adrom.net


table

align-ce

palette

rectangl

Tabellen Layouts

Layouten Sie ausschließlich mit Tabellen. Dadurch gewährleisten

Sie eine genaue Platzierung Ihres Inhalts.

Größenangaben

Undefinierten Tabellen werden von einigen E-Mail-Clients

schnell beliebige Breiten und Höhen zugewiesen. Um dies

zu vermeiden und ein intaktes Layout zu erstellen, sollten

Sie in den entsprechenden Tabellen und Zeilen die Größe

deklarieren.

Hintergrundfarben in der Wrapper Tabelle

Da viele E-Mail-Clients den kompletten Head-Bereich Ihres

Dokuments verwerfen, definieren Sie Hintergrundeinstellungen

deshalb in einer Wrapper Tabelle. Die Wrapper

Tabelle sollte das gesamte Layout umschließen und eine

Breite von 100% aufweisen.

Div Layouts

Nicht verwenden - Div Layouts sind in einigen Cliens möglich,

führen aber oft zu einer falschen Darstellung.

font-cas

Schriften

Greifen Sie auf Standardschriften zurück wie Arial, Helvetica,

Verdana. Schriften wie Google Fonts führen in einigen

Clients zu Darstellungsproblemen.

video

Videos

Setzten Sie für das Video ein Symbolbild ein, das auf ein

Youtube oder Vimeo Video verlinkt.

scroll

Formularelemente, Java-Script, Flash

Nicht verwenden.

www.adrom.net


link

Links

Manche Links werden als Phishing eingestuft, vor allem,

wenn Linktexte besonders lang oder kryptisch sind. Mit

folgenden Ankertexten gehen Sie auf Nummer sicher:

· „jetzt bestellen“

· „mehr Infos“

· eigene Domain (ohne „http://“)

Farben von Textlinks müssen immer auch direkt im -Tag

definiert werden.

Text

tags

UTMs

Erstellen Sie für Ihre Links individuelle UTMs. Durch diese

können Sie in der Auswertung genau sehen, auf welche

Elemente am besten reagiert wurde.

text

ALT-Texte

Einige E-Mail-Clients verweigern oft das Anzeigen von

Bildern beim Aufruf einer E-Mail. Um die Inhalte dennoch

für den User hervorzuheben, sollte jedem Bild ein ALT-

Texten zugewiesen werden. Die Texte werden dargestellt,

wenn das jeweilige Bild nicht angezeigt werden kann.

text-siz

Text als Text

Versuchen Sie so gut es geht Text auch tatsächlich als Text

darzustellen und nicht als Grafik. Je mehr Text im Verhältnis

zu Bildern, desto höher die Chance, dass die E-Mail

nicht als SPAM markiert wird. Zusätzlich verbessert sich

die Ladezeit des Newsletters.

www.adrom.net


Top E-Mail-Clients

Deutschland 2021.

GMX

25,3%

Web.de

23,9%

Gmail

14,8%

outlook.com

9,3%

T-Online

8,4%

1&1

3,6%

freenet

2,5%

Sonstige

12,2%

www.adrom.net


Häufig gestellte Fragen.

Warum kann die Absenderadresse nicht auf die eigene

abgeändert werden?

Es kann vorkommen, dass, aufgrund von falsch konfigurierten E-Mail-

Servern, Fehlermeldungen an die Absenderadresse versendet werden.

Die Fehlermeldungen müssen von uns ausgewertet werden, um Optimierungen

vornehmen zu können. Weiters sollten die E-Mail-Domains,

die in einem Mailing verwendet werden, aufeinander abgestimmt sein

(die gehosteten Bilder, Absender, „reply to“ und die technische „returnpath

Adresse“ sollten alle von der selben Domain kommen).

Was passiert mit den Antworten/Fragen die an die Absenderadresse

gesendet werden?

Antworten werden bei uns automatisch verarbeitet. Beispielsweise bei

Out-of-Office Antworten bekommt die Person bis zur Rückkehr keine

weitere E-Mail von uns. Jobwechsel, Todesfall, etc. werden ausgewertet

und entsprechend im Status der Adresse hinterlegt. Beschwerden

werden ebenfalls erkannt und an das Complaint Management zur

weiteren Bearbeitung weitergegeben.

Warum kann kein eigener Abmeldelink platziert werden?

Die Abmeldung muss über unser System erfolgen.

Woher kommen die Daten?

Die Daten kommen aus unserem Bestand (Online-Käufer und User unserer

Portale).

Was benötigen wir vom Kunden, wenn die Template Erstellung über

adRom geschieht?

Wir benötigen ein Briefing, welches Inputs zum Layout, zu verwendende

Bilder, Links, Texte und falls vorhanden ein CI beinhaltet.

www.adrom.net


Stay in touch.

Wo Sie uns finden

Let‘s work together

Headquarters

adRom Media Marketing GmbH

Lustenauer Straße 66

6850 Dornbirn

Österreich

paper-pl

phone

fax

anfrage@adrom.net

+43 (0) 5522 748 13-0

+43 (0) 5522 748 13-20

www.adrom.net

Hurra! Ihre Datei wurde hochgeladen und ist bereit für die Veröffentlichung.

Erfolgreich gespeichert!

Leider ist etwas schief gelaufen!