Erstelle ein responsives HTML-E-Mail-Template mit professionellem Newsletter-Code
Die Schritt-für-Schritt-Anleitung
Je professioneller das E-Mail-Marketing, desto höher sind die Ansprüche an die E-Mail-Templates für den Newsletter oder Transaktions-E-Mails. Sollen beispielsweise besondere Stilelemente, wie z.B. Schriftarten mit Fallback-Fonts oder ein bestimmtes responsives Design abgebildet werden, stößt man mit den E-Mail-Baukästen der gängigen E-Mail-Tools schnell an seine Grenzen.
Dabei ist es ganz einfach, sein eigenes responsives HTML-E-Mail-Template zu erstellen, wenn man über ein wenig HTML-Vorkenntnisse verfügt und ein paar Grundregeln des E-Mail-Codings beachtet.
Im Folgenden zeigen wir Dir Schritt für Schritt, wie du Dein eigenes professionelles HTML-E-Mail-Template aufbaust.
Vorbemerkung: E-Mail HTML ≠ Webpage HTML
Aber Achtung: HTML für Webpages lässt sich nur bedingt für E-Mails einsetzen. Schuld daran sind die unterschiedlichen E-Mail-Clients, allen voran Outlook und Gmail. Diese interpretieren HTML-Code nicht wie die üblichen Webbrowser, sondern nach ganz eigenen Regeln. Beispiele gefällig?
Outlook
- Hintergrundbilder werden nicht unterstützt
- Animierte GIFs werden nicht unterstützt
- Border-Radius wird nicht unterstützt
- Links werden blau dargestellt
- Images erhalten unten zusätzliches Padding
GMail
- E-Mails größer als 102kB werden abgeschnitten
- <style>-Tags werden im Body nicht unterstützt
- Hintergrundbilder werden für non-Google-Accounts nicht unterstützt
- Support Attribute und die meisten Pseudoklassen werden nicht unterstützt
- Negative margin values werden nicht unterstützt
Hier sind zwei Guides für gängige Probleme mit E-Mail-Clients und Workarounds:
Outlook Guide 1: Email rendering issues and workarounds for Outlook
Gmail Guide 2 : Email rendering issues and workarounds for Gmail
Der Hintergrund, warum die Clients vom Web-Standard abweichen, liegt meines Erachtens in der vermeintlich besseren Darstellung innerhalb der Clients selbst. Doch in der Praxis hat es genau den gegenteiligen Effekt und ist heute völlig antiquiert.
Für unsere Arbeit bedeutet das, Vorsicht mit „abgefahrenem, neumodischem“ HTML Code. E-Mail-Coder sind die Antiquare des HTML-Codes des 20.-Jahrhunderts.
D.h. die Tabelle <table> wird Dein bester Freund – und viel definieren, bringt viel. Alles das, was Du nicht definiert hast (ja gern auch doppelt und dreifach), kann dem „Standard“ des E-Mail-Clients zum Opfer fallen. Los geht’s.
Schritt 1: Erstelle eine leere HTML Template Datei
Für die Erstellung von HTML-Template-Dateien empfiehlt es sich, einen HTML-Editor zu verwenden. Diese strukturieren den HTML-Code, heben Tags und Attribute farblich hervor, schlagen teilweise sogar HTML-Attribute vor und machen Code-Fehler leicht erkennbar. Super!
Wir nutzen im Folgenden den HTML-Editor Notepad++, dieser ist kostenfrei und genügt unseren Anforderungen.
Ihr könnt natürlich auch einen anderen Editor Eures Vertrauens wählen, wie z.B.
Reicht noch nicht? Hier findest Du eine Übersicht über weitere kostenlose HTML-Editoren:
In Notepad++ erstellen wir zunächst eine neue Datei und speichern diese als HTML ab.
Die Datei enthält noch keine Zeile Code. Super, so soll es sein.
Alternativ könnt Ihr Euch auch das gesamte HTML-E-Mail-Template herunterladen und im Folgenden einfach anpassen.
Schritt 2: Erstelle den Kopf der E-Mail
Der Kopf <head> der E-Mail, teilt dem E-Mail-Client wichtige Informationen über den Inhalt der E-Mail mit. Bevor Du anfängst den E-Mail <head> zu erstellen, solltest Du genau wissen,
- wie Deine E-Mail aufgebaut sein soll,
- ab welcher Bildschirmbreite das responsive Design greifen soll
- und welche E-Mail-Layout-Elemente z.B. Schriftarten Du verwenden möchtest.
Für den Anfang kannst Du das hier kopieren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Titel der E-Mail z.B. Betreff</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " /> <meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!--> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i,800,800i" rel="stylesheet"/><!--<![endif]-->
<style type="text/css">
body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
span.MsoHyperlink { mso-style-priority: 99; color: inherit; }
span.MsoHyperlinkFollowed { mso-style-priority: 99; color: inherit; }
.em_ft_txt a { text-decoration: none; color: #030002; }
.em_br { display: none; }
@media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table { width: 100% !important; }
.em_hide_mobil { display: none !important; }
.em_hide_desktop { display: table !important; float: none !important; width: 100% !important; overflow: visible !important; height: auto !important; }
}
@media screen and (max-width: 480px) { .em_main_table { width: 100% !important; }
.em_font { font-size: 9px !important; line-height: 12px !important; }
.em_hide_mobil { display: none !important; }
.em_hide_desktop { display: table !important; float: none !important; width: 100% !important; overflow: visible !important; height: auto !important; }
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]--> Hier eine Kurzbeschreibung zu dem Code:
<!DOCTYPE> wird für das Rendering der HTML-Tags verwendet. Obwohl der Abschnitt durch einige E-Mail-Clients, wie Outlook und GMAIL, ersetzt wird, ist es Good Practise ihn beizubehalten.
Der <title> ist für die E-Mail an sich irrelevant. In der Onlineansicht der E-Mail wird der Title jedoch im Browser-Tab dargestellt. Ich verwende für den Title immer den Betreff der E-Mail.
Die <!—[if mso]> Anweisung dient dazu, ein Webfont einzubinden, in diesem Fall die Schriftart Open Sans aus der Google Fonts Bibliothek.
Ab <style> habe ich Dir noch ein paar CSS-Anweisungen spendiert, die wir uns jetzt etwas genauer anschauen werden.
Schritt 3: Erstelle das CSS in der E-Mail
CSS wird von vielen aber nicht allen E-Mail-Clients unterstützt. Das ist jedoch kein Grund darauf zu verzichten, da mit CSS viele wichtige Anpassungen für das responsive Design ermöglicht werden.
Zudem nutzt Du das CSS für die überspezifische Programmierung. Wie Eingangs erwähnt, viel definieren, hilft viel und beugt vor, dass irgendwelche E-Mail-Clients auf die Idee kommen, Ihre eigenen Design Standards zu verwenden.
Imwollen wir keine zusätzlichen Abstände oder automatische Textgrößenanpassungen.
Bilder sollen keinen Rahmen haben.
Absätze
sollen keine Abstände erfinden.
Tabellen
sollen keinen Rahmen haben. !important definiert innerhalb des CSS die höchste Priorität der Anweisung, mit der Folge, dass selbst wenn der böse E-Mail-Client ein eigenes CSS einfügt, unsere Anweisungen immer noch Vorrang haben. Ich rate Dir, den CSS-Teil zunächst genauso zu übernehmen und nur bei konkreten Anpassungen zu verändern. Hier einige sinnvolle Anpassungen.
Responsive Template Design im CSS definieren
Das oben gezeigte CSS bildet ein dreistufiges responsive Design ab. Der erste CSS-Abschnitt gilt zunächst allgemein. Ab @media only screen and (min-width:481px) and (max-width:699px) werden CSS-Anweisungen für größere mobile Bildschirme zwischen 481px und 699px definiert. Ab @media screen and (max-width: 480px) werden CSS-Anweisungen für kleinere mobile Bildschirme zwischen bis 480px definiert.
Aber wieso drei Bildschirmgrößen? Ich zeige Dir hier einen komplexeren und professionellen Fall. Wenn Du nur zwei Bildschirmbereiche definieren möchtest, löschst Du einfach den mittleren CSS-Block und veränderst den Pixel-Wert im letzten Block.
Ich nutze die drei Bildschirmbereiche wie folgt. Der größte Bildschirmbereich ist für Desktop und viele Tablets vorgesehen. Hier haben meine Content-Blöcke feste Breiten. Die E-Mail ist bspw. auf eine Breite von 700px angelegt.
Für die beiden letzten Bildschirmbereiche <700px gibt es nur noch relative Breiten also width: 100% !important; Damit ist die E-Mail so breit wie der Bildschirm des mobilen Endgerätes, ohne dass man von links nach rechts scrollen müsste, wie es bei 700px der Fall wäre.
Den letzten Bildschirmbereich <480px für sehr kleine mobile Endgeräte nutze ich, um die Schriftgröße noch einmal zu verkleinern mit .em_font { font-size: 9px !important; line-height: 12px !important; }, sonst wird die Schrift auf dem Display riesig und der E-Mail-Empfänger muss nach unten scrollen und scrollen und scrollen…
Elemente in der mobilen Ansicht mit CSS einblenden und ausblenden
Es existieren verdammt viele Anwendungsfälle, in denen man bestimmte Elemente zwar in der Desktop-Ansicht darstellen möchte, aber in der mobilen Ansicht nicht – und umgekehrt.
Ein paar Beispiele:
Anwendungsfall | Desktopansicht | Mobile Ansicht |
|---|---|---|
Banner | kleine Schrift auf dem Banner | große Schrift auf dem Banner |
Navigation | viele Navigationspunkte | wenige Navigationspunkte |
Textumbrüche | ja | nein |
Hierzu nutze ich .em_hide_mobil und .em_hide_desktop. Wenn ich z.B. Textumbrüche zwar in der Desktop-Ansicht darstellen möchte aber in der mobilen Ansicht nicht, so erhalten meine Umbrüche die Klasse .em_hide_mobil.
Wenn ich in der Desktop-Ansicht Banner A und in der mobilen Ansicht Banner B darstellen möchte, muss ich noch etwas tiefer in die Trickkiste greifen.
Zunächst muss ich Banner A mobil ausblenden (analog dem Zeilenumbruch):
Banner B muss standardmäßig ausgeblendet sein und nur mobil eingeblendet werden:
CSS-Formatierung von E-Mail-Text, Fonts und Schriftarten
Es existieren folgende Standardschriftarten, die von fast allen E-Mail-Clients unterstützt werden.
-
• Arial
• Courier
• Georgia
• Times New Roman
• Verdana
Ein professioneller E-Mail-Marketer kommt damit nicht weit, da die Schriftarten selten dem Corporate Design des Unternehmens entsprechen.
Für uns heißt es also, korrekte Schriftarten einbinden und Fallback-Schriftarten definieren. Web-Fonts sollten im Head der E-Mail eingebunden werden. Hier am Beispiel der Google-Font Open Sans:
<link ref=“https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i,800,800i“ rel=“stylesheet“/>
Die Schriftarten (font) und Schriftgrößen (font-size, line-height) definiere ich dann später im Body der E-Mail (siehe Individuelle Fonts und Fallback Fonts). Im CSS definierte ich lediglich, wenn ich davon abweichen möchte. Auf kleinen Bildschirmen möchte ich die Schrift kleiner darstellen. Im CSS sieht das so aus:
.em_font { font-size: 9px !important; line-height: 12px !important; }
Schritt 4: Erstelle den Body der E-Mail
Das wichtigste Strukturierungselement innerhalb des E-Mail-Bodys ist die Tabelle <table> <tr> <td>. Dabei werden Tabellen häufig ineinander verschachtelt und auch nebeneinander angelegt. Was auf den ersten Blick, aussieht wie schlechte Programmierung, hilft bei der Umsetzung von Designanforderungen.
Das Float-Design
Da wir im E-Mail-Design für alle Devices und Screengrößen nur über einen, immer denselben HTML-Code verfügen, wenden wir das sog. Float-Design an. Ziel ist es, dass bestimmte Elemente abhängig von der Bildschirmbreite nebeneinander oder untereinander dargestellt werden. Z.B. möchte man für einen Artikel in der Desktop-Ansicht das Artikelbild neben dem Artikeltext darstellen, aber in der mobilen Ansicht das Bild über dem Text.
Um dies zu erreichen nutze ich das Float-Design. Dabei werden zwei Tabellen mit fester Breite nebeneinander erstellt. Lässt die Bildschirmbreite eine Darstellung nebeneinander zu, so werden die Elemente nebeneinander dargestellt. Ist die Bildschirmbreite kleiner als die Summe beider Tabellen, „floatet“ die letztere Tabelle unter die erste. Genau das, was wir wollen.
Hierzu benötigen wir einen sogenannten Wrapper welcher im CSS für die Desktop und Mobile Ansicht unterschiedlich definiert wird und so unsere verfügbare breite anpasst.
.em_wrapper { width: 100% !important; }
.em_wrapper2 { width: 100% !important; /*display: block !important;*/ display: block; text-align: center !important; line-height: 40px !important; border-bottom: 1px solid #4d4d4d; }
.em_wrapper_50_1 { width: 46% !important; float: left !important; max-width: 173px !important; }
.em_wrapper_50_2 { width: 46% !important; float: right !important; max-width: 173px !important; }
.em_wrapper { width: 100% !important; } .em_wrapper2 { width: 100% !important; /*display: block !important;*/ display: block; text-align: center !important; line-height: 40px !important; border-bottom: 1px solid #4d4d4d; }
.em_wrapper_50_1 { width: 44% !important; float: left !important; max-width: 173px !important; } .em_wrapper_50_2 { width: 44% !important; float: right !important; max-width: 173px !important; }
Durch die Klassen wrapper50_1 und wrapper50_2 werden die Bilder links beziehungsweise rechts angeordnet. Durch den normalen Wrapper werden die einzelne Tabellen automatisch in die nächste Reihe befördert, sobald der Platz für beide Elemente die maximal vorgegebene Breite überschreitet.
Das Float-Design
Ein gern vergessenes Element ist der Hintergrund. Dieser wird häufig auch nicht vom E-Mail-Design-Team definiert und bleibt daher meist weiß. Wir definieren exemplarisch eine graue Hintergrundfarbe mithilfe einer Tabelle.
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#d3d3d3"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_table_body" bgcolor="#d3d3d3"> <tr><td align="center" valign="top">...</td> </tr> </table> </body>
Nun muss die maximale Breite der E-Mail definiert werden. Früher waren hier 600px der Goldstandard. Mittlerweile kann man auch auf 800px gehen. Ich empfehle 700px.
Für die Breite erstellen wir eine Tabelle. Diese bildet den Rahmen für die gesamte E-Mail.
<table align="center" width="700" border="0" cellspacing="0" cellpadding="0" class="em_table_content" bgcolor="#ffffff" style="width:700px; table-layout:fixed;">
<tr>
<td align="center" valign="top">...</td>
</tr>
</table>
Möchtest Du einen Abstand zwischen dem linken/rechten Rand der E-Mail und dem E-Mail-Content? Klar! Also noch eine Tabelle. Diese Tabelle nutzt Du als Content-Block, den Du immer wieder kopieren kannst, wenn Du neue Elemente in Deine E-Mail einbauen möchtest.
<table width="680" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" style="width:680px;" class="em_table_block">
Schritt 5: Erstelle den Header-Bereich
Der Kopfbereich der E-Mail umfasst in der Regel folgende Elemente:
- das Logo als Identifikationsmerkmal
- den Link zur Onlineansicht
- die Vorschauzeile (Preview Line), die im Posteingang als E-Mail-Vorschau angezeigt wird
- Die Navigationsleiste, die der korrespondierenden Website bzw. Webshop entlehnt ist
Im Folgenden stelle ich Euch ein Beispiel vor, wie man dies umsetzen kann.
Vorschautext / Preview Line
Viele E-Mail-Clients zeigen im Posteingang eine Vorschau des E-Mail-Inhalts an. In der Regel sind das die ersten Textzeilen der E-Mail. Eine professionelle E-Mail nutzt dies aktiv, um neben dem Betreff noch weitere Inhalte zu transportieren, um den Nutzer zum Öffnen der E-Mail zu bewegen.
Aber Achtung, nicht alle E-Mail-Clients verwenden dieselben Texte für ihre Preview Line. Zudem möchten einige Marketer die Preview Line in der E-Mail selbst nicht anzeigen. Hierfür kann der uralte Trick verwendet werden, den Text gleichfarbig zum E-Mail Hintergrund zu setzen.
Im Folgenden ein Beispiel mit sichtbarer Previewline.
<td valign="top" class="em_font" align="left" style="font-family:'Open Sans', Arial, sans-serif; font-size:10px; line-height:12px; color:#444444;">… und unsere Previewline</td>
Vorschautext / Preview Line
Nach meiner Erfahrung nutzen ca. 5% der Leute die Online-Ansicht. Eine professionelle E-Mail, sollte diesen Link also auf jeden Fall enthalten, um den Anteil der User nicht zu vergraulen.
Der Link zur Onlineansicht wird ähnlich dem Abmeldelink in der Regel vom E-Mail-Marketing-Programm vorgegeben und ist immer gleich. Alternativ kann man die Onlineansicht auch selbst hosten und den Link entsprechend manuell hinterlegen.
<td valign="top" align="right" width="80" style="font-family:'Open Sans', Arial, sans-serif; font-size:10px; line-height:12px; color:#444444; width:80px;">
<a href="http://crm-evolution.com/files/tutorialNewsletter.html" target="_blank" style="text-decoration:none; color:#444444;">Onlineansicht</a>
</td>
Hierbei sollte man immer den Parameter target auf blank setzen, damit die Webseite in einem neuen Fenster bzw. Tab geöffnet wird und dann auch meistens im bevorzugtem Standardbrowser geöffnet wird.
Navigationsleiste
Eine Navigationsleiste erzeugt nach meiner Erfahrung bis zu 10% der Klicks. Auf diese zu verzichten wäre daher Wahnsinn. Die Navigationspunkte bilde dabei nicht etwa den inhalt Deiner E-Mail, sondern die relevantesten Navigationspunkte Deiner Website/-shop ab.
Hier ein Beispiel für eine Navigationsleiste, die in der Desktop-Ansicht einen Eintrag mehr enthält als in der mobilen Ansicht.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <tr> <td valign="top" align="center"><table width="600" width="10" style="width:10px;" border="0" cellspacing="0" cellpadding="0" align="center" style="width:600px;" class="em_wrapper"> <tr> <td valign="top" align="center"><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="width:600px;" class="em_wrapper1" bgcolor="#fa773c;" style="padding:0px 20px;"><tr> <td height="20" class="em_height" style="height:20px;"> </td> </tr> <tr> <td align="center" valign="top"><!--Row One--> <!--[if gte mso 9]> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" align="center" width="173"> <![endif]--> <table width="173" border="0" cellspacing="0" cellpadding="0" align="left" style="width:173px;" class="em_wrapper_50_1"> <tr> <td class="em_text" valign="top" align="center" style="font-family:'Oranienbaum',Arial,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;color:#34495e; letter-spacing:0.3px;"><a href="http://www.crm-evolution.de?utm_source=newsletter&utm_medium=email&utm_campaign=CRM-Evolution&utm_content=CRM-Tutorial&utm_term=[source]" target="_blank" style="text-decoration:none; color:#444444;">Menu 1</a></td> </tr> </table> <!--[if gte mso 9]> </td> <td valign="top" align="center" width="20"> <![endif]--> <table class="em_hide" width="20" border="0" align="left" cellpadding="0" cellspacing="0" > <tr> <td width="20" height="20"></td> </tr> </table> <!--[if gte mso 9]> </td> <td valign="top" align="center" width="173"> <![endif]--> <table width="173" border="0" cellspacing="0" cellpadding="0" align="left" style="width:173px;" class="em_wrapper_50_2"> <tr> <td valign="top" class="em_text" align="center" style="font-family:'Oranienbaum',Arial,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;color:#34495e; letter-spacing:0.3px;"><a href="http://www.crm-evolution.de?utm_source=newsletter&utm_medium=email&utm_campaign=CRM-Evolution&utm_content=CRM-Tutorial&utm_term=[source]" target="_blank" style="text-decoration:none; color:#444444;">Menu 2</a></td> </tr> </table> <!--[if gte mso 9]> </td> <td valign="top" align="center" width="20"> <![endif]--> <table class="em_hide" width="20" border="0" align="left" cellpadding="0" cellspacing="0" > <tr> <td width="20" height="20"></td> </tr> </table> <!--[if gte mso 9]> </td> <td valign="top" align="center" width="173"> <![endif]--> <table class="em_hide" width="173" border="0" cellspacing="0" cellpadding="0" align="left" style="width:173px;" "em_wrapper_50_1"> <tr> <td class="em_text" valign="top" align="center" style="font-family:'Oranienbaum',Arial,sans-serif;font-size:15px;font-weight:bold;text-decoration:none;color:#34495e; letter-spacing:0.3px;"><a href="http://www.crm-evolution.de?utm_source=newsletter&utm_medium=email&utm_campaign=CRM-Evolution&utm_content=CRM-Tutorial&utm_term=[source]" target="_blank" style="text-decoration:none; color:#444444;">Menu 3</a></td> </tr> </table> <!--[if gte mso 9]> </td> </tr> </table> <![endif]--> <!--Display Block End--> </td> </tr> <td height="16" class="em_height" style="height:16px;"> </td> </table></td> <td width="10" style="width:10px;" class="em_side"> </td> </tr> </table></td> </tr> </html>
Für dieses Menü haben wir eigentlich nur drei aneinander gereihte Buttons gebaut, welche durch einen einfarbigen Hintergrund verbunden wurden. Durch die Klasse em_hide wird in der mobilen Ansicht der dritte Button entfernt und wir sparen auf kleinen Bildschirmen ein wenig Platz, bei zu vielen Navigationspunkten.
Schritt 6: Füge ein Bild ein
Das Einfügen von Bildern funktioniert wie im normalen HTML auch.
<td><img src="http://myimg.com/MyImage.jpg" width: "100%";></td>
Mit diesem Beispiel ladet Ihr ein Bild, welches sich der maximal verfügbaren Breite anpasst. Wo man normal mit einer dynamischen URL arbeiten würde, müssen wir in einer E-Mail immer mit absoluten Pfaden arbeiten, da der E-Mail-Client bei unserem Empfänger lokal arbeitet.
Um Fehler zu vermeiden ist es ratsam eindeutige Namen zu verwenden, die einem festgelegten Muster entsprechen. Dabei sollte auf Sonderzeichen und Umlaute verzichtet werden, da diese zu Fehlern führen können. Gut geeignet ist die sogenannten „CamelCaps“ Schreibweise, bei der jeweils der erste Buchstabe des Wortes großgeschrieben wird. SoKannAufLeerzeichenVerzichtetUndDieLesbarkeitErhaltenWerden.
Retina Bilder / Bildgröße
Bildschirme mit hoher Pixeldichte wie das Retina-Display von Apple verbreiten sich immer weiter. Auf diese neue Technik müssen wir uns einstellen und Quellcode sowie Inhalte auf die höhere Auflösung optimieren. Da bei diesen Geräten die Auflösung bei gleicher Displaygröße (DPI) höher ist, werden alle Inhalte vom Endgerät skaliert, um den Bildschirm zu füllen. Damit entsteht für uns das Problem, dass Bilder unscharf werden. Daher müssen wir die Bilder in vierfacher Auflösung speichern (doppelte Höhe x doppelte Breite).
<img src="IMG2x.jpg" width="700" style="width: 100%; max-width: 700px; display: block; border: 0px;" border="0">
Der Trick ist, das Bild in hoher Auflösung zu hinterlegen und kleiner skaliert anzuzeigen. So hat ein Endgerät mit hochaufgelöstem Display die Möglichkeit, Bilder zu vergrößern, ohne dass die Bilder über ihre eigentliche Auflösung skaliert werden.
Wehrmutstropfen: Nicht in jedem E-Mail-Client werden die Bilder hoch aufgelöst angezeigt und die erhöhten Dateigrößen sorgen für längere Ladezeiten.
Bilder in mobiler Ansicht austauschen
Manchmal kommt es vor, dass wir ein Banner haben, der in der Desktop Version super aussieht und wir ihn unbedingt so wie er ist für unseren Newsletter benutzen wollen! Aber leider hat der für das kleine Display der mobilen Version viel zu viel Inhalt. Also müssen wir in der Mobilen Version des Newsletters per HTML ein anderes Bild anzeigen lassen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<tr>
<td valign="top" align="center" class="em_hide"><a href="http://www.crm-evolution.de?utm_source=newsletter&utm_medium=email&utm_campaign=CRM-Evolution&utm_content=CRM-Tutorial&utm_term=[source]" target="_blank" style="text-decoration:none;"><img src="http://www.jan-paschen.de/files/evolution/banner_de.jpg" width="600" alt="Banner" style="display:block; max-width:600px; font-family:Arial, sans-serif; font-size:20px; line-height:25px; color:#ec2939;" border="0" class="em_img" /></a></td>
</tr>
<!-- Mobile Show -->
<!--[if !mso 9]><!-->
<tr>
<td height="0"><div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top" align="center"><a href="http://www.crm-evolution.de?utm_source=newsletter&utm_medium=email&utm_campaign=CRM-Evolution&utm_content=CRM-Tutorial&utm_term=[source]" target="_blank" style="text-decoration:none;"><img src="http://www.jan-paschen.de/files/evolution/banner_m.jpg" width="100%" alt="Banner" style="display:block; max-width:600px; font-family:Arial, sans-serif; font-size:20px; line-height:25px; color:#ec2939;" border="0" class="em_img" /></a></td>
</tr>
</table>
</div></td>
</tr>
</html>
Schritt 7: Text einfügen und formatieren
Wenn Ich Text in meine E-Mail einfügen möchte, so nutze ich immer so nutze ich in der Regel neue Tabellenelemente, denen ich dann Formatierungen zuweise.
Hier mal ein Beispiel, dass im Anschluss etwas genauer erklärt wird:
<tr>
<td valign="middle" align="center" height="37" style="height:37px; font-family:'Open Sans', Arial, sans-serif; font-size:12px; color:#FFE3DE; color:#444444; letter-spacing:2px; text-transform:uppercase;">
Jetzt ändern
</td>
</tr>
Individuelle Fonts und Fallback Fonts
Oben (siehe CSS-Formatierung von E-Mail-Text, Fonts und Schriftarten) haben wir bereits gezeigt, wann wir neue Schriftarten brauchen und wie wir diese im CCS einbinden. Nun wollen wir diese Schriftart verwenden.
Mithilfe der Auflistung nach font-family versucht der E-Mail-Client zunächst die erste Schriftart ‚Open Sans‘ zu verwenden. Verfügt der E-Mail-Client über diese Schriftart oder ist in der Lage CSS auszulesen, so wird ‚Open Sans‘ dargestellt. Ist beides nicht der Fall, so wird unser Fallback Arial dargestellt.
Würde man hier keine Fallback-Schriftart definieren, so würde im Fallback die vom E-Mail-Client bevorzugte Schriftart verwenden.
Text formatieren
Texte sollten immer vollständig formatiert sein, damit der E-Mail-Client nicht auf eigene Gedanken kommt. Hier gilt wieder viel definieren, hilft viel.
Besonders die Definition der Textstärke mit font-weight ist dann sinnvoll, wenn das Design eben nicht nur normal und fett ist, sondern Abstufungen dazwischen zum Einsatz kommen.
Funktion | Code | Anmerkung |
|---|---|---|
Höhe der Zelle | height=“37″
und
style=“height:37px;“
| am besten beides definieren |
vertikal ausrichten | valign=“top“ | top, center, bottom |
horizontal ausrichten | align=“left“
und
style=“text-align:left;“
| left, center, right
am besten beides definieren
|
Zeilenhöhe | style=“line-height:12px;“ | |
Texthöhe | style=“font-size:10px | |
Textfarbe | style=“color:#444444;“ | |
Textstärke (fett) | style=“font-weight:600;“ | von 100 bis 900
300 – light
400 – normal
600 – semi bold
700 – bold |
Zeichenabstand | style=“letter-spacing:2px;“ | |
Texttransformation | style=“text-transform:uppercase;“ |
Bei Text-Links sind noch einmal andere Dinge zu berücksichtigen (siehe Schritt 9: Füge Links ein).
Textumbrüche nur in Desktopversion
<td>
Dieser Text hat hier <br class="em_hide_mobil"/> nur in der Desktopansicht einen Zeilenumbruch.
</td>
Beim Erstellen einer HTML E-Mail dürfen wir nicht vergessen, dass heutzutage ein Großteil der E-Mails auf mobilen Endgeräten gelesen wird. Auch wenn die Auflösung der Geräte immer höher wird ist der physische Platz begrenzt und ein mit Textumbrüchen formatierter Text würde zum Dauerscroller werden. Da wir aber in der Desktopversion unsere Zeilenumbrüche behalten wollen und diese möglicherweise auch zum Einhalten des E-Mail Designs behalten müssen, brauchen wir eine Möglichkeit Zeilenumbrüche in der mobilen Ansicht auszublenden.
Glücklicherweise ist diese Möglichkeit mit unserem E-Mail Template bereits gegeben. Erinnert ihr euch noch an em_hide_mobil?
Sonderzeichen ersetzen
Um die korrekte Darstellung von Sonderzeichen in allen E-Mail-Clients sicherzustellen, sollten die Sonderzeichen in HTML Character Codes übersetzt werden.
Hier ein paar nützliche Beispiele:
Noch mehr HTML Character Codes findet ihr hier:
Sonderzeichen | HTML Code |
|---|---|
…
&
°
ä
ö
ü
–
é
ß
ʼ
„
„
ñ
à
| … ;
& ;
° ;
ä ;
ö ;
ü ;
– ;
é ;
ß ;
ʼ ;
„ ;
“ ;
ñ ;
à ;
|
Schritt 8: Füge Buttons ein
Es existieren grundsätzlich zwei Arten von Buttons, Bild- und Text-Buttons, die jeweils Vor- und Nachteile haben.
Bildbutton | Textbutton | |
|---|---|---|
Umsetzung | einfacher, wird in Bildbearbeitungstool umgesetzt | komplizierter, da in HTML zu programmieren
nicht alle Designs möglich |
Schärfe | unschärfer, falls das Bild skaliert wird | immer scharf |
Größe | größer, die Bilder müssen heruntergeladen werden | kleiner, da HTML-Code |
Button-Bezeichnung ändern | aufwändig, Anpassungen müssen im Bildbearbeitungstool durchgeführt werden | einfach, Anpassung im HTML-Code |
Häufige Probleme | Button wird nicht angezeigt, wenn Bilder nicht heruntergeladen werden | klickbarer Bereich bei einigen E-Mail-Clients auf Text beschränkt |
Aktuell sind Textbuttons deutlich häufiger ausgeprägt.
Bildbuttons
Könnt ihr euch noch erinnern wie ihr ein Bild eingefügt habt? Sehr gut, denn damit aus einem Table mit Bild ein Button wird müssen wir nur eine weitere Funktion hinzufügen.
<tr>
<td>
<a href="https://www.UnserSeite.de/home.html“ target="_blank" style="text-decoration:none;“>
<img src=“http://UnsereSeite/button.jpg“ width="250" height="120" max-width:250px alt="BUTTON";/>
</a>
</td>
</tr>
Mit der Funktion <a href=“URL“> sorgt ihr dafür, dass das Bild verlinkt ist. Mit target=“_blank“ wird die URL in einem neuen Fenster geöffnet. Mit style=“text-decoration:none;“ unterbindet Ihr das der E-Mail-Client eine Link-Formatierung erfindet.
Mit width und height legen wir die Größe des Buttons fest, mit max-width sorgen wir dafür, dass er die gewünschte Größe nicht überschreitet, selbst wenn das Quellbild größer ist. Mit alt=“BUTTON“ könnt Ihr festlegen, welcher Text angezeigt wird, falls das Bild nicht heruntergeladen wurde.
HTML-buttons
Sehen wir uns erst einmal den Code für den angepassten Button an.
<table width="200" border="0" align="center" style="width:200px; max-width:200px;
border-radius:3px; background-color:#fa773c;" >
<tr>
<td valign="middle" align="center" height="37" style="height:37px; font-family:'Open Sans';
font-size:12px; text-transform:uppercase;">
<a href="https://www.UnserSeite.de/home.html" target="_blank"
style="text-decoration:none; color:#252525; display:block;
line-height:37px;">Button</a>
</td>
</tr>
</table>
Zuerst erstellen wir die Grundfläche des Buttons mit einer Breite von 200px und der Hintergrundfarbe. Mit border-radius definieren wir die Abrundung der Kanten, in unserem Fall 3 Pixel. Somit erhalten wir diese Fläche.
In dieser Fläche erstellen wir für den Text einen neuen Bereich, in dem wir die Ausrichtung und Formatierung des Textes festlegen. Mit text-transform:uppercase sorgen wir dafür, dass alle Inhalte in diesem Bereich in Großbuchstaben geschrieben werden.
Zudem fügen wir mit a href den URL-Aufruf ein. Um ein Link-Dekoration seitens des E-Mail-Clients zu unterbinden, setzen wir text-decoration:none und passen die Schriftfarbe an. So wird unsere zuvor erstellte Formatierung genutzt. Damit wir nicht nur den Text sondern die gesamte Fläche als Button nutzen können gruppieren wir die Elemente mit display:block. Der Parameter target=“_blank“ sorgt dafür, dass die URL in einem neuen Fenster geöffnet wird.
Was beim Links setzen noch zu beachten ist, folgt nun.
Schritt 9: Füge Links ein
Bei der Verwendung von Links, sind die erwähnten ist die Unterbindung von Client-spezifischer Linkdekoration (text-decoration:none) und dem Öffnen im neuen Fenster (target=“_blank“) in der Regel sinnvoll.
Damit Ihr aber auf Eurer Website oder -shop wisst, woher der Traffic kommt, müsst Ihr für Eure Links Tracking-Parameter verwenden. Hierzu benötigt Ihr das Tracking-Konzept der Zielwebsite. Wir behandeln dies einmal anhand von Google Analytics.
Google Tracking Parameter einfügen
Wozu benötigen wir überhaupt UTM-Parameter?
- Zur Webanalyse im Allgemeinen also z.B. zur Attribution meines Traffics zu den einzelnen Traffic-Quellen z.B. E-Mail
- ggf. sogar zur Analyse der Call-to-Actions innerhalb einer E-Mail-Kampagne
- und welche E-Mail-Layout-Elemente z.B. Schriftarten Du verwenden möchtest.
Es gibt zwei Möglichkeiten einen Link mit Trackingparametern zu erstellen. Entweder schreiben wir diese einfach von Hand oder nutzen ein Tool z.B. den Campaign URL Builder von Google Analytics
https://ga-dev-tools.appspot.com/campaign-url-builder/.
Mit ein paar Eingaben erhalten wir hier den vollständigen Link, den wir nur noch in die E-Mail einsetzen müssen. Sehen wir uns zuerst das Tool an. Hier müssen wir nur unsere Website und die drei Hauptparameter angeben.
Für den Fall unseres Beispiel Newsletters wäre der Link dann:
http://crm-evolution.com/?utm_source=EMailNewsletter&utm_medium=EMail&utm_campaign=TutorialNewsletter
Die tatsächliche URL und die Parameter sind immer durch ein „?“ getrennt. Mehrere Parameter werden mit „&“ voneinander getrennt.
Für Google Analytics existieren standardmäßig 5 UTM-Parameter, die wir uns einmal näher anschauen wollen.
Parameter | Kommentar | Beispiel |
|---|---|---|
Utm_medium | Definiert den Traffic-Kanal (Channel). In Google Analytics ist dies die oberste Hierarchie-Ebene | Email |
Utm_source | Definiert die Traffic-Quelle innerhalb der Traffic-Kanals. Im E-Mail-Marketing handelt es sich z.B. um den Newsletter, Life Cycle Kommunikation, Loyalty Kommunikation, getriggerte Kommunikation. In Google Analytics steht die Source hierarchisch unterhalb des Mediums. | Newsletter |
Utm_campaign | Hier benötigen wir ein eindeutiges Kürzel unserer Kampagne. Es empfiehlt sich bei Newslettern mit dem Datum zu arbeiten. | 190708_MesseWerbung |
Utm_Content | Dieser Parameter kann verschiedenartig genutzt werden.
Z.B. bei mehrsprachigen Newslettern für die Spreche (EN, DE, FR)
Z.B. innerhalb der E-Mail, um den Button, das Bild, den Text-Link zu übergeben. (Story01_Banner, Story02_Button, Story2_Produkt)
| EN |
Utm_term | Dieser Parameter ist eigentlich für die Übergabe von Keywords gedacht und wird im E-Mail-Marketing nicht verwendet.
Ihr könnt den Parameter aber zweckentfremden und z.B. userspezifische Daten übertragen. Z.B. die gehashte E-Mail-Adresse. Dadurch ist eine persönliche Identifizierung des Nutzers möglich, womit sich einige Schweinereien anstellen lassen. (Natürlich nur mit dem Einverständnis des Users.)
In Google Analytics findet ihr die Daten unter „Keyword“ und nicht unter „Term“.
| Kunden-ID (Hash der E-Mail) |
In Google Analytics könnt Ihr dann unter dem Punkt „Akquisition“ nachvollziehen wie euer Newsletter performed hat und hoffentlich die ein oder andere hilfreiche Information darüber erlangen, wie der nächste Newsletter noch erfolgreicher werden kann.
Schritt 10: Erstelle den Footer-Bereich der E-Mail
Der Footer einer E-Mail ist in der Regel sehr statisch und erfüllt zwei Funktionen:
- weitere Vernetzung mit dem User fördern (z.B. Social Media Links)
- rechtliche Anforderungen erfüllen, wie Impressum und Abmeldemöglichkeit
Nach meiner Erfahrung ist es auch ratsam nochmal eine Art Seitennavigation zur Verfügung zu stellen, damit die Leser nicht noch einmal nach oben scrollen müssen, um auf Deiner Seite weiterzusurfen. Das bringt nach meiner Erfahrung ca. 5% mehr Klicks.
Social Media Icons
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><a href="#" target="_blank" style="text-decoration:none;"><img src="http://www.jan-paschen.de/files/evolution/insta.png" width="20" height="20" alt="pin" style="font-family:'Open Sans', Arial, sans-serif; font-size:20px; color:#000000; display:block; max-width:20px;" border="0" /></a>
</td> <td width="12" style="width:12px;"> </td> <td valign="top" align="center" style="font-size:0px; line-height:0px;"><a href="#" target="_blank" style="text-decoration:none;"><img src="http://www.jan-paschen.de/files/evolution/pinterest.png" width="20" height="20" alt="insta" style="font-family:'Open Sans', Arial, sans-serif; font-size:20px; color:#000000; display:block; max-width:20px;" border="0" /></a>
</td>
</tr>
Zur weiteren Vernetzung mit dem User, benötigen wir so viele Querverweise wie möglich. Daher sollte auch in einem Newsletter auf unsere genutzten Social Media Plattformen hingewiesen werden. Hierfür werden in der Regel die ohnehin bekannten Icons der Apps genutzt, da diese praktisch jeder auch in seiner kleinen Form wiedererkennt.
Da die Social Media Links nicht auf Eure eigene Webseite leiten, sind hier auch keine UTM-Parameter notwendig. Sie stören aber auch nicht.
E-Mail-Impressum
Ohne mir eine Rechtsberatung anzumaßen, müsst Ihr laut §5 Telemediengesetz (https://www.gesetze-im-internet.de/tmg/__5.html) in jeder E-Mail die Herkunft „leicht erkennbar, unmittelbar erreichbar und ständig verfügbar“ halten. Laut Rechtsprechung (OLG München Az.: 29 U 2681/03) ist ein Link zum Impressum ausreichend.
Best Practise ist es aber der Auskunftspflicht bereits in der E-Mail nachzukommen. Hierbei werden folgende Pflichtangaben gefordert:
- (Firmen-)Name und Anschrift ggf. den/die Vertretungsberechtigten
- Telefonnummer, E-Mail-Adresse
- Handelsregister und Handelsregisternummer
- Umsatzsteuer-Identifikationsnummer
- Link zum Impressum (zur Erfüllung weiterer Informationspflichten)
- Link zu den Datenschutzbestimmungen (zur Erfüllung weiterer Informationspflichten)
Abmeldelink
Auch hier keine Rechtsberatung: Gem. Art. 7 (3) Satz 4 DSGVO gilt: „Der Widerruf der Einwilligung muss so einfach wie die Erteilung der Einwilligung sein.“
Best Practise ist es hier einen Abmelde-Link direkt in der E-Mail zu hinterlegen.
Dieser wird von eurem E-Mail-Marketing Tool generiert, sodass ihr nur noch den Abmeldebutton in eure E-Mail einfügen müsst. In den meisten Fällen werdet ihr in den Button keine URL einfügen, sondern eine vom Marketing-Tool vordefinierte Variable, welche beim Versenden in einen personalisierten Abmeldelink konvertiert wird.
Zum Beispiel würde In Mailchimp ein Abmeldelink wie folgt aussehen:<a href="*|UNSUB|*">Unsubscribe</ a>
In diesem Fall wird das *|UNSUB|* beim Versenden der E-Mail in einen für den Empfänger personalisierten Abmeldelink konvertiert und beim Klick auf Unsubscribe wird der entsprechende Empfänger automatisch aus dem Verteiler ausgetragen.
Schritt 11: Teste das Template
Egal ob Anfänger oder Profi, um das Testen des eigenen Newsletter-Templates kommt niemand herum. Es gehört zu den wichtigsten Schritten auf dem Weg zu einem guten Newsletter und leider auch zu den Mühseligsten.
Jeder Mensch macht Fehler, jeder E-Mail-Client hat seine Macken, unterstützt eine Funktion oder auch nicht. Dann müssen wir auch noch auf Desktop- und Mobile-Endgeräte und deren Betriebssysteme achten. Je mehr Empfänger Ihr habt desto mehr unterschiedliche Kombinationen kommen zustande. Und natürlich sollte euer Newsletter hier immer fehlerfrei dargestellt werden.
Test 1: Testen im Lieblingsbrowser
Unser erster Test ist immer das Betrachten der Webversion des Newsletters im Browser.
Zu prüfen sind:
- Vollständigkeit von Images und Copy (ist alles da, was gebrieft wurde)
- Korrekte Darstellung in Desktop und Mobil (Browserfenster schmal ziehen)
- Korrekte URLs (alle Links durchklicken)
Besonders der Übergang von Desktop nach Mobil ist fehleranfällig und sollten daher gründlich untersucht werden. Häufige Fehler bei der minimalen Breite sind zum Beispiel überlaufende Texte, welche ihren Bereich sprengen und dadurch das Layout verschieben. Die Fehlersuche kann Stunden dauern. Aber nicht verzagen. Habt Ihr den Fehler erst gefunden, seid Ihr wieder schlauer und beim nächsten Mal viel schneller.
Eine Hilfe bei der Suche nach dem Fehler kann die „Element untersuchen“-Funktion des Browsers sein. In den meisten Browsern öffnet Ihr diese Ansicht mit RechtsklickàUntersuchen oder mit F12. Hier bekommt Ihr den HTML-Code in einem separaten Fenster angezeigt und könnt sehen, welche Codezeile für welches Element auf der Seite zuständig ist.
Bei Problemen mit der Darstellung von Bildern, kann es helfen, den Cache zu leeren. Um Ladezeiten zu verringern, arbeiten die meisten Browser mit dem Cache. Hier werden zum Beispiel Bilder lokal gespeichert und wiederverwendet. Tauschen wir also ein Bild aus, ohne den Bildnamen zu verändern, kann es passieren, dass die Änderung vom Cache nicht erkannt und das neue Bild nicht nachgeladen wird. Um diese potenzielle Fehlerquelle zu vermeiden, kann man im Inkognito-Modus arbeiten. So werden keine Daten lokal gespeichert.
Wenn im Browser alles funktioniert, sind wir auf einem guten Weg.
Test 2: Test-E-Mail an sich selbst senden
Nun müssen wir prüfen, ob die Darstellung auch in Gmail und Outlook passt.
Da wir Vollständigkeit und korrekte Links schon vorher geprüft haben, steht bei diesem Test die Darstellung in den E-Mail-Clients im Vordergrund.
Test 3: Test-E-Mail an Testverteiler senden
Der Testverteiler setzt sich in der Regel aus Newsletter-Verantwortlichem, Design-Team und Copy-Team zusammen. Diese checken noch einmal gründlich Ihre Anforderungen, wie Korrekte Images, korrekte Copy, Rechtschreibung, Links etc.
Um die Emails zu versenden, gibt es in eigentlich jedem E-Mail-Marketing-Tool die Möglichkeit, Test-E-Mails zu versenden.
Testumgebungen Litmus und Email on Acid
Zusätzlich kann man die Testumgebungen von zum Beispiel Litmus oder Email on Acid nutzen, um die der Darstellung in verschiedenen E-Mail-Clients zu prüfen. Zudem wird auch auf Broken Links geprüft. Beide sind kostenpflichtig, verfügen aber über eine Free-Trial-Version.
Bei Litmus müssen wir lediglich den Code unseres E-Mail-Newsletters in den Builder der Website kopieren und die Testumgebung starten. Dort erhalten wir bereits eine Liste von über 30 E-Mail-Clients, welche in Desktop, Mobile und Web Clients unterteilt sind. Im nächsten Schritt kann man sehen, wie die E-Mail in den unterschiedlichen Clients gerendert wird.
Email on Acid funktioniert im Grunde genommen identisch, man überprüft ob die E-Mail in unterschiedlichen Clients korrekt angezeigt wird, jedoch haben wir hier den Unterschied das die Clients simuliert werden und wir die E-Mail in Echtzeit betrachten können. Zudem wird ein Spam Check durchgeführt.
Bei der Vielzahl an möglichen Client-Konfigurationen ist es jedoch ohnehin nicht möglich, die komplette Funktionalität auf allen Geräten und E-Mail-Clients sicher zu stellen. Daher sollte man sich auf die in der Zielgruppe am meisten vertretenen konzentrieren und hier eine perfekte E-Mail abliefern.
Weitere Tutorials
Schade, das Tutorial ist schon vorbei. Wenn Ihr aber noch mehr lesen möchtet, findet Ihr hier noch weitere großartige HTML-E-Mail-Tutorials.
Name | Herausgeber | Sprache |
|---|---|---|
A step-by-step Guide to Create Your Own HTML Email | EmailMonks | Englisch |
Erstellen einer einfachen Responsive HTML-E-Mail – Web Design Tuts | Web Design Tuts | Deutsch |
Using CSS in HTML Emails: The Real Story | CSS Tricks | Englisch |
Responsive E-Mail-Templates gratis zum Download
Ihr braucht noch Inspiration für Eure E-Mails? Hier gibt es über 700 responsive E-Mail-Templates zum Download von verschiedenen Anbietern. Danke, Robert.
700 kostenlose Newsletter Templates (die alle responsive sind!)
von EmailToolTester