Wie konfiguriere ich HTML-Newsletter, die mit allen E-Mail-Clients kompatibel sind? Die Anleitung zu OpenDEM (und mehr)

Ein gut strukturiertes HTML-Layout ist immer eine hervorragende Visitenkarte für einen Newsletter: Eine professionell wirkende Nachricht – auch wenn der Download von Bildern durch Remote Content Blocking behindert wird – vermittelt sofort Vertrauenswürdigkeit und regt Ihre Empfänger zum Weiterlesen an.

Im Gegenteil, reine Text-E-Mails werden leider mit Spam oder gar Betrugsversuchen (in erster Linie Phishing) in Verbindung gebracht, was sie von vornherein weniger effektiv macht.

Inhaltsindex-Newsletter und HTML-Vorlage: Warum wird der Newsletter in Outlook, Gmail oder anderen Clients nicht richtig angezeigt?
Newsletter-Kompatibilität mit verschiedenen Clients
verbessern : Tools Newsletter-Kompatibilität mit verschiedenen Clients verbessern: praktische Tipps
Wie validiert man den HTML-Code eines Newsletters?
Newsletter und HTML-Vorlage: Warum wird der Newsletter in Outlook, Gmail oder anderen Clients nicht richtig angezeigt?
Dieses Problem teilen alle, die mit dem Versand von Newslettern zu tun haben: Beim Testen des Versands derselben Nachricht auf der Grundlage einer HTML-Vorlage variiert das Endergebnis je nach E-Mail-Client, Browser oder Anwendung zum Lesen.

Leider bedeutet das Fehlen eines strengen Standards, der von allen Clients und Tools für die E-Mail-Konsultation geteilt wird, dass nicht alle HTML-Tags richtig oder gleich interpretiert werden. Daher ist es nicht ungewöhnlich, dass ein fehlerfreier Outlook-Newsletter bei der Anzeige in Gmail schlecht aussieht.

Verbesserung der Kompatibilität von Newslettern mit verschiedenen Clients: Tools
Die schnellste Lösung, um einen für alle E-Mail-Clients optimierten Newsletter im HTML-Format zu erhalten, ist der Rückgriff auf spezielle Tools wie:

Email on Acid ( emailonacid.com ) – Ein Online-Tool, mit dem Sie die Leistung einer E-Mail auf allen wichtigen Clients, Software und Geräten testen, diese kombinieren, um Probleme zu erkennen und gezielt einzugreifen.
OpenDEM ( opendem.it ) – Eine Online-Plattform für den Versand von Newslettern, die ein Ad-hoc-Tool in den Editor integriert, um Nachrichten zu erstellen, die inkompatible HTML-Tags verletzen und deren Entfernung vorschlägt.
Bitte beachten Sie: Es ist sinnlos, Newsletter anzustreben, die mit 100% der Clients kompatibel sind, insbesondere bei älteren und weniger verbreiteten (zB Outlook 2003), trotz Email on Acid und ähnlichen Tools, der Vollständigkeit halber auch diese Alternativen mit einbeziehen.

Kompatibilität von Newslettern mit unterschiedlichen Clients verbessern: Praxistipps
Welche Vorkehrungen sind bei der Erstellung einer HTML-Newsletter-Vorlage zu treffen?

Hier sind einige nützliche Tipps:

Verwenden Sie lieber Inline-CSS als Stylesheets, die mit dem <style>-Tag oben im Code eingefügt werden. Viele Kunden, einschließlich Hotmail, ignorieren diese grafischen Hinweise, und das Endergebnis sind Nachrichten, die ganz anders angezeigt werden, als sie sollten.
Verwenden Sie nur weiße Hintergründe. In vielen Fällen werden Hintergrundfarbangaben von Kunden ignoriert, die den standardmäßigen weißen Hintergrund bevorzugen.
Wählen Sie eine dunkle Schriftfarbe (dunkelgrau / schwarz), um die Sichtbarkeit des Textes zu maximieren (weißer Text auf schwarzem Hintergrund ist eine sehr riskante Wahl, da das Endergebnis eine scheinbar leere Nachricht sein kann).
Verwenden Sie hexadezimale Codes für die Farbangabe (also statt color = ”white”, bevorzuge color = ”# ffffff”).
Stellen Sie die Layoutbreite zwischen 550 und 600 px ein, um insbesondere bei mobilen Endgeräten immer eine vollständige Ansicht des Newsletters zu gewährleisten.
Begrenzen Sie das Gesamtgewicht des Newsletters und vermeiden Sie mehr als 50/100 KB.
Verwenden Sie nur Standard-XHTML-Markup-Tags wie <p>, <strong>, <em>, <img> usw.
Verwenden Sie die Attribute „title“ und „alt“ für Bilder und „title“ für Links, um beschreibende Phrasen hinzuzufügen, die bei Problemen mit der Newsletter-Anzeige angezeigt werden, wenn Sie mit der Maus über die entsprechenden Elemente fahren.
Fügen Sie die Linkattribute immer nach „href“ ein (zum Beispiel <a href=“www.sitodiesempi.it“ title=”Besuchen Sie die Site zum Beispiel”>).
Fügen Sie allen Links das Attribut target = ”_blank” hinzu, um sicherzustellen, dass die Zielseite immer in einem neuen Fenster geöffnet wird.
Verwenden Sie zum Erstellen von Tabellen lieber das <table>-Tag.
Legen Sie die Farbe der Links fest, indem Sie <style = ”color: # 000001 ″> hinzufügen, um zu verhindern, dass das Standardblau auf einigen Clients durch Violett ersetzt wird.
Denken Sie daran, dass viele Tags von einigen Kunden möglicherweise nicht berücksichtigt werden (z. B. <body>, <meta>, <head>, <base>, <link>, <script>, <applet>, <frameset>, <frame> , <iframe>, um die wichtigsten zu nennen).
Vermeiden Sie die Verwendung von Skripten jeglicher Art (JavaScript, Flash, Video, ActiveX, Embedding usw.), die von den meisten Kunden im Allgemeinen ignoriert werden.
Hinweis: Sauberer und validierter HTML-Code erhöht nicht nur die Chancen, dass Ihr Newsletter genau so aussieht, wie Sie es sich wünschen, sondern auch

Wie validiere ich den HTML-Code eines Newsletters?
Online gibt es mehrere Tools, mit denen Sie den HTML-Code validieren oder analysieren können, um Fehler und zu behebende Probleme aufzuzeigen.

Auch Kampagnenmanagement-Plattformen auf Basis umfangreicherer Newsletter integrieren solche Tools in ihre Editoren, um die Layoutarbeit schneller und einfacher zu gestalten.

Beim oben genannten OpenDEM validiert der Newsletter-Editor den HTML-Code in Echtzeit und meldet Fehler und eventuelle Korrekturen direkt.

Um die Funktion zu aktivieren, wählen Sie die Punkte „Newsletter“ und dann „Neuen Newsletter erstellen“. Vom Editor aus reicht es daher, mit einem Klick auf „Quelle“ in die Codeansicht zu wechseln. Bei der Arbeit am Code ist immer die Funktion „HTML-Validator“ aktiv: OpenDEM hebt vorhandene Fehler hervor und korrigiert sie mit einem einfachen Klick, indem es die am besten geeigneten Lösungen wählt, um die Kompatibilität des Newsletters zu maximieren.

Leave a Comment

Your email address will not be published.