Die häufigsten Fehler bei der E-Mail-Codierung und wie man sie vermeidet

Trotz all des Schnickschnacks Ihrer E-Mail können Codierungsfehler sie komplett ruinieren. Nur ein falsch gekürzter Link oder ein falsches Farbformat – und Ihre E-Mail sieht elend aus, vor allem, wenn ein Nutzer sich entscheidet, sie über ein Smartphone statt über einen Web-E-Mail-Client abzurufen oder auf ein Gadget mit einer anderen Bildschirmauflösung umsteigt.

In diesem Beitrag werden wir über häufige Fehler bei der HTML-E-Mail-Codierung sprechen und einige Ratschläge zu deren Vermeidung geben.

Woher kommen E-Mail-Anzeigeprobleme?

Einfach ausgedrückt gibt es zwei mögliche Gründe, warum ein Benutzer Ihre E-Mail außerhalb der von Ihnen geplanten Weise sieht. Der erste bezieht sich auf die technischen Eigenschaften des Geräts Ihres Benutzers. Der zweite ist der E-Mail-Client, um genauer zu sein – seine Rendering-Engine.

Technische Eigenschaften des Geräts eines Benutzers

Es gibt mindestens zwei technische Merkmale jedes Geräts, die Sie berücksichtigen sollten:

1. Bildschirmauflösung — die Größe des Bildschirms, angegeben in Pixel. Das iPhone X hat beispielsweise eine Bildschirmauflösung von 1125×2436 Pixeln. Wenn Ihre E-Mail zwei Textspalten mit jeweils 600 Pixeln enthält, wird sie nicht richtig angezeigt.
2. PPI oder Pixel pro Zoll — die Anzahl der Pixel in einem Zoll des Bildschirms. Der PPI des iPhone X beträgt 458. Stellen Sie sich vor: Sie müssen Ihrer E-Mail eine Aktionsschaltfläche hinzufügen. Wenn die Schaltfläche weniger als 44 Punkte beträgt, was für das iPhone X 132 × 132 Pixel bedeutet, wird weniger als ein Drittel eines Quadratzolls der Bildschirmfläche benötigt, und der Benutzer wird kaum in der Lage sein, darauf zu tippen.

Eine weitere Sache, die Sie beachten sollten: Benutzer drehen ihre Mobilgeräte häufig, sodass Ihre E-Mails sowohl im Hoch- als auch im Querformat ordentlich aussehen und volle Funktionalität haben sollten.

Um Probleme im Zusammenhang mit den technischen Eigenschaften des Geräts des Benutzers zu vermeiden, sollten Sie ein responsives E-Mail-Design verwenden.

Zuerst sollten Sie Medienabfragen in den head Ihrer E-Mail einfügen. Beispielsweise bedeutet die @media screen und (max-width: 600px) , dass das E-Mail-Design optimiert wird, wenn die Bildschirmbreite weniger als 600 Pixel beträgt. Wenn die Bildschirmbreite mehr als 600 Pixel beträgt, wird dem Benutzer die Version dieser E-Mail mit fester Breite angezeigt.

Zweitens sollten Sie eine E-Mail in Form einer Tabelle mit darin enthaltenen Zellen erstellen:

 <Tabelle>
<tr>
    <td>...</td>
</tr>
</table>

Dann fügen Sie für jede Zelle einen Stil hinzu, zum Beispiel:

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Auch nach diesen Maßnahmen kann es jedoch zu Problemen bei der Anzeige Ihrer E-Mails kommen. Die Ursache des Problems ist die Rendering-Engine des E-Mail-Clients.

Ein E-Mail-Client

Die zweite Quelle möglicher Anzeigeprobleme ist der E-Mail-Client, mit dem Ihre Empfänger Ihre Kampagnen öffnen. Das Herzstück eines E-Mail-Clients ist eine Rendering-Engine. Es empfängt eine E-Mail als langes Code-Skript, verarbeitet sie und gibt sie aus, wie wir es von E-Mails gewohnt sind: verständlicher, strukturierter und formatierter Text mit Bildern, Links und anderen Medien.

Sehen Sie sich das Beispiel unten an. Es ist ein Stück Code aus einer Werbe-E-Mail – so wie es die Rendering-Engine von Gmail sieht. Wenn diese E-Mail einem potenziellen Kunden so angezeigt wurde, wird er den Code kaum durchschneiden und verstehen, dass es einen Gutscheincode für 40% gibt.

Jeder E-Mail-Client hat seine eigene Rendering-Engine, was bedeutet, dass dieselbe E-Mail, die über verschiedene E-Mail-Clients geöffnet wird, ein völlig anderes Aussehen haben kann.

Hier ist eine Liste der beliebtesten E-Mail-Clients weltweit. Offensichtlich verwenden Ihre Empfänger einen oder sogar mehrere davon, um die von Ihnen gesendeten E-Mails zu öffnen.

Alle diese E-Mail-Clients weisen einige Besonderheiten auf, die Sie bei der HTML-E-Mail-Codierung berücksichtigen sollten.

Apple Mail für iOS unterstützt beispielsweise Folgendes nicht:

• CSS-Eigenschaft mit inline-size ;
• @media (orientation) Medienabfrage;
• Ankerverbindungen;
• HDR-, PPM- und SVG-Bildformate und mehr.

Gmail unterstützt verschiedene CSS-Eigenschaften und Medienabfragen, abgesehen von:

• box-shadow, text-shadow, und einige andere CSS-Eigenschaften;
• @media (prefers-color-scheme) Medienabfrage und mehr.

Häufige Fehler bei der E-Mail-Codierung und wie man sie vermeidet

Der beste allgemeine Rat zur Vermeidung von E-Mail-Codierungsfehlern besteht darin, Ihr Inventar auf Code zu beschränken, der von den meisten E-Mail-Clients unterstützt wird, unabhängig davon, wie alt ihre Versionen sind. In einfachen Worten, um einen Schritt zurückzutreten und zu programmieren, als ob es 1999 wäre. Zum Beispiel wird allgemein empfohlen, Folgendes zu verwenden:

• CSS2 statt CSS3,
• HTML4 statt HTML5,
• Farbe statt Hintergrundbilder,
• table-layout statt <div> ,
• Inline-CSS anstelle von Stilsets oder <style> -Blöcken.

Es wird angenommen, dass dieser Ansatz die meisten Probleme bei der Anzeige von E-Mails verhindert. Aber schauen wir uns einige spezielle Codierungsfehler genauer an, die Ihre E-Mail ruinieren können, und versuchen Sie, Lösungen dafür zu finden.

Keine Klartextversion

Potenzielle Probleme. Einige E-Mail-Clients wie Outlook und Gmail können Ihre E-Mail als Spam definieren, wenn sie keine Nur-Text-Version hat. Darüber hinaus haben E-Mail-Clients manchmal Probleme beim Rendern von HTML-Code. Aus diesem Grund können HTML-E-Mails falsch angezeigt werden, während reine Text-E-Mails immer gleich aussehen.

Verhütung. Fügen Sie Ihrer E-Mail eine Nur-Text-Version hinzu. Glücklicherweise fügen die meisten E-Mail-Dienstleister es automatisch hinzu.

Sie können Klartext-E-Mails in Ihre E-Mail-Marketingstrategie integrieren. Zuallererst sehen solche E-Mails persönlicher aus und können so Ihre Kommunikation mit den Abonnenten verbessern. Darüber hinaus ziehen es manche Leute vor, direkt auf den Punkt der E-Mail zu kommen, und ein farbenfrohes Layout schreckt sie ab.

Verwendung von JavaScript, ActiveX, Flash und mehr

Potenzielle Probleme. Die meisten E-Mail-Clients unterstützen diese Sprachen, Frameworks und Plugins nicht, sodass ein Teil Ihrer E-Mail nicht gerendert wird und Ihre Abonnenten nur ein Leerzeichen sehen. Darüber hinaus kann die E-Mail durch Antivirensoftware gesperrt werden.

Verhütung. Behalten Sie die Sprachen bei, die Sie zum Codieren von E-Mails in HTML und CSS verwenden. Wenn Sie ein Video oder Audio hinzufügen müssen, laden Sie es auf eine Website hoch und geben Sie einen Link dazu an.

Machen Sie sich ein Bild davon, wie NiftyImages neue Produktfunktionen präsentiert: Das Unternehmen hat sich für eine Bildsequenz entschieden, obwohl es sich um ein erklärendes Video handeln könnte.

Zu viele Weiterleitungen

Potenzielle Probleme. Weiterleitungen, obwohl sie für Analysen erforderlich sind, können Ihrer E-Mail mehr schaden als nützen. Sie verlängern beispielsweise die Ladezeit einer Webseite deutlich. Dann besteht die Möglichkeit, dass der Browser eines Benutzers Weiterleitungen blockiert – daher ist die URL nicht zugänglich.

Verhütung. Versuchen Sie Weiterleitungen zu vermeiden. Wenn Sie sie jedoch trotzdem verwenden müssen, prüfen Sie, wie lange das Laden einer Ziel-URL dauert – testen Sie Ihre E-Mail, bevor Sie die gesamte Kampagne starten. Berücksichtigen Sie die Erfahrung Ihrer Abonnenten: ob sie bereit sind, auf das Laden der URL zu warten oder nicht.

Verkürzte Links

Potenzielle Probleme. Bei verkürzten Links besteht die Gefahr, dass Ihre E-Mails im Spam-Ordner landen. Die Sache ist, dass bei verkürzten Links die Ziel-URL unklar ist. In einfachen Worten, es könnte überall hinführen. Das machen sich natürlich Hacker und Spammer zunutze.

Verhütung. Verwenden Sie keine verkürzten Links. Wenn Sie Ihre E-Mails ohne lange URLs ordentlich aussehen lassen <a href="URL">...</a> , verwenden Sie besser das folgende HTML-Tag: <a href="URL">...</a> . Sie können hier jede beliebige URL eingeben, egal wie lang sie ist.

Wenn Sie immer noch nach verkürzten Links suchen, kürzen Sie Ihre eigenen URLs, anstatt Tools von Drittanbietern zu verwenden. Scannen Sie zumindest vorab die Blacklists der Linkverkürzer.

Große E-Mail-Textdateigröße

Potenzielle Probleme. Sowohl E-Mail-Clients als auch E-Mail-Dienstanbieter haben Größenbeschränkungen für den E-Mail-Text, da sie darauf ausgelegt sind, relativ kleine Informationsmengen zu übertragen. Wenn Sie diese Grenzen nicht einhalten, wird Ihre E-Mail möglicherweise abgeschnitten – das Ende wird ausgeblendet.

Schauen Sie sich einen Newsletter eines Musiklabels an. Beim Öffnen über Gmail wird es abgeschnitten.

Um die Vollversion zu sehen, muss der Abonnent auf einen Link tippen.

Eine große Dateigröße des E-Mail-Textkörpers kann ebenfalls Probleme mit der Zustellbarkeit verursachen. Darüber hinaus kann die E-Mail aufgrund der Größe von der Antivirensoftware des Benutzers als Sicherheitsbedrohung angesehen werden.

Verhütung. Informieren Sie sich über die Größenbeschränkungen für den E-Mail-Text Ihres E-Mail-Dienstanbieters und der E-Mail-Clients, die Ihre Abonnenten verwenden. Google beansprucht beispielsweise eine Beschränkung der E-Mail-Textgröße von 200 KB. Es wird jedoch allgemein empfohlen, Ihre E-Mails auf 100 KB zu begrenzen, um die Anforderungen der meisten E-Mail-Clients zu erfüllen. Tatsächlich hat die E-Mail aus dem obigen Beispiel eine Größe von 136 KB.

Zu viele Schriftarten und Farben

Potenzielle Probleme. Aufgrund der Unterschiede zwischen E-Mail-Clients können nicht alle Schriftarten und Farben korrekt angezeigt werden. Darüber hinaus lassen sich nicht alle Schriftarten und Farben gut miteinander kombinieren – Sie riskieren also, ein schwaches E-Mail-Design zu erstellen.

Sie sollten auch bedenken, dass die Geräte Ihrer Abonnenten unterschiedliche Bildschirmeinstellungen haben – wie zum Beispiel die Helligkeit. Und während Sie versuchen, Ihre E-Mails lebendiger zu gestalten, können Benutzer unter diesem Farbenrausch leiden.

Dies ist ein fragwürdiges Beispiel für E-Mail-Design: Jeder Block hat seine eigenen Farben; Dies lenkt den Benutzer von den wichtigsten Informationen ab.

Prävention . Wählen Sie E-Mail-freundliche Schriftarten wie Arial, Comic Sans MS, Courier New, Times New Roman oder Verdana: Sie werden von den meisten gängigen E-Mail-Clients unterstützt. Die Schriftgröße Ihres Textes sollte nicht weniger als 12-13 px betragen; Andernfalls muss ein Benutzer Ihre E-Mail vergrößern oder seine Augen anstrengen.

Was die Farben angeht, sollten Sie nicht mehr als zwei verwenden: eine für den allgemeinen Textblock und eine andere zum Hervorheben wichtiger Dinge sowie für Links und Schaltflächen. Stellen Sie sicher, dass die von Ihnen ausgewählten Farben zum Hintergrund passen und gut aussehen, wenn ein Benutzer in einen dunklen Modus wechselt.

Kopieren des HTML-Codes einer E-Mail-Vorlage aus einem Texteditor oder einer Website

Potenzielle Probleme. Wenn Sie Microsoft Word oder etwas Ähnliches verwenden, um Text für Ihre E-Mail zu erstellen und ihn dann einfach zu kopieren, riskieren Sie unnötige Formatierungen, die Ihr E-Mail-Layout beeinträchtigen können. Und wenn Sie Bilder oder Textteile von einer Website kopieren, werden Ihrer E-Mail möglicherweise JavaScript- oder Flash-Elemente hinzugefügt.

Verhütung. Verwenden Sie zum Codieren einer E-Mail Texteditoren, die keine eigene Formatierung hinzufügen, z. B. Notepad für Windows oder TextEdit für Mac. Es gibt auch einige Online-Tools, die Ihre Formatierung bereinigen können, wie z. B. TextCleanr. Sie können auch ein HTML-Cleaner-Tool verwenden, mit dem Sie eine E-Mail in einem benutzerfreundlichen Editor erstellen und gleichzeitig den Code überprüfen können.

Verwendung von dreistelligen HEX-Farbcodes

Potenzielle Probleme. Obwohl drei- und sechsstellige Farbformate gleichwertig sein sollten, geben E-Mail-Clients manchmal ein dreistelliges Format etwas anders wieder. Bei Gmail riskieren Sie beispielsweise, statt des geplanten Schwarz lila zu werden: Aus color: #000 wird color: #500050 .

Prävention . Als Faustregel gilt, dass Sie sich an das sechsstellige Farbformat halten und dieses in der gesamten E-Mail verwenden.

Anhänge

Potenzielle Probleme. Normalerweise hängen Spammer und Hacker einige Dateien an ihre E-Mails an. Wenn Sie einen Anhang hinzufügen, kann dies als Sicherheitsbedrohung angesehen werden.

Verhütung. Geben Sie einen Link zu einer Seite zum Laden von Dateien an, anstatt die Datei direkt zur E-Mail hinzuzufügen.

Hier ist ein Beispiel dafür, wie Sie Benutzern Zugriff auf die versprochene Datei gewähren können. Achten Sie auf die Benennung des Links: Es sollte ein anklickbarer, verständlicher Text sein, damit der Benutzer weiß, was passiert, wenn er auf den Link tippt.

Fehlender Alternativtext

Mögliche Probleme . Einige Benutzer deaktivieren das Herunterladen von Bildern in ihrem Browser. Wenn sie eine E-Mail erhalten, die Bilder ohne Alternativtext enthält, sehen sie nur Leerzeichen anstelle von Bildern und verstehen den Sinn der E-Mail nicht.

Es funktioniert genauso, wenn die Internetverbindung von jemandem zu schwach ist, um die Bilder schnell genug herunterzuladen. Alt-Text hilft in gewisser Weise, dieses Problem zu lösen: Wenn das Herunterladen der Bilder fehlschlägt, kann ein Benutzer stattdessen einen Text sehen.

Verhütung. Fügen Sie allen von Ihnen verwendeten Bildern ein alt Attribut hinzu. Stellen Sie sicher, dass Sie es richtig machen – indem Sie es zu einem img Tag hinzufügen: <img alt="text"> . Beschränken Sie den Alternativtext auf 125 Zeichen, einschließlich Leerzeichen. Normalerweise reicht es aus, nur ein paar Worte hinzuzufügen, die das Bild genau beschreiben. Wenn Sie noch etwas Platz haben, können Sie dieser Beschreibung etwas Kontext hinzufügen.

Sehen Sie sich einen Auszug aus einer E-Mail von Sephora an.

Wenn Sie sich den Code dieser E-Mail ansehen, finden Sie einen CTA als Alternativtext für das Bild. Auch wenn Benutzer das Bild nicht sehen, werden sie dennoch verstehen, was die Marke anbietet.

Nur-Bild-Layout

Potenzielle Probleme. Wenn Ihre E-Mail nur aus Bildern besteht und keinen Text enthält, können Probleme mit der Zustellbarkeit, Anzeige usw. auftreten. Wenn ein Benutzer beispielsweise das Herunterladen von Bildern blockiert, wird ihm buchstäblich nichts in Ihrer E-Mail angezeigt. Zweitens vergrößern viele Bilder den E-Mail-Text und E-Mail-Clients werden ihn wahrscheinlich beschneiden. Drittens kann ein Benutzer Ihre E-Mail nicht über die Wortsuche in einem Ordner finden.

Verhütung. Kombinieren Sie beim Erstellen einer E-Mail Text und Bilder. Vergessen Sie nicht, eine Nur-Text-Version der E-Mail und Alternativtext für Bilder hinzuzufügen. Berücksichtigen Sie die anderen Ratschläge, die wir oben gegeben haben.

Sehen Sie sich diese E-Mail von Ecwid an. Es verfügt über ein ansprechendes Design, das das Tabellenlayout und Medienabfragen umfasst, z. B. max-width: 570px . Die E-Mail kombiniert verschiedene Arten von Inhalten: ein farbenfrohes, fesselndes Bild und Text. Es wird das sechsstellige Farbformat verwendet, zum Beispiel color:#979797 oder color:#4A4A4A . Die E-Mail enthält nicht viele Bilder, daher ist die Körpergröße nicht zu groß. Außerdem finden Sie in der E-Mail weder verkürzte Links noch Weiterleitungen. Insgesamt erfüllt diese E-Mail die meisten der oben genannten Empfehlungen.

Wir haben uns also die häufigsten Fehler bei der HTML-E-Mail-Codierung angesehen. Wenden Sie unseren Rat an und vergessen Sie nicht, Ihre E-Mails vor dem Senden zu testen: Verwenden Sie mindestens drei beliebte E-Mail-Clients, um Ihre E-Mails zu öffnen; Überprüfen Sie dies wenn möglich auch über verschiedene Geräte. Emulatoren werden auch nützlich sein.

Eine weitere Möglichkeit, Fehler bei der E-Mail-Codierung zu vermeiden

Es gibt eine Wahrheit: Sie werden keine Fehler bei der HTML-Codierung machen, wenn Sie nicht codieren. Glücklicherweise erwartet Sie mit SendPulse das E-Mail-Design ohne Code.

Mit unserem intuitiven Drag-and-Drop-Editor haben wir Sie bereits davor bewahrt, Fehler bei der E-Mail-Codierung zu machen. Fügen Sie einfach Bilder, Text oder Videos zu Ihrer E-Mail hinzu, stellen Sie die Schriftarten und Farben so ein, dass sie Ihrem Markenstil entsprechen, und fügen Sie Links zu Ihren Social-Media-Seiten hinzu.

Um das Ganze noch einfacher zu machen, können Sie aus unseren kostenlosen E-Mail-Vorlagen wählen. Alle mit SendPulse erstellten E-Mails sind reaktionsschnell, sodass sie gut aussehen, egal auf welchem ​​Gerät ein Benutzer sie öffnet.

Checkliste zur Vermeidung häufiger Fehler bei der HTML-E-Mail-Codierung

Nachfolgend finden Sie die wichtigsten Regeln, wie Sie häufige Fehler bei der HTML-E-Mail-Codierung vermeiden können. Wenn Sie diese Regeln befolgen, können Sie Probleme mit der Zustellbarkeit und Anzeige Ihrer E-Mails vermeiden.

• Fügen Sie Ihren E-Mails eine Nur-Text-Version hinzu.
• Verwenden Sie kein JavaScript, ActiveX, Flash oder ähnliches. Wenn Sie ein Video oder Audio hinzufügen müssen, laden Sie es auf eine Website hoch und geben Sie einen Link dazu an.
• Versuchen Sie Weiterleitungen zu vermeiden, um die Ladezeit einer Webseite nicht zu verlängern.
• Verwenden Sie keine verkürzten Links – wandeln Sie einen Text oder ein Bild mit HTML in einen Link um.
• Versuchen Sie, die Größe Ihres E-Mail-Textes auf 100 KB zu begrenzen – oder überprüfen Sie zumindest die Grenzen Ihres Sendeanbieters und der E-Mail-Clients, die Ihre Abonnenten am häufigsten verwenden.
• Wählen Sie E-Mail-freundliche Schriftarten wie Arial, Comic Sans MS, Courier New, Times New Roman oder Verdana.
• Versuchen Sie, nicht mehr als zwei Farben in einer E-Mail zu kombinieren – andernfalls sieht es ablenkend aus.
• Kopieren Sie keinen Text und keine Bilder für Ihre E-Mail aus Texteditoren wie MS Word oder Websites: Es besteht die Gefahr, dass Sie unnötige Formatierungen erhalten.
• Verwenden Sie ein sechsstelliges Farbformat.
• Hängen Sie keine Dateien an – geben Sie stattdessen einen Link zu einer Seite zum Laden von Dateien an.
• Vergessen Sie nicht, Bildern Alt-Text hinzuzufügen.
• Erstellen Sie E-Mails nicht nur mit Bildern – fügen Sie immer etwas Text hinzu.
• Vergessen Sie nicht, eine E-Mail zu testen, bevor Sie eine Kampagne starten. Verwenden Sie mindestens drei E-Mail-Clients und verschiedene Geräte.

Und um nicht an all das denken zu müssen – nutzen Sie SendPulse kostenlos!