9 Best Practices für E-Mail-HTML

Eine schöne, wirkungsvolle HTML-E-Mail zu bauen, die überall gleich aussieht, ist selbst für Profis eine Zumutung. Der Haken: E-Mail-Anbieter sind weniger fortschrittlich als Webbrowser und untereinander nicht einig, welche Features sie unterstützen und wie sie sie rendern. Übrig bleibt für dich eine begrenzte Auswahl an Werkzeugen und ein Haufen Probleme und unerwarteter Fehler. Das heißt aber nicht, dass du die E-Mail-Entwicklung nicht selbst in den Griff bekommst.

Der Schlüssel zu erfolgreicher E-Mail-Entwicklung liegt darin, Best Practices zu übernehmen, sich an Standards zu halten, sichere Optionen zu wählen und auf bewährte Werkzeuge zu setzen. Unser Leitfaden zu den Best Practices für E-Mail-HTML zeigt, wie professionelle E-Mail-Marketer erfolgreiche E-Mail-Designs mit hoher Zustellbarkeit und starken Conversions bauen, ohne dabei die Nerven zu verlieren.

Best Practices für das Design von HTML-E-Mails

Wir fangen beim Design an, weil deine Kunden es zuerst sehen, verstehen und darauf reagieren. Es steht hinter Conversions und Öffnungsraten. Studien zufolge achten mehr als 90 % der Befragten auf das visuelle Erscheinungsbild, wenn sie eine Kaufentscheidung treffen. Genau wie Kern und Funktionalität einer HTML-E-Mail muss das Design deshalb fehlerfrei sein. Gehen wir die Best Practices für HTML-E-Mails durch und sehen uns an, welche Aspekte du beherrschen musst.

HTML-E-Mail-Check

Kenne deine Zielgruppe

Jede E-Mail-Marketing-Kampagne beginnt damit, dass du deine Zielgruppe definierst und deine Abonnentenliste entsprechend segmentierst. Das klingt, als hätte es mit dem Design nichts zu tun, tatsächlich ist es aber das Fundament von allem in einer E-Mail-Marketing-Software, und das Design einer HTML-E-Mail bildet da keine Ausnahme.

Deine Zielgruppe zu kennen und vor allem zu wissen, welche E-Mail-Clients im Einsatz sind, ist die Grundlage dafür. Wie schon erwähnt unterscheiden sich E-Mail-Clients, auch große Namen wie Gmail, Outlook, Apple iOS und Windows Mail, darin, welche Features einer HTML-E-Mail sie unterstützen. Du musst also wissen, welche Lösungen und Eigenschaften du einsetzen kannst, damit dir das Design nicht auseinanderfällt.

Mit Analyse-Tools bestimmst du die Gewohnheiten deiner Nutzer und ihre Vorlieben bei Geräten. Diese Informationen helfen dir, ein Design zu bauen, das zum jeweiligen E-Mail-Programm am besten passt. Viele kleine Unternehmen, die ein lokales Publikum oder einen bestimmten Markt ansprechen, profitieren ständig davon.

Was aber, wenn du den internationalen Markt bedienst oder ganz unterschiedliche Gruppen erreichen musst? Dann hast du es mit einem bunten Mix aus E-Mail-Clients zu tun. In diesem Fall hilft dir Segmentierung dabei, die Gerätetypen zu bestimmen, die du abdecken musst. Geh dafür in 3 einfachen Schritten vor:

• Bestimme zuerst den primären E-Mail-Client, also das verbreitetste Gerät unter deinen Abonnenten.
• Baue zweitens ein HTML-E-Mail-Design mit Features, die zu diesem primären E-Mail-Client passen.
• Teste drittens das Design im kleinsten gemeinsamen Nenner. Hier musst du einen Kompromiss finden, damit das Design in jeder Situation gut aussieht.

Dieser Ansatz funktioniert bei den meisten E-Mail-Programmen hervorragend, nur bei Outlook nicht. Outlook ist einer der problematischsten E-Mail-Clients überhaupt. Ein Kompromiss ist schwer zu finden, vor allem wenn ältere Versionen im Spiel sind. Es ist schlicht einfacher, diese Abonnenten herauszulösen und ein eigenes Design nur für sie zu bauen. Wenn deine Nutzer also überwiegend Outlook verwenden, lohnt es sich sehr, eine Version nur für dieses Programm zu bauen und sie an das entsprechende Segment zu schicken.

Und wenn es deine erste Kampagne ist? Wenn du an diese Abonnentenliste noch nie etwas geschickt hast oder schlicht keine Daten zur Gerätenutzung hast? Dann geh so vor:

• Halte dich an sichere Optionen.
• Wende die zehn goldenen Regeln für gutes HTML-E-Mail-Design an.
• Recherchiere selbst. Du kannst deine Zielgruppe eigenständig analysieren, denn E-Mail-Adressen verraten dir, welche E-Mail-Clients deine Abonnenten wahrscheinlich nutzen. Wer ein Konto bei Outlook.com, Yahoo oder Gmail hat, nutzt vermutlich auch die passende Plattform.
• Mach zuerst A/B-Tests, um zu sehen, was besser funktioniert.

E-Mail von Grammarly

Priorisiere ein mobilfreundliches Design

Aktuellen Studien zufolge werden heute mehr als 70 % der E-Mails auf dem Handy geöffnet. Dass ein HTML-E-Mail-Design mobilfreundlich sein sollte, versteht sich damit von selbst. Es gibt allerdings eine versteckte Falle: E-Mail-Marketer verwenden responsives Design und mobilfreundliches Design oft synonym, obwohl das trotz ähnlicher Merkmale nicht dasselbe ist.

Wenn du eine HTML-E-Mail baust, musst du das Design unbedingt aus der Handy-Perspektive denken. Für kleine Bildschirme empfiehlt Apple zum Beispiel eine Typografie von 16px, weil Zeichen so lesbar und unterscheidbar bleiben. Responsives Design als Einheitslösung sieht dagegen nur schrittweise Änderungen der Proportionen vor. Deshalb sehen wir häufig mobile Layouts, in denen die Schrift auf 14px oder sogar 12px steht.

Auf manchen Geräten funktionieren responsive Prinzipien hervorragend. Wenn du mobilen Nutzern aber die beste Erfahrung bieten willst, führt kein Weg an den Best Practices für kleine Geräte vorbei.

Diese Grundregeln für mobilfreundliches Design sollte jeder E-Mail-Marketer kennen:

• Wenn du für iPhones baust, denk an Retina-Displays: Bilder und Grafiken müssen in hoher Auflösung vorliegen.
• Bedienelemente wie Call-to-Action-Buttons und Abmeldelinks müssen sich leicht antippen lassen. Laut Apple sollte die antippbare Fläche mindestens 44px breit sein.
• Alle wichtigen Details der Oberfläche (Navigation, Call to Action, Abmeldelink und Kontaktdaten) müssen leicht erreichbar sein. Baust du für Handys und Phablets, gehören sie in den mittleren Bereich. Baust du für Tablets (kleine iPads oder Querformat auf Phablets), gehören diese Details an die Ränder.
• Hol alles aus der Formatierung heraus. Halte Überschriften kurz. Zerlege den Text in kleine Blöcke, die sich leicht überfliegen lassen.
• Verzichte auf dekorative Schriften. Wähle klare, einfache Schriftarten.
• Vermeide einen überlangen HTML-Body. Zwing deine Leser nicht zum Scrollen. Lange Newsletter auf kleinen Bildschirmen zu lesen ist mühsam, unterwegs erst recht.
• Setze den Call-to-Action-Button nach oben und wiederhole ihn unten.
• Finde den optimalen Kontrast zwischen Hintergrund und Vordergrund. Halte deine Designs kontraststark, denn die E-Mail kann auch in praller Sonne geöffnet werden.
• Verlass dich nicht auf Hyperlinks, sie lassen sich schwer treffen. Mach nach Möglichkeit Buttons daraus.
• Lass das Hero-Bild nicht den ganzen Bildschirm füllen. Finde die Balance zwischen Bild und Text und zeig die Kernbotschaft schon auf dem ersten Bildschirm.
• Geh klug mit Weißraum um. Weißraum kann dein Design tragen oder zerstören. Übertreib es nicht. Zu viel Weißraum macht das Lesen anstrengend, während gar kein Weißraum die gesamte Nutzererfahrung ruinieren kann. Bewährt hat sich, Abstand um Buttons, alleinstehende Links und Bilder zu legen und dabei Zeilenlänge und Zeichenabstand feinzuschleifen.

Infografik zur mobilen Nutzung

Setz auf Personalisierung

Eine der Säulen von gutem E-Mail-Marketing lautet: Wenn ein Newsletter hohe Conversion-Raten bringen soll, müssen deine Kunden sich emotional mit deinem Produkt oder deiner Dienstleistung verbinden. Ohne emotionale Verbindung rührst du niemanden an und erreichst auch keine nennenswerten Ergebnisse.

Der Schlüssel zu dieser Verbindung liegt in der Personalisierung, umgesetzt über Botschaft und Design. Während personalisierte Elemente (etwa der Name des Empfängers oder ein Angebot auf Basis seiner Kaufhistorie) den Nutzer direkt ansprechen, rahmt das Design diesen Dialog und macht die Verbindung wirkungsvoll und emotional.

Welches Design du auch anpeilst, personalisiere es unbedingt. Analysiere deine Zielgruppe, segmentiere Abonnenten nach Vorlieben, Kaufgewohnheiten, Geschlecht, Ort und Alter und passe das Design entsprechend an.

Ein gutes Beispiel für Personalisierung über das Design ist die Wahl der richtigen Farbe. Menschen urteilen bekanntlich unbewusst über ein Produkt anhand seiner Farbe. Triffst du die richtige Farbe für deinen Zielmarkt, verstärkst du die emotionale Verbindung zur Zielgruppe und erhöhst damit auch die Conversion-Raten.

Baust du zum Beispiel ein Design für eine weibliche Zielgruppe, empfehlen sich weiche Blau- und Lilatöne, weil Frauen sie laut Farbpsychologie bevorzugen. Ein männliches Publikum freut sich dagegen über kräftige Blau- und Grüntöne, während Teenager vor allem auf marketingetablierte Farben wie Pink oder Blau anspringen.

10 goldene Regeln für erfolgreiches E-Mail-Design

Wie schon gesagt: Damit ein HTML-E-Mail-Design funktioniert, musst du deine Zielgruppe kennen, segmentieren und Personalisierung nutzen. Das ist aber noch nicht alles, ein paar weitere Tipps bringen dein Projekt zusätzlich voran.

Sehen wir uns die Praktiken an, die im Kern jeder erfolgreichen Kampagne stecken, unabhängig von Nische und Größe des Unternehmens. Das sind die zehn goldenen Regeln für gutes HTML-E-Mail-Design. Behalte sie im Kopf und setze sie in jedem Projekt um:

• Schreib eine starke Betreffzeile. Eine starke Betreffzeile bringt deiner E-Mail-Marketing-Kampagne enorm viel: Der Newsletter fällt im Posteingang auf, weckt Interesse und bringt Leute dazu, ihn zu öffnen und noch einmal zu öffnen.

Dazu kommt, dass sie dem Newsletter hilft, an Spam-Filtern vorbeizukommen, weil sie einer von mehreren Faktoren ist, die Mailbox-Provider prüfen, bevor sie den Newsletter in den Posteingang lassen. Wirkt die Betreffzeile „verdächtig“, blockiert der empfangende Server die E-Mail.

Sorg also dafür, dass deine Betreffzeile stark, eigenständig und wertvoll ist. Dafür sollte sie diese Grundregeln erfüllen:

• sie enthält keine typischen Spam-Formulierungen;
  • sie kommt auf den Punkt;
  • sie bietet einen Mehrwert;
  • sie ist personalisiert;
  • sie nutzt nur zulässige Zeichen;
  • sie ist sauber formatiert.
• Prüfe auf defekte Links. Neben Grammatik und Zeichensetzung im HTML-Body musst du unbedingt sicherstellen, dass alle Links und Buttons funktionieren. Defekte Links ruinieren die Nutzererfahrung und stehen dem Landen im Posteingang im Weg, weil Mailbox-Provider sie als Spam-Signal werten. Das passiert häufig: Über alle E-Mails hinweg, die wir prüfen, enthalten 22 % einen defekten Link, ein kurzer Durchgang vor dem Versand bringt dich also vor fast ein Viertel aller Absender.
• Prüfe auf Links, die auf einer Blacklist stehen. Ein defekter Link ist schlimm, ein Link auf einer Blacklist ist schlimmer. Führen Links in deinem HTML-Body zu Websites auf einer Blacklist oder zu unseriösen Seiten, kann der Mailbox-Provider den Newsletter als Spam markieren und abweisen. Prüfe deshalb vor dem Versand Quellen und Links doppelt, auf die du deine Leser schickst.
• Verzichte auf Kurzlinks. Link-Verkürzung reduziert zwar die Größe der HTML-Datei, ist aber auch bei Spammern immer beliebter. Viele Mailbox-Provider sind bei dieser Technik sehr misstrauisch. Mit Kurzlinks steigt deine Chance, als Spam markiert zu werden. Meide sie also unbedingt.
• Geh mit dem Layout nicht über 600px hinaus. Du kannst die Fläche auf 800px ausdehnen, wenn deine Zielgruppe das zulässt, mit der sicheren Variante sorgst du aber viel leichter dafür, dass deine HTML-E-Mail auf unzähligen Geräten funktioniert. Dazu kommt: 600px Breite lenken den Blick unaufdringlich auf die wichtigen Informationen und lassen den Newsletter wertvoll wirken.
• Verlass dich nicht auf Bilder, um die Botschaft zu transportieren, und vermeide reine Bild-Designs. Das Auge isst mit, Bilder sind also die wichtigste visuelle Kraft für Botschaft und Eindruck, beim HTML-E-Mail-Design ist trotzdem nicht alles so einfach. Der Haken: Viele E-Mail-Clients blockieren Bilder von Erstabsendern, andere unterstützen das Format schlicht nicht. Sich auf Bilder zu verlassen, kann deshalb eine schlechte Idee sein.
• Nutze sichere Schriften wie Arial, Comic Sans, Courier, Times New Roman, Trebuchet MS, Verdana und Georgia. Willst du eine der großartigen Google Web Fonts einsetzen, brauchst du einen Fallback, denn E-Mail-Anbieter unterstützen sie kaum. Pack sie außerdem in eine WebKit Conditional Media Query, um Probleme mit Outlook abzufangen. Und gib font family, font size und color explizit an, damit der E-Mail-Client sie nicht überschreibt.
• Optimiere den HTML-Body. Optimierung ist bei einer HTML-E-Mail entscheidend. Überschreitet dein Newsletter ein bestimmtes Gewicht, kann der empfangende Server ihn abweisen, weil er ihn für einen Cyberangriff hält. Minimiere deshalb unbedingt deinen Code und optimiere Bilder.
• Pepp das Ganze mit psychologischen Kniffen auf. Ein paar psychologische Kniffe helfen deinem HTML-Body und deinem Design, das gewünschte Ziel zu erreichen. Zum Beispiel:
  • Sorg dafür, dass der Hero-Bereich das Hauptangebot mit einem starken Bild stützt.
  • Nutze das Prinzip der umgekehrten Pyramide, um die Botschaft zu transportieren und Leute unaufdringlich zum Klick auf den Button zu bewegen.
  • Ergänze dynamische Elemente wie Rollover-Effekte auf Bildern und Buttons, Tooltips, Radio-Buttons und Übergänge, um die Nutzererfahrung anzureichern.
  • Setze animierte GIFs ein, um einen bleibenden Eindruck zu hinterlassen. E-Mail-Clients unterstützen sie breit, du kannst sie also recht sorglos nutzen.
  • Übernimm interaktive Features und beeindrucke deine Leser mit einer spielerischen Erfahrung. Interaktive Features haben zwar Probleme mit Kompatibilität und Support, viele neue Versionen von E-Mail-Clients können sie aber darstellen. Wenn dein Zielmarkt die neuesten Versionen von Apple Mail und Gmail nutzt, wird er die Sache genießen.
• Finger weg von Dingen wie:
  • Flash;
  • JavaScript;
  • Videos;
  • Audio;
  • Formularen.

Diese Formate werden kaum oder gar nicht unterstützt.

Animierte E-Mail von Adobe

Best Practices für die Entwicklung von HTML-E-Mails

Damit du alle Vorteile eines guten E-Mail-Designs nutzen kannst, muss der Kern des Newsletters (Struktur, Layout und funktionale Einheiten) wie vorgesehen arbeiten. Halte dich deshalb an die Best Practices für die Entwicklung von HTML-E-Mails. Das wiegt schwerer, als die meisten Absender denken: Über alle E-Mails hinweg, die wir prüfen, bestehen nur 30 % unsere Prüfung der HTML-Best-Practices, die große Mehrheit lässt also Raum für Rendering- und Zustellbarkeitsprobleme, die dir die folgenden Schritte ersparen.

Hol alles aus Tabellen heraus

So gern du in deinem HTML-Layout Flexbox oder Grid nutzen würdest: Es geht leider nicht, weil E-Mail-Clients diese besonderen CSS-Features nicht unterstützen. Du kannst es mit Divs und Floats versuchen, deren Möglichkeiten sind aber ebenfalls begrenzt. Auf der sicheren Seite bist du nur mit Tabellen. Tabellen sind das zuverlässigste Werkzeug für ein Layout.

Bei Tabellen gilt der allgemeine Rat: einfach halten und bei einer einspaltigen Struktur bleiben. Zwei- oder sogar dreispaltige Layouts kannst du wagen, wenn deine Abonnenten die Newsletter am Desktop oder Notebook öffnen.

Für komplexe Strukturen kannst du Tabellen verschachteln. Ein paar wichtige Dinge musst du dabei beachten:

• Nutze das Attribut „align=left“ mit einer festen Breite für jede Tabelle, um sie horizontal anzuordnen.
• Vermeide leere Tabellenzellen, manche E-Mail-Clients interpretieren sie falsch. Nutze stattdessen ein geschütztes Leerzeichen mit einer in CSS gesetzten Größe.
• Entferne alle Leerzeichen zwischen den Tags, sie können das Layout zerlegen.
• Hol alles aus den nativen Tabellenattributen wie cell padding, valign, align und width heraus, um Maße zu setzen oder Elemente in Zellen zu positionieren.
• Nutze eine einzige übergeordnete Tabelle.

HTML-Tabellen

Sei vorsichtig mit CSS-Styles

CSS-Styles sind eine der größten Schwachstellen in der E-Mail-Entwicklung. Die meisten modernen CSS3-Features werden von E-Mail-Clients breit nicht unterstützt. Dazu kommen viele Tabus beim Stylen. Von diesen verbreiteten Praktiken solltest du zum Beispiel die Finger lassen:

• zusammengesetzte Style-Deklarationen;
• Kurzschreibweisen;
• komplexe Selektoren;
• Pseudoelemente;
• Layout-Eigenschaften.

Das ist noch nicht alles: Beim Einsatz von Styles in HTML brauchst du hier ausgerechnet Inline-Styles, eine Praxis, die im Webdesign als schlecht gilt und sich im E-Mail-Design als Rettung entpuppt.

Schlimmer noch: Wer auf Nummer sicher gehen will, nutzt besser

• CSS2 statt CSS3,
• HTML-Attribute statt CSS,
• padding statt margin,
• background-color statt background.

Sei responsiv

Responsives Design ist eine der wichtigsten Best Practices für HTML-E-Mails, weil heute das mobile Web den Ton angibt. Diese Empfehlungen helfen deinem Design, sich elegant an verschiedene Bildschirmgrößen anzupassen:

• Nutze ein einspaltiges Layout, damit du Elemente nicht umsortieren musst, was bei verschachtelten Tabellen heikel wird.
• Nutze Media Queries, um das Design für jeden wichtigen Breakpoint zu verfeinern.
• Skaliere Bilder passend zum Bildschirm. Zentriere sie außerdem, damit die wichtigen Informationen sofort ins Auge fallen.
• Passe die Schriftgröße an jeden Breakpoint an. Denk daran: Kleine Bildschirme brauchen eine größere Schrift, als du denkst. Achte außerdem darauf, dass letter-spacing und line-height ein optimales Leseerlebnis ergeben.

Responsives Design lässt sich auf mehreren Wegen umsetzen: Media Queries mit einem Satz Breakpoints und ein fluides Layout, bei dem CSS die Berechnungen übernimmt. Jeder Ansatz hat Vor- und Nachteile.

Diese hilfreichen Artikel geben dir einen soliden Start:

• Responsives E-Mail-Design: Tipps und Überlegungen
• So baust du eine responsive E-Mail-Vorlage

Und zu guter Letzt

Bei einem responsiven Design musst du dich unbedingt an die Standards für guten Code halten:

• halte deinen Code so leicht wie möglich;
• halte deinen Code sauber;
• strukturiere deinen Code;
• ergänze Kommentare;
• prüfe nicht nur Logik und Struktur, sondern auch die Syntax, und dann noch einmal.

Beispiel für responsives E-Mail-Design

Setz Authentifizierungsprotokolle ein

Authentifizierungsprotokolle (SPF, DKIM und DMARC) legen eine Sicherheitsschicht über deine E-Mails. Pflicht sind sie nicht, empfohlen sind sie trotzdem für jedes Unternehmen. Es gibt mehrere gute Gründe, sie einzurichten:

1. Sie helfen dabei, Cyberkriminalität zu bekämpfen.
2. Sie schaffen eine klare, transparente Verbindung zwischen Abonnenten und Absender.
3. Sie stärken deine Absender-Reputation, was wiederum die Zustellbarkeit über passende Dienste verbessert und die Öffnungsrate hebt.
4. Sie lassen selbst Unternehmen mit schwacher Reputation verlässlich wirken.
5. Sie erlauben Unternehmen, eine Richtlinie für abgewiesene Newsletter festzulegen.
6. Sie geben Einblick in das, was im Ökosystem aus Absender und Empfänger passiert ist.
7. Sie geben dir eine echte Chance, im Posteingang zu landen, weil die meisten Mailbox-Provider sie als Hauptfaktoren für das Schicksal einer E-Mail heranziehen.

SPF, DKIM und DMARC helfen professionellen E-Mail-Marketern dabei, dass ihre E-Mails heil an ihrem Ziel ankommen. Richte sie deshalb ein.

Richte den List-Unsubscribe-Header und Reverse-DNS-Lookup ein

Neben den Authentifizierungsprotokollen gibt es noch eine Sache, die du mit deinem Mailserver-Administrator klären musst: den List-Unsubscribe-Header und den Reverse-DNS-Lookup einrichten.

Die beiden Mechanismen haben nichts miteinander zu tun, arbeiten aber auf dasselbe Ziel hin: deine E-Mail vertrauenswürdig und dein Unternehmen verlässlich wirken zu lassen.

Sehen wir sie uns etwas genauer an.

Der List-Unsubscribe-Header ist ein E-Mail-Header mit dem Befehl, Nutzer direkt von einer Mailingliste abzumelden. Er enthält Anweisungen, die E-Mail-Clients sagen, welchen Mechanismus sie in die E-Mail einbetten sollen, damit Leute sich schnell und schmerzlos von der Liste abmelden können. Wichtig: Ein Abmeldelink im HTML-Body reicht heute nicht mehr. Damit deine Abonnenten sich in der Beziehung wohlfühlen und Mailbox-Provider sehen, dass dein Unternehmen sich an das Gesetz hält, solltest du den List-Unsubscribe-Header einrichten.

Reverse-DNS-Lookup ist eine Abfragetechnik, die Domainnamen und IP-Adressen einander zuordnet. Sie steckt im Kern vieler Analysewerkzeuge. Und sie ist einer der vielen Faktoren, die ein Mailbox-Provider bei der Frage nach der Echtheit deines Newsletters heranzieht. Ist Reverse-DNS-Lookup nicht konfiguriert, kann der Provider E-Mails von diesem Server ohne Weiteres abweisen. Bitte deshalb deinen Mail-Dienstleister, das für deine Domain einzurichten, denn standardmäßig ist es nicht konfiguriert.

Prüfe Blacklists

Niemand will mit Unternehmen zu tun haben, die auf einer Blacklist stehen, und wie es dazu kam, interessiert niemanden. Deine Reputation ist alles, und sie muss makellos sein. Punkt. Blacklists können deshalb ein echter Fluch sein. Sie zerstören alles, von deiner Absender-Reputation in den digitalen Weiten bis zur Markenreputation in der echten Welt. Für deine Marke haben sie diese unangenehmen Folgen:

• Schaden an der Absender-Reputation;
• Schaden an der Markenreputation;
• Gewinneinbußen;
• Verlust von Kunden und Fans.

Das Hauptproblem an einer Blacklist: Man landet lächerlich leicht darauf und wird blockiert. Wenn du zum Beispiel die Best Practices für HTML-E-Mails überdehnst oder dich im Weihnachtsgeschäft hinreißen lässt und zu viele E-Mails an Abonnenten schickst, steckst du schnell in Schwierigkeiten.

Das zweite große Problem mit Blacklists: Niemand sagt dir Bescheid, dass du drauf stehst. Du tappst im Dunkeln, während die Blacklist anfängt, deine Absender-Reputation zu zerstören und Zustellbarkeit und Öffnungsrate zunichtezumachen.

Das dritte Problem: Es gibt mehr als hundert Blacklists im Netz, darunter Malware-Blacklists, DNS-Blacklists, IP-Blacklists, Phishing-Blacklists und Spam-Blacklists. Jede hat eigene Richtlinien und Kriterien. Natürlich wirken sie sich nicht alle gleich stark auf deine Kampagne aus, irgendwann kann aber auch eine unbekannte Blacklist deine Marketingstrategie ruinieren.

Halte dich also unbedingt von Blacklists fern. Eine der Best Practices für HTML-E-Mails lautet: Prüfe Blacklists regelmäßig und handle schnell. Dafür kannst du Tools nutzen wie

• Unspam.email,
• Spamhaus Block List,
• Barracuda.

Falls du drauf stehst, keine Panik. Geh auf die offizielle Website des Blacklist-Betreibers und lies dich in das Verfahren zum Delisting ein. Behebe alle Probleme mit Kampagne, Domain, IP und Mailserver und stelle einen Antrag auf Delisting.

Blacklist-Check von Unspam.email

Setz auf Barrierefreiheit

Barrierefreiheit wird von E-Mail-Entwicklern konsequent übersehen, meist weil sie den Punkt für ein Thema des Webdesigns halten. Dein digitaler Newsletter sollte aber für jeden Menschen zugänglich sein. Eine Beeinträchtigung darf nie ein Hindernis sein. Und das ist leichter zu erreichen, als der Ruf vermuten lässt: Über alle E-Mails hinweg, die wir prüfen, bestehen 84 % die Prüfungen zur Barrierefreiheit, die folgenden Praktiken liegen für die meisten Absender also gut in Reichweite.

Halte dich an diese Best Practices für HTML-E-Mails, um ein ordentliches Niveau an Barrierefreiheit zu erreichen:

• Setz auf semantischen Code. Sauberes Markup wie -Tags für Überschriften oder

  -Tags für Absätze hilft Screenreadern, den HTML-Body korrekt zu interpretieren. Das verbessert außerdem die Lesbarkeit und lässt Leser leicht durch die Inhalte navigieren.

• Setze alle wesentlichen Attribute. Dazu gehören das Attribut „lang“ für die Sprache, das Tag „title“ für den Titel der E-Mail und „Content-Type“ mit dem Meta-Tag „charset“ für die korrekte Zeichenkodierung. Das verhindert nicht nur, dass das Lesemuster deiner Abonnenten bricht, es macht den HTML-Body auch aus Code-Sicht valide.
• Setze Alt-Text, wo er gebraucht wird. Alt bei Bildern zu setzen ist eine bekannte Praxis. Wichtig ist aber zu verstehen, dass nicht jedes Foto ihn braucht. Alt-Texte sind nur für Elemente Pflicht, die dem Leser einen Mehrwert bringen. Ist ein Bild überflüssig, sollte es keinen Alternativtext bekommen, weil der nichts bringt. Dasselbe gilt für dekorative Elemente oder Grafiken, die nur ästhetisches Beiwerk sind. Und beachte: Alt-Text lässt sich stylen.
• Sorg für optimalen Kontrast. Laut WCAG 2.0 sollte er mindestens 4,5:1 betragen.
• Sorg für eine saubere Informationshierarchie und eine logische Struktur im HTML-Body.
• Nutze ARIA. Accessible Rich Internet Applications sind ein mächtiger Mechanismus, der Screenreadern hilft, die Lage besser zu verstehen. Halte dich an diese bewährten Tipps:
  • Setze role auf „Presentation“ bei jeder Tabelle, die das Layout aufbaut.
  • Setze role auf „article“ für jeden Informationsblock.
  • Setze role auf „img“ für jedes Bild.
  • Setze role auf „listitem“, um eine Liste zu kennzeichnen.

Mehr zum Thema findest du in Barrierefreiheit im E-Mail-Design: warum sie wichtig ist.

Teste alles

Was auch immer du baust: Teste regelmäßig. Das ist eine der wichtigsten und leider am häufigsten übersehenen Best Practices für HTML-E-Mails. Regelmäßige Prüfungen stellen sicher, dass mit E-Mail und Kampagne alles stimmt. Bevor du an deine Kunden verschickst, solltest du deshalb diese Dinge erledigt haben:

• Prüfe die Grammatik. Tippfehler im HTML-Body mag niemand, sie lassen deine Marke inkompetent und billig wirken. Arbeite die Checkliste in So erstellst und prüfst du einen Newsletter vor dem Versand ab, damit dein HTML-Body fehlerfrei ist.
• Prüfe die Gerätekompatibilität mit einem kostenlosen Rendering-Test für E-Mails, um zu sehen, welche Rendering-Probleme dir entgangen sind. Das ist eines der größten Themen, denn dafür zu sorgen, dass deine HTML-E-Mail in allen verbreiteten E-Mail-Clients, auf allen Geräten und in allen Browsern gleich funktioniert, ist ein Albtraum. Selbst wenn du deine Hausaufgaben perfekt gemacht und Abonnenten nach Gerätenutzung segmentiert hast, musst du sicherstellen, dass dein Design in jeder Lage gut aussieht. Falls der Preis für Vorschauen über viele Clients hinweg ein Thema ist: Unsere Litmus-Alternative deckt dieselben Rendering-Prüfungen ohne die schweren Kosten ab.
• Prüfe auf Blacklists und Spam. Mehr dazu findest du in diesem hilfreichen Artikel: Newsletter auf Spam prüfen und die Zustellbarkeit testen.
• Prüfe den Gesamtscore deiner HTML-E-Mail. Jetzt geht es tiefer in die Gesundheit deiner aktuellen E-Mail-Marketing-Kampagne. Mit professionellen Tools wie Unspam findest du schnell heraus, was dich den Platz im Posteingang deiner Abonnenten kosten kann. Unspam prüft zentrale Punkte wie
  • Sicherheitsprotokolle wie SPF, DKIM und DMARC: ob sie korrekt konfiguriert sind;
  • die Betreffzeile: ob sie spamsicher ist;
  • den HTML-Body: ob er den Best Practices folgt, damit er keine Spam-Filter oder Blacklists auslöst, und vieles mehr.

Und nicht zuletzt: Mach A/B-Tests. Ein poliertes HTML-Design allein sichert den Erfolg einer Kampagne nicht, du musst verstehen, wie deine Abonnenten auf Design, Angebot und Machart des Newsletters reagieren, denn Geschmäcker sind verschieden. Eine E-Mail-Heatmap macht diese Reaktion sichtbar und zeigt genau, wohin Leser schauen und wo sie klicken, damit du den Call to Action dorthin verschieben kannst, wo die Aufmerksamkeit ohnehin liegt. Dafür brauchst du A/B-Tests. Sie geben dir Hinweise darauf, was in deinen Newsletter gehört, damit deine Abonnenten richtig reagieren und aus Interessenten zahlende Kunden werden.

Einfache Wege, eine HTML-E-Mail zu bauen

Das Schöne an der Entwicklung von HTML-E-Mails: Niemand hat gesagt, dass du alles selbst machen musst. Eine ordentliche E-Mail zu bauen ist anspruchsvoll, es gibt so viele Praktiken zu befolgen, so viele Werkzeuge einzubinden und so viele Prüfungen zu erledigen. Mit etwas Unterstützung kommst du aber locker durch.

Wenn du programmieren kannst, profitierst du zum Beispiel von fertigen HTML-E-Mail-Vorlagen, die dir ein verlässliches Fundament geben. Sieh dir diese kostenlosen HTML-E-Mail-Vorlagen an.

Ohne technisches Wissen übergibst du die Aufgabe an Tools, die die schwere Arbeit übernehmen, etwa Postcards. Postcards ist eines der beliebtesten und meistgenutzten Werkzeuge von E-Mail-Marketern weltweit. Es bringt einen intuitiven Builder für E-Mail-Vorlagen mit Drag-and-drop mit, dazu Hunderte schöne, handgebaute und im Feld getestete Module, praktische Anpassungsoptionen und viele Features wie eine Versionshistorie oder die native Integration mit verbreiteten ESPs wie Mailchimp. Bei uns ist es außerdem die erste Wahl unter den besten Buildern für E-Mail-Vorlagen für 2026.

Postcards

Fazit

Seien wir ehrlich: Das E-Mail-Design steckt im finsteren Mittelalter. Wir können weder moderne CSS-Features nutzen noch JavaScript für Fallbacks einsetzen. Übrig bleiben spärliche Lösungen, die nicht einmal in allen E-Mail-Clients gleich rendern. Beim Bau eines ordentlichen E-Mail-Designs stehen uns also viele Hürden im Weg. Das heißt aber nicht, dass wir es nicht hinbekommen.

Um alle Hürden zu nehmen, musst du die Best Practices für HTML-E-Mails befolgen (sie machen einen enormen Unterschied dabei, wie dein Newsletter in verschiedenen Clients dargestellt wird und wie deine Zielgruppe auf die Kampagne reagiert) und natürlich auf Werkzeuge setzen, die E-Mail-Marketern festen Boden unter den Füßen geben sollen.