Deep Dive E-Mail-Templates

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 <a>-Tag
definiert werden.
<a href=“URL“ style=“color:#0044cc;“>Text</a>
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