Eine HTML-Vorlage für Ihren E-Mail-Newsletter

Eine reine Text-E-Mail reicht für eine kurze Nachricht, aber ein Newsletter, ein Angebot oder eine Willkommens-E-Mail braucht meist mehr: Ihr Logo, ein Bild, einen klaren Button. Das ist eine HTML-E-Mail. Sie sieht aus wie eine kleine Webseite, wird aber nach ganz anderen Regeln gebaut, weil E-Mail-Programme viel strenger sind als Browser. Das gehört in eine gute Vorlage, und so bereiten Sie sie vor.

Warum eine E-Mail keine Webseite ist

Gmail, Outlook, Apple Mail und Smartphone-Apps zeigen HTML jeweils ein wenig anders an, und viele ignorieren modernen Webcode. Deshalb werden E-Mails auf die altmodische Art gebaut:

• Tabellen für das Layout, keine modernen Web-Layouts.
• Stile direkt an jedem Element, weil viele Programme Stilbereiche entfernen.
• Systemschriften, da eigene Webfonts oft nicht geladen werden.
• Keine Skripte, Formulare oder Videos. E-Mail-Programme führen sie nicht aus. Verwenden Sie stattdessen ein Bild oder einen Button, der zu Ihrem Video oder Formular führt.

Die Bestandteile einer guten E-Mail

• Vorschauzeile: der kurze Text, der im Posteingang neben dem Betreff erscheint. Sie ist Ihre zweite Betreffzeile, verschwenden Sie sie also nicht an „Im Browser ansehen“.
• Kopfbereich: Ihr Logo, klein und mit Ihrer Website verlinkt.
• Überschrift und Hauptbild: worum es in der E-Mail geht, auf einen Blick.
• Kurzer Text: höchstens zwei oder drei Absätze.
• Ein Haupt-Button: „Zur Kollektion“, „Tisch reservieren“. Ein als Link gebauter Button funktioniert überall.
• Fußzeile: Firmenname, Adresse, Kontaktdaten und der Abmeldelink.

Breite und Smartphones

Die übliche Breite liegt bei etwa 600 Pixeln, das passt auf einen Computerbildschirm und in das Lesefenster der meisten Programme. Auf dem Smartphone sollte das Layout einspaltig werden, mit Text, der groß genug zum Lesen ist, und Buttons, die groß genug zum Antippen sind. Mehr als die Hälfte der E-Mails wird auf dem Smartphone geöffnet, prüfen Sie also zuerst die mobile Version.

Bilder und Alternativtext

Manche Programme blockieren Bilder, bis der Leser sie zulässt. Schreiben Sie für jedes Bild einen Alternativtext, damit die E-Mail auch ohne Bilder verständlich ist, und setzen Sie wichtigen Text nie nur in ein Bild. Verwenden Sie nur Bilder, für die Sie die Nutzungsrechte haben. Die Bilder werden bei Ihrem Newsletter-Dienst oder auf Ihrer Website hochgeladen, und die E-Mail verweist auf ihre Adressen.

Der Abmeldelink

Newsletter-Dienste und die Vorschriften vieler Länder verlangen in jeder Marketing-E-Mail eine einfache Möglichkeit zur Abmeldung. Vorlagen enthalten meist einen Platzhalter, den Sie durch den Abmeldelink oder das Tag Ihres Dienstes ersetzen.

So bereiten Sie die Inhalte vor

• Worum es in der E-Mail geht und wer sie bekommt.
• Die Fakten: Preise, Termine, Gutscheincodes, genau so, wie sie sind.
• Wohin jeder Button führt: vollständige Seitenadressen.
• Angaben für die Fußzeile genau so, wie sie erscheinen sollen.
• Farben und Stil, oder eine E-Mail, die Ihnen gefällt, als Orientierung.

Vor dem Versand testen

Schicken Sie die E-Mail an sich selbst in Gmail, in Outlook und auf ein Smartphone. Klicken Sie jeden Link und jeden Button an, prüfen Sie die Vorschauzeile und sehen Sie sich die E-Mail mit ausgeschalteten Bildern an.

Kurz gesagt

Eine gute HTML-E-Mail nutzt Tabellen und Inline-Stile, ist etwa 600 Pixel breit, wird auf dem Smartphone einspaltig und hat einen klaren Button und eine ordentliche Fußzeile. Wenn Sie sie lieber nicht selbst bauen, bestellen Sie eine HTML-E-Mail: Sie beschreiben die E-Mail, das Angebot und wohin die Buttons führen, und erhalten ein Archiv mit dem fertigen HTML und eigens dafür gestalteten Bildern zum Import in Mailchimp, Brevo oder einen anderen Newsletter-Dienst. Die Zahlung wird erst freigegeben, nachdem Sie die Arbeit abgenommen haben.