Guide · Kampagnenmanagement

Erstelle ein responsivesHTML-E-Mail-Template

Der ultimative Schritt-für-Schritt-Guide fürs Newsletter-Coding – mit vollständigem, kopierbarem Code für Kopf, CSS, Body, Header, Bilder, Buttons, Links und Footer.

Je professioneller das E-Mail-Marketing, desto höher die Ansprüche an die Templates für Newsletter oder Transaktions-E-Mails. Sollen besondere Stilelemente wie Schriftarten mit Fallback-Fonts oder ein bestimmtes responsives Design abgebildet werden, stößt man mit den E-Mail-Baukästen der gängigen Tools schnell an seine Grenzen.

Dabei ist es gar nicht so schwer, ein eigenes responsives HTML-E-Mail-Template zu bauen – mit ein wenig HTML-Vorkenntnissen und ein paar Grundregeln des E-Mail-Codings. 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 Webseiten lässt sich nur bedingt für E-Mails einsetzen. Schuld daran sind die unterschiedlichen E-Mail-Clients, allen voran Outlook und Gmail. Sie interpretieren HTML-Code nicht wie übliche Webbrowser, sondern nach ganz eigenen Regeln. Ein paar Beispiele:

Outlook

Hintergrundbilder werden nicht unterstützt
Animierte GIFs werden nicht unterstützt
border-radius wird nicht unterstützt
Links werden immer blau dargestellt
Bilder erhalten unten zusätzliches Padding

Gmail

E-Mails größer als 102 kB werden abgeschnitten
<style>-Tags im Body werden nicht unterstützt
Hintergrundbilder für Non-Google-Accounts nicht unterstützt
Die meisten CSS-Attribute/Pseudoklassen werden ignoriert
Negative margin-Werte werden nicht unterstützt

Zwei Guides für gängige Probleme mit E-Mail-Clients und Workarounds: Outlook-Rendering-Probleme & Workarounds und Gmail-Rendering-Probleme & Workarounds.

Der Hintergrund, warum die Clients vom Web-Standard abweichen, liegt vermutlich in der vermeintlich besseren Darstellung innerhalb der Clients selbst – in der Praxis hat es aber 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. Die Tabelle<table>wird Dein bester Freund – und viel definieren, hilft viel. Alles, was Du nicht definierst (gern auch doppelt und dreifach), kann dem „Standard" des E-Mail-Clients zum Opfer fallen. Los geht's.

Erstelle eine leere HTML-Template-Datei

Für die Erstellung von HTML-Template-Dateien empfiehlt sich ein HTML-Editor. Er strukturiert den Code, hebt Tags und Attribute farblich hervor, schlägt teilweise sogar Attribute vor und macht Fehler leicht erkennbar. Wir nutzen im Folgenden Notepad++, kostenfrei und für unsere Anforderungen völlig ausreichend.

Alternativ eignen sich z. B. auch:

· Visual Studio Code – kostenlos
· Atom – kostenlos
· Sublime Text 3 – kostenlose Testversion

Reicht noch nicht? Hier eine Übersicht über weitere kostenlose HTML-Editoren.

In Notepad++ erstellst Du zunächst eine neue Datei und speicherst sie als HTML – zunächst ganz ohne Inhalt. Genau so soll es sein.

Erstelle den Kopf der E-Mail

Der <head> der E-Mail teilt dem E-Mail-Client wichtige Informationen über den Inhalt mit. Bevor Du anfängst, solltest Du wissen, wie Deine E-Mail aufgebaut sein soll, ab welcher Bildschirmbreite das responsive Design greift und welche Layout-Elemente (z. B. Schriftarten) Du verwenden möchtest.

Für den Anfang kannst Du das hier übernehmen:

html

<!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. der 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]-->
</head>

<!DOCTYPE> steuert das Rendering der HTML-Tags. Obwohl der Abschnitt von einigen Clients wie Outlook und Gmail ersetzt wird, ist es Good Practice, ihn beizubehalten.

Der <title> ist für die E-Mail selbst irrelevant, wird aber in der Online-Ansicht im Browser-Tab angezeigt – üblicherweise trägt er den Betreff der E-Mail.

Die <!--[if !mso]>-Anweisung bindet einen Webfont ein – hier die Google-Font „Open Sans". Ab<style>folgen ein paar CSS-Anweisungen, die wir uns jetzt genauer ansehen.

Erstelle das CSS in der E-Mail

CSS wird von vielen, aber nicht allen E-Mail-Clients unterstützt. Trotzdem lohnt es sich: Mit CSS lassen sich wichtige Anpassungen fürs responsive Design umsetzen. Nutze es außerdem für überspezifische Anweisungen – viel definieren hilft viel und beugt vor, dass ein E-Mail-Client auf die Idee kommt, seine eigenen Design-Standards durchzusetzen. Ein paar Beispiele, wie wir das oben gezeigte CSS meinen:

· Im Body: keine zusätzlichen Abstände oder automatischen Textgrößenanpassungen.
· Bilder: keinen Rahmen.
· Absätze: keine Abstände erfinden.
· Tabellen: keinen Rahmen.

!important definiert die höchste Priorität einer CSS-Anweisung – selbst wenn der E-Mail-Client eigenes CSS einfügt, behalten unsere Anweisungen Vorrang. Übernimm den CSS-Teil zunächst unverändert und passe nur bei konkretem Bedarf an.

Responsives Template-Design im CSS definieren

Das oben gezeigte CSS bildet ein dreistufiges responsives Design ab. Der erste Abschnitt gilt allgemein (Desktop und viele Tablets, feste Breiten – die E-Mail ist hier z. B. auf 700px angelegt). Ab@media (min-width:481px) and (max-width:699px)gilt eine mittlere Stufe, ab@media (max-width:480px)eine für sehr kleine mobile Endgeräte. Für die beiden mobilen Stufen gilt nur nochwidth: 100% !important – die E-Mail ist dann so breit wie der Bildschirm, ohne horizontales Scrollen. Auf dem kleinsten Bildschirmbereich wird zusätzlich die Schriftgröße verkleinert (.em_font), sonst wirkt die Schrift riesig und der Empfänger scrollt endlos. Brauchst Du nur zwei Bildschirmbereiche, lösche einfach den mittleren CSS-Block.

Elemente in der mobilen Ansicht ein-/ausblenden

Es gibt viele Fälle, in denen ein Element in der Desktop-Ansicht erscheinen soll, aber nicht mobil – und umgekehrt. Dafür nutzen wir.em_hide_mobil und.em_hide_desktop. Willst Du z. B. am Desktop Banner A und mobil Banner B zeigen, blendest Du Banner A zunächst mobil aus:

html

<img src="https://crm-evolution.com/media/banner-desktop.jpg" class="em_hide_mobil" alt="Banner" />

Banner B ist standardmäßig ausgeblendet und wird nur mobil eingeblendet:

html

<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">
        <img src="https://crm-evolution.com/media/banner-mobil.jpg" alt="Banner" />
      </td>
    </tr>
  </table>
</div>

CSS-Formatierung von Text, Fonts und Schriftarten

Es gibt Standardschriftarten, die von fast allen E-Mail-Clients unterstützt werden – nur entsprechen sie selten dem Corporate Design. Also: korrekte Schriftart einbinden und Fallback-Schriftart definieren. Web-Fonts gehören in den Kopf der E-Mail, hier am Beispiel Open Sans:<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i,800,800i" rel="stylesheet"/>

Schriftart und -größe (font,font-size,line-height) definierst Du später im Body – im CSS nur, wenn Du davon abweichen willst, z. B. für kleinere Schrift auf kleinen Bildschirmen:.em_font { font-size: 9px !important; line-height: 12px !important; }

Erstelle den Body der E-Mail

Das wichtigste Strukturierungselement im E-Mail-Body ist die Tabelle<table><tr><td>. Tabellen werden dabei häufig ineinander verschachtelt und nebeneinander angelegt – sieht auf den ersten Blick nach schlechter Programmierung aus, hilft aber enorm bei der Umsetzung von Designanforderungen.

Das Float-Design

Da wir für alle Devices und Screengrößen nur einen, immer denselben HTML-Code haben, nutzen wir das sogenannte Float-Design: Elemente stehen abhängig von der Bildschirmbreite neben- oder untereinander. Möchtest Du z. B. am Desktop ein Artikelbild neben dem Text, aber mobil darüber – dafür ist Float-Design gemacht. Zwei Tabellen mit fester Breite stehen nebeneinander; ist der Bildschirm zu schmal, „floatet" die zweite Tabelle unter die erste. Dazu braucht es einen Wrapper, der im CSS für Desktop und Mobile unterschiedlich definiert wird:

css

/* Für den Desktop */
.em_wrapper      { width: 100% !important; }
.em_wrapper2     { width: 100% !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; }

/* Für die mobile Version */
.em_wrapper      { width: 100% !important; }
.em_wrapper2     { width: 100% !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 em_wrapper_50_1 undem_wrapper_50_2werden die Elemente links bzw. rechts angeordnet. Der normale Wrapper sorgt dafür, dass einzelne Tabellen automatisch in die nächste Reihe rutschen, sobald die maximal vorgegebene Breite überschritten wird.

Hintergrund und Rahmenbreite

Ein gern vergessenes Element ist der Hintergrund – bleibt ohne explizite Definition meist weiß. Wir setzen ihn exemplarisch grau, mithilfe einer Tabelle:

html

<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>

Als Nächstes brauchen wir die maximale Breite der E-Mail. Früher waren 600px Goldstandard, mittlerweile geht auch 800px – wir empfehlen 700px. Dafür bauen wir eine Tabelle, die den Rahmen für die gesamte E-Mail bildet:

html

<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>

Und für einen Abstand zwischen Rand und Content? Noch eine Tabelle – die Du als Content-Block immer wieder kopierst, sobald neue Elemente dazukommen:

html

<table width="680" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" style="width:680px;" class="em_table_block">
  ...
</table>

Erstelle den Header-Bereich

Der Kopfbereich der E-Mail umfasst in der Regel:

· das Logo als Identifikationsmerkmal
· den Link zur Online-Ansicht
· die Vorschauzeile (Preview Line), die im Posteingang als Vorschau erscheint
· die Navigationsleiste, entlehnt von der zugehörigen Website oder dem Shop

Vorschautext / Preview Line

Viele Clients zeigen im Posteingang eine Vorschau des Inhalts – meist die ersten Textzeilen. Eine professionelle E-Mail nutzt das aktiv, um neben dem Betreff weitere Inhalte zu transportieren und zum Öffnen zu bewegen. Nicht jeder Client verwendet denselben Text dafür, und manche Marketer wollen die Preview Line in der E-Mail selbst nicht sichtbar machen – dafür der uralte Trick, den Text gleichfarbig zum Hintergrund zu setzen.

html

<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>

Link zur Online-Ansicht

Erfahrungsgemäß nutzen ca. 5 % der Empfänger die Online-Ansicht – eine professionelle E-Mail sollte den Link trotzdem enthalten. Er wird meist vom E-Mail-Marketing-Programm vorgegeben und ist immer gleich; alternativ hostest Du die Ansicht selbst.

html

<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="https://crm-evolution.com/newsletter/online-ansicht" target="_blank" style="text-decoration:none; color:#444444;">Onlineansicht</a>
</td>

Setze target="_blank", damit die Seite in einem neuen Tab und meist im bevorzugten Standardbrowser geöffnet wird.

Navigationsleiste

Eine Navigationsleiste erzeugt erfahrungsgemäß bis zu 10 % der Klicks – darauf zu verzichten wäre Wahnsinn. Die Navigationspunkte bilden nicht den Inhalt der E-Mail ab, sondern die relevantesten Punkte Deiner Website oder Deines Shops. Ein Beispiel mit einem Eintrag mehr am Desktop als mobil:

html

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
  <tr>
    <td align="center" valign="top">
      <table width="173" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper_50_1" style="width:173px;">
        <tr>
          <td class="em_text" valign="top" align="center" style="font-family:'Open Sans',Arial,sans-serif;font-size:15px;font-weight:bold;color:#34495e;letter-spacing:0.3px;">
            <a href="https://crm-evolution.com?utm_source=newsletter&utm_medium=email&utm_campaign=tutorial" target="_blank" style="text-decoration:none; color:#444444;">Menu 1</a>
          </td>
        </tr>
      </table>

      <table width="20" cellpadding="0" cellspacing="0" align="left" class="em_hide"><tr><td width="20" height="20"></td></tr></table>

      <table width="173" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper_50_2" style="width:173px;">
        <tr>
          <td class="em_text" valign="top" align="center" style="font-family:'Open Sans',Arial,sans-serif;font-size:15px;font-weight:bold;color:#34495e;letter-spacing:0.3px;">
            <a href="https://crm-evolution.com?utm_source=newsletter&utm_medium=email&utm_campaign=tutorial" target="_blank" style="text-decoration:none; color:#444444;">Menu 2</a>
          </td>
        </tr>
      </table>

      <!-- dritter Menüpunkt: class="em_hide" blendet ihn mobil aus -->
      <table width="173" border="0" cellspacing="0" cellpadding="0" align="left" class="em_hide" style="width:173px;">
        <tr>
          <td class="em_text" valign="top" align="center" style="font-family:'Open Sans',Arial,sans-serif;font-size:15px;font-weight:bold;color:#34495e;letter-spacing:0.3px;">
            <a href="https://crm-evolution.com?utm_source=newsletter&utm_medium=email&utm_campaign=tutorial" target="_blank" style="text-decoration:none; color:#444444;">Menu 3</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Im Kern sind das drei aneinandergereihte Buttons mit einfarbigem Hintergrund. Die Klasseem_hideentfernt den dritten Button mobil – so sparst Du auf kleinen Bildschirmen Platz bei zu vielen Navigationspunkten.

Füge ein Bild ein

html

<td><img src="https://crm-evolution.com/media/mein-bild.jpg" width="100%" alt="Beschreibung" /></td>

Retina-Bilder / Bildgröße

Liefere Bilder in doppelter Auflösung und begrenze die Darstellung per CSS – so wirken sie auf Retina-Displays gestochen scharf:

html

<img src="mein-bild@2x.jpg" width="700" style="width: 100%; max-width: 700px; display: block; border: 0px;" border="0">

Bilder in mobiler Ansicht austauschen

Manchmal sieht ein Banner am Desktop super aus, hat aber für den kleinen mobilen Bildschirm viel zu viel Inhalt. Also blenden wir das Desktop-Bild mobil aus und zeigen stattdessen ein eigens angepasstes mobiles Bild:

html

<tr>
  <td valign="top" align="center" class="em_hide">
    <a href="https://crm-evolution.com?utm_source=newsletter" target="_blank" style="text-decoration:none;">
      <img src="https://crm-evolution.com/media/banner-desktop.jpg" width="600" alt="Banner" style="display:block; max-width:600px;" 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="https://crm-evolution.com?utm_source=newsletter" target="_blank" style="text-decoration:none;">
              <img src="https://crm-evolution.com/media/banner-mobil.jpg" width="100%" alt="Banner" style="display:block; max-width:600px;" border="0" class="em_img" />
            </a>
          </td>
        </tr>
      </table>
    </div>
  </td>
</tr>
<!--<![endif]-->

Text einfügen und formatieren

Für Text nutzen wir in der Regel neue Tabellenelemente, denen wir Formatierungen zuweisen. Ein Beispiel, das wir gleich genauer erklären:

html

<tr>
  <td valign="middle" align="center" height="37" style="height:37px; font-family:'Open Sans', Arial, sans-serif; font-size:12px; color:#444444; letter-spacing:2px; text-transform:uppercase;">
    Jetzt ändern
  </td>
</tr>

Individuelle Fonts und Fallback-Fonts

Über die Auflistung nach font-family versucht der Client zuerst die erste Schriftart – z. B. „Open Sans" – zu verwenden. Unterstützt er sie nicht oder kann kein CSS auslesen, greift der Fallback (z. B. Arial). Ohne definierten Fallback würde stattdessen die vom Client bevorzugte Schriftart genutzt.

Text formatieren

Texte sollten immer vollständig formatiert sein, damit der Client nicht auf eigene Gedanken kommt – auch hier gilt: viel definieren hilft viel. Besonders die Definition der Textstärke mit font-weight lohnt sich, wenn das Design mehr als nur normal und fett kennt. Bei Text-Links gilt es noch ein paar zusätzliche Dinge zu beachten (siehe Schritt 9).

Textumbrüche nur in der Desktop-Version

Ein Großteil der E-Mails wird heute mobil gelesen. Ein Text mit festen Zeilenumbrüchen aus der Desktop-Version würde mobil zum Dauerscroller. Praktischerweise blendetem_hide_mobil (aus Schritt 3) genau das mobil wieder aus:

html

<td>
  Dieser Text hat hier <br class="em_hide_mobil" /> nur in der Desktop-Ansicht einen Zeilenumbruch.
</td>

Sonderzeichen ersetzen

Damit Sonderzeichen in allen Clients korrekt dargestellt werden, übersetze sie in HTML Character Codes – z. B. ä für „ä" oder   für ein geschütztes Leerzeichen. Eine vollständige Übersicht findest Du bei RapidTables.

Füge Buttons ein

Es gibt grundsätzlich zwei Arten von Buttons – Bild- und Text-Buttons – mit jeweils eigenen Vor- und Nachteilen. Aktuell sind Text-Buttons deutlich häufiger im Einsatz.

Bildbuttons

Damit aus einem Bild ein Button wird, braucht es nur eine zusätzliche Funktion:

html

<tr>
  <td>
    <a href="https://crm-evolution.com/kontakt" target="_blank" style="text-decoration:none;">
      <img src="https://crm-evolution.com/media/button.jpg" width="250" height="120" style="max-width:250px;" alt="BUTTON" />
    </a>
  </td>
</tr>

<a href="URL"> verlinkt das Bild, target="_blank" öffnet ein neues Fenster, text-decoration:none unterbindet eine ungewollte Link-Formatierung. width/height setzen die Größe, max-width verhindert ein Überschreiten selbst bei größerem Quellbild, undalt="BUTTON" zeigt Ersatztext, falls das Bild nicht lädt.

HTML-Buttons

Der Code für einen reinen HTML-Button, ganz ohne Bild:

html

<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://crm-evolution.com/kontakt" target="_blank" style="text-decoration:none; color:#252525; display:block; line-height:37px;">Button</a>
    </td>
  </tr>
</table>

Zuerst legen wir die Grundfläche des Buttons an (Breite, Hintergrundfarbe).border-radius rundet die Kanten – hier 3 Pixel. Innerhalb definieren wir Ausrichtung und Formatierung des Textes; text-transform:uppercase schreibt alles groß. Mit display:block wird nicht nur der Text, sondern die gesamte Fläche klickbar.

Füge Links ein

Bei Links sind client-spezifische Link-Dekoration unterbinden (text-decoration:none) und das Öffnen in neuem Fenster (target="_blank") in der Regel sinnvoll. Damit Du außerdem weißt, woher der Traffic auf Deiner Website kommt, brauchst Du Tracking-Parameter – passend zum Tracking-Konzept der Zielwebsite, hier am Beispiel Google Analytics.

Google-Tracking-Parameter einfügen

UTM-Parameter dienen z. B.:

· der Webanalyse allgemein – etwa der Zuordnung von Traffic zu Quellen wie E-Mail
· der Analyse einzelner Call-to-Actions innerhalb einer Kampagne

Du kannst Trackingparameter von Hand schreiben oder ein Tool nutzen, z. B. den Campaign URL Builder von Google. Ein paar Eingaben genügen, um den vollständigen Link zu erhalten. Für unser Beispiel:

generic

https://crm-evolution.com/?utm_source=EMailNewsletter&utm_medium=EMail&utm_campaign=TutorialNewsletter

URL und Parameter trennt ein „?", mehrere Parameter trennt ein „&". Google Analytics kennt standardmäßig fünf UTM-Parameter (source,medium,campaign,term,content). Unter „Akquisition" siehst Du in Analytics anschließend, wie Dein Newsletter performt hat – und findest hoffentlich die eine oder andere Idee für die nächste Kampagne.

Erstelle den Footer-Bereich der E-Mail

Der Footer ist meist statisch und erfüllt zwei Funktionen:

· weitere Vernetzung mit dem Empfänger fördern (z. B. Social-Media-Links)
· rechtliche Anforderungen erfüllen (Impressum, Abmeldemöglichkeit)

Erfahrungsgemäß lohnt sich zusätzlich eine Art Seitennavigation, damit Leser nicht erst nach oben scrollen müssen – das bringt im Schnitt rund 5 % mehr Klicks.

Social-Media-Icons

html

<tr>
  <td valign="top" align="center" style="font-size:0px; line-height:0px;">
    <a href="https://instagram.com/crmevolution" target="_blank" style="text-decoration:none;">
      <img src="https://crm-evolution.com/media/instagram.png" width="20" height="20" alt="Instagram" style="display:block; max-width:20px;" border="0" />
    </a>
  </td>
  <td width="12" style="width:12px;">&nbsp;</td>
  <td valign="top" align="center" style="font-size:0px; line-height:0px;">
    <a href="https://linkedin.com/company/crm-evolution" target="_blank" style="text-decoration:none;">
      <img src="https://crm-evolution.com/media/linkedin.png" width="20" height="20" alt="LinkedIn" style="display:block; max-width:20px;" border="0" />
    </a>
  </td>
</tr>

Für die weitere Vernetzung mit dem Empfänger sollte auch ein Newsletter auf Deine Social-Media-Kanäle hinweisen – üblicherweise mit den ohnehin bekannten App-Icons, die praktisch jeder auch in kleiner Form wiedererkennt. Da Social-Media-Links nicht auf Deine eigene Website führen, sind UTM-Parameter hier nicht nötig, stören aber auch nicht.

E-Mail-Impressum

Ohne Rechtsberatung: Nach §5 Telemediengesetz muss die Herkunft einer geschäftlichen E-Mail „leicht erkennbar, unmittelbar erreichbar und ständig verfügbar" sein. Laut Rechtsprechung (OLG München, Az. 29 U 2681/03) genügt ein Link zum Impressum – Best Practice ist aber, der Auskunftspflicht direkt in der E-Mail nachzukommen. Gefordert werden in der Regel:

· (Firmen-)Name und Anschrift, ggf. Vertretungsberechtigte
· Telefonnummer und E-Mail-Adresse
· Handelsregister und Handelsregisternummer
· Umsatzsteuer-Identifikationsnummer
· Link zum Impressum
· Link zur Datenschutzerklärung

Abmeldelink

html

<a href="*|UNSUB|*">Abmelden</a>

Teste das Template

Egal ob Anfänger oder Profi: Ums Testen kommt niemand herum. Es ist einer der wichtigsten Schritte auf dem Weg zu einem guten Newsletter – und leider auch einer der mühseligsten. Jeder E-Mail-Client hat seine Macken, und je mehr Empfänger Du hast, desto mehr Client-/Geräte-Kombinationen kommen zusammen.

Test 1: Im Lieblingsbrowser

Erster Test: die Webversion im Browser. Zu prüfen sind:

· Vollständigkeit von Bildern und Copy (ist alles da, was gebrieft wurde?)
· korrekte Darstellung am Desktop und mobil (Browserfenster schmal ziehen)
· korrekte URLs (alle Links durchklicken)

Besonders der Übergang von Desktop zu Mobil ist fehleranfällig – häufig durch überlaufenden Text, der das Layout verschiebt. Die „Element untersuchen"-Funktion des Browsers (Rechtsklick → Untersuchen, oder F12) hilft bei der Fehlersuche: Sie zeigt den HTML-Code und ordnet ihn dem jeweiligen Element zu. Bei Bilddarstellungsfehlern hilft oft ein geleerter Cache oder ein Inkognito-Fenster ohne lokale Daten.

Test 2: Test-E-Mail an Dich selbst

Prüfe, ob die Darstellung auch in Gmail und Outlook stimmt. Vollständigkeit und Links hast Du bereits geprüft – hier steht die Darstellung im jeweiligen Client im Fokus.

Test 3: Test-E-Mail an den Testverteiler

Der Testverteiler besteht meist aus Newsletter-Verantwortlichem, Design- und Copy-Team – sie prüfen noch einmal gründlich Bilder, Copy, Rechtschreibung und Links. Fast jedes E-Mail-Marketing-Tool bietet dafür eine Test-E-Mail-Funktion.

Testumgebungen: Litmus und Email on Acid

Zusätzlich prüfen dedizierte Testumgebungen die Darstellung in vielen Clients gleichzeitig und checken auf Broken Links. Beide sind kostenpflichtig, bieten aber eine Free-Trial-Version.

· Litmus – Code in den Builder kopieren, Test starten: über 30 Clients (Desktop, Mobile, Web), gerendert im direkten Vergleich.
· Email on Acid – arbeitet mit simulierten statt gerenderten Clients, dafür in Echtzeit, inklusive Spam-Check.

Bei der Vielzahl möglicher Client-Konfigurationen ist hundertprozentige Abdeckung ohnehin unrealistisch – konzentriere Dich auf die in Deiner Zielgruppe am stärksten vertretenen Clients und liefere dort eine perfekte E-Mail ab.

Weiterführende Links & Tools

Das Tutorial ist geschafft – wer noch tiefer einsteigen will, findet hier weiterführende Ressourcen:

Keine Lust, selbst zu coden?

Wir coden Dein Newsletter-Template pixelperfekt und responsive – ab 129 € und blitzschnell ab 24 Stunden.

Newsletter-Template Coding ansehen

Ihr Ansprechpartner

Fragen zu Deinem Newsletter-Template?

Ob Umsetzung, Review oder kompletter Newsletter-Code aus einer Hand – wir helfen gern weiter.

Jetzt Kontakt aufnehmen +49 (0) 89 9041 8493