Rendern von E-Mails über E-Mail-Clients: Herausforderungen und Problemumgehungen

Veröffentlicht: 2019-01-15

In diesem Artikel

Als Marke, die E-Mail-Marketing einsetzt, müssen Sie sicherstellen, dass Ihre E-Mails für Abonnenten genau so angezeigt werden, wie Sie es sich vorgestellt haben .

Die meisten im Posteingang empfangenen E-Mails zeigen Folgendes:

  1. Der E-Mail-Client zeigt „Klicken Sie hier, um Bilder herunterzuladen“ oder „Bilder anzeigen: für diese Nachricht/immer für diesen Absender“ an.
  2. Die E-Mail mit dem Link "E-Mail im Browser anzeigen" oder "Klicken Sie hier, um die E-Mail online anzuzeigen".

Ersteres ist darauf zurückzuführen, dass E-Mail-Clients Bilder von unbekannten Absendern aus Sicherheitsgründen deaktivieren . Letzteres ist ein Schritt von E-Mail-Entwicklern, um sicherzustellen, dass die von Ihnen gesendeten E-Mails fehlerfrei angezeigt und die Nachricht übermittelt wird, unabhängig von den unterschiedlichen E-Mail-Clients oder Geräten, die die Abonnenten verwenden .

Aber es liegt eine Herausforderung.

E-Mail-Clients spielen nach ihren eigenen Regeln und rendern E-Mails anders!

Der Marktanteil von Litmus Email Client zeigt, dass Apple Mail ( 44% inklusive iOS Mail für iPhone und iPad), gefolgt von Gmail ( 29% inklusive Desktop und Mobile), Outlook ( 12% inklusive Outlook und Outlook.com) und Yahoo ! Mail ( 6% einschließlich Desktop und Mobile) sind die am häufigsten verwendeten E-Mail-Clients (Stand Oktober 2018.) Alle diese E-Mail-Clients stehen vor einigen Herausforderungen, wenn es darum geht, die E-Mail genau so anzuzeigen, wie sie ursprünglich entworfen wurde.

Quelle: Lackmus

Lassen Sie uns tiefer in die verschiedenen Herausforderungen eintauchen, denen Sie beim Rendern von E-Mails auf verschiedenen E-Mail-Clients und deren Problemumgehungen begegnen können.

E-Mail-Clients: Herausforderungen und Problemumgehungen

Apple iPhone

Apple iPhone unterstützt interaktive E-Mail-Elemente wie Cinemagraph, GIF, Videos, Countdowns, Slider, Retina-Bilder usw. und bietet somit eine einwandfreie Benutzererfahrung . Es ist daher der beliebteste E-Mail-Client.

Rendering-Probleme in aktualisierten Modellen: Wenn iPhone-Modelle mit größeren Bildschirmen aktualisiert werden, führt dies zu E-Mail-Rendering-Problemen. Um dies zu umgehen und sicherzustellen, dass die E-Mail auf allen iPhone-Geräten gerendert wird, aktualisieren Sie alle Ihre Medienabfragen mit einem 320px-Breakpoint auf 414px für iPhone 8 plus. Abgesehen davon, dass Sie eine feste Gerätebreite beibehalten, können Sie die Breite sogar fließend halten.

Keine Unterstützung für ~-Selektor bei Verwendung mit :hover oder :checkedselectors: iOS9 bietet keine Unterstützung für den allgemeinen gleichgeordneten Selektor ~, wenn er mit den Pseudoklassen-Selektoren :checked und :hover kombiniert wird. Um ähnliche Ergebnisse zu erhalten, kann man den nebenstehenden Geschwisterselektor + anstelle von ~ verwenden.

Text wird in der Größe angepasst : Kleiner Text wird automatisch in der Größe angepasst. Behalten Sie die Mindestschriftgröße bei 22 Pixel für Kopfzeilen und 14 Pixel für Textkörper bei.

Responsive E-Mails werden in iOS10 und iOS11 automatisch skaliert: Das Autoscaling inresponsive E-Mails führt dazu, dass E-Mails außermittig oder herausgezoomt werden. Um dies zu lösen, fügen Sie „padding:0;“ hinzu. zum <body>-Tag und zum Deaktivieren der automatischen Skalierung verwenden Sie <metaname=”x-apple-disable-message-reformatting”>.

Lackmus-Foren

Google Mail

Gmail unterstützt GIFs und andere visuelle Elemente, die zur ästhetischen Attraktivität der E-Mails beitragen. Gmail ist in Bezug auf die Benutzerfreundlichkeit einer der bequemsten E-Mail-Clients sowohl für Desktops als auch für Mobilgeräte .

Google Mail für Desktop

Nachrichten-Clipping: Gmail schneidet Nachrichten mit einer Größe von mehr als 102 KB ab und versteckt den Inhalt hinter einem Link "Gesamte Nachricht anzeigen". Um dies zu vermeiden, halten Sie die Nachrichtengröße unter 102 KB und vermeiden Sie die Verwendung unnötiger Stilattribute und Tags.

Attributselektor nicht unterstützt: Der Attributselektor zum Auswählen von Elementen wird nicht unterstützt. Verwenden Sie stattdessen den .class-Selektor.

Entfernt CSS im <style>-Block: Wenn der <style>-Block 8142 Zeichen überschreitet oder verschachtelte @-Deklarationen enthält, entfernt Gmail ihn. Um dies zu beheben, verwenden Sie eingebettete Stile, die kurz und fehlerfrei sind.

Hintergrundbilder werden für Nicht-Gmail-IDs nicht unterstützt: Wenn in Gmail eine Nicht-Gmail-ID konfiguriert ist, werden Hintergrundbilder nicht unterstützt. Stellen Sie sicher, dass Sie in solchen Fällen einen geeigneten Fallback für den Hintergrund verwenden.

Schriftgröße um 50 % erhöht: Die Schriftgrößen für Gmail werden um fast 50 % erhöht. Verwenden Sie als Workaround mobilspezifischen Inhalt mit größeren Bildern und übersichtlichen Menüs und bleiben Sie bei einem einspaltigen Layout, bei dem kein Zoomen oder Zusammenziehen erforderlich ist.

Rand, Padding, Float und Absatz werden nicht unterstützt: Gmail rendert keine Absätze und Floats. Verwenden Sie zum Rendern von Rand und Auffüllung das tabellenbasierte Layout mit <td>.

Google Mail für Handys

<style> und <link> werden in Head nicht unterstützt: Manchmal unterstützt der Head die Tags <style> oder <link> nicht. Um dies zu beheben, überschreiben Sie die Standardlinkfarbe, indem Sie jedem <a>-Tag im Code einen Farbstil hinzufügen.

Bilder in Scheiben geschnitten durch weiße Linie: Es erscheint eine weiße Linie zwischen zwei oder mehr geteilten Bildern. Verwenden Sie „display:block“ im Image-Tag, um die weiße Linie zu entfernen.

Datumsangaben und Zahlen werden auf dem iPhone blau: Gmail für iPhone färbt Zahlen und Datumsangaben automatisch blau. Verwenden Sie Nicht-Joiner mit einer Breite von Null, „text-decoration:“ und spannen Sie mit „text-decoration: none“-Umrandung. Um die blaue Linie zu vermeiden, definieren Sie wichtig, um den Inline-Stil zu überschreiben.

Flüssige E- Mails sehen abstoßend aus: In der Gmail-App sehen flüssige E-Mails unscheinbar aus. Um dies zu lösen, erzeugen Sie eine Illusion von schwebenden Elementen, indem Sie „display:inline-block“ zusammen mit „text-align: center“ verwenden.

Ausblick

Outlook und Outlook.com sind weit verbreitete E-Mail-Clients im Unternehmensumfeld . Diese E-Mail-Clients sind mit mehreren Rendering-Problemen konfrontiert, die es für die E-Mail-Entwickler zu einer schwierigen Aufgabe machen.

Keine Unterstützung für max-width und min-width: Outlook unterstützt in CSS keine max-width und min-width. Um dies zu umgehen, verwenden Sie flüssige Layouts mit fester Breite innerhalb einer Medienabfrage.

CSS wird im Head-Bereich nicht unterstützt: CSS, das im Head-Bereich des HTML verwendet wird, wird automatisch entfernt. Inline-CSS, um dieses Problem zu lösen.

Entfernt Absatz- und Randabstände: Outlook entfernt Absatz- und Randabstände aus dem Code. Verwenden Sie tabellenbasiertes Layout und td/tr, um zusätzlichen Platz hinzuzufügen.

GIF nicht unterstützt: Outlook rendert nur den ersten Frame von GIF in E-Mails. Stellen Sie sicher, dass der erste Frame die Nachricht übermittelt, oder legen Sie einen geeigneten Fallback fest, indem Sie ein statisches Bild verwenden.

RGB-Rahmen, die in Outlook.com nicht unterstützt werden: Verwenden Sie für die Hintergrundfarbe HEX-Code anstelle von RGB-Rahmen.

Unnötiger Leerraum hinzugefügt: Outlook.com fügt unnötigen Leerraum nach den Bildern hinzu. Um die Auffüllung zu entfernen, setzen Sie die display-Eigenschaft auf „img{display:block;}“.

Yahoo! E-Mail

min-device-width und max-device-width werden in Mediaqueries nicht unterstützt: Verwenden Sie sowohl für Webmail als auch für Android-App das width-Attribut und/oder in style anstelle von min oder max-device-width. Dadurch wird das Layout gesteuert.

Float-Tags funktionieren nicht: Float-Tags funktionieren nicht für Yahoo!Mail. Um dies zu beheben, geben Sie dem betreffenden Bild align=”top” an.

Grund für solche Diskrepanzen zwischen verschiedenen E-Mail-Clients

Die Rendering-Engine ist der Hauptgrund dafür, dass verschiedene E-Mail-Clients dieselbe E-Mail unterschiedlich darstellen. Die Rendering-Engine ist das Gehirn jedes E-Mail-Clients. Wenn ein E-Mail-Client eine E-Mail erhält, ist dies eine lange Wand aus HTML-Code, die von CSS-Animationen umgeben ist. Eine Rendering-Engine erstellt eine Struktur basierend auf dem im HTML angegebenen Code und fügt dem CSS ein bestimmtes Styling entsprechend hinzu. Jeder unnötige Code wird entfernt und in der Nachbearbeitungsphase nicht gerendert.

Einige E-Mail-Clients wie Apple Mail, Microsoft Outlook (bis 2003) haben die proprietäre Renderingengine, die sie in ihrem Browser verwenden, übernommen. Webmail verwendet eine Mischung aus einer eigenen Rendering- Engine gemischt mit dem Browser, in dem es geöffnet wird. Aus diesem Grund muss der gleiche Code in unterschiedlichen Syntaxen geschrieben werden, um nicht entfernt zu werden.

Die folgenden sind beliebte E-Mail-Clients und die von jedem verwendete Rendering-Engine:

Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Trident)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (solo per IMAP / POP3)
Outlook 2007 e versioni sukzessive → Microsoft Word
Outlook per MAC → Motore Safari Webkit
Mozilla Thunderbird → Motor Mozilla Gecko
Google Mail und Yahoo! Mail → Motore di Rendering proprietario combinato con il motore di Rendering des Browsers

Häufige Fehler, die beim Senden an mehrere E-Mail-Clients zu vermeiden sind

  1. Hintergrundbild hinter wichtigem CTA vermeiden : Hintergrundbild wird in den meisten E-Mail-Clients nicht unterstützt. Nicht unterstützte E-Mail-Clients ersetzen das Bild durch eine Hintergrundfarbe. Dies ist besonders problematisch, wenn die Hintergrundfarbe mit der Schriftfarbe des Textes im Vordergrund übereinstimmt.
  2. Jedes Mal Inline-CSS : Einige E-Mail-Clients entfernen alle zwischen dem <style>-Tag angegebenen Stylesheets, während fast alle Inline-CSS-Styling unterstützen. Gehen Sie also immer auf Nummer sicher, indem Sie Ihren CSS-Code inline einbinden.
  3. Outlook unterstützt Bildabmessungen in Prozent und Restunterstützung in Pixel: Glücklicherweise kann Outlook-spezifischer Code zwischen einem Outlook-Bedingungscode eingefügt werden, dh <!–[ifgte mso 9]> ….. Code hier…… </endif> der von anderen E-Mail-Clients ignoriert wird .
  4. E-Mail mit <table> anstelle von <div> codieren : Während die Website-Codierung zur Strukturierung mit <div> fortgeschritten ist, haben bestimmte E-Mail-Clients wie Outlook2007 immer noch Probleme beim Rendern von <div> und daher bleiben E-Mail-Entwickler bei der ausfallsicheren Codierungsmethode < Tabelle > Layout. Auch wenn es unbequem ist, codieren Sie E-Mails weiter, als wäre es 1999…

Einpacken

Kurz gesagt, Ihre E-Mails sehen nicht in jedem E-Mail-Client gleich aus. Berücksichtigen Sie diese Herausforderungen und Problemumgehungen beim Erstellen Ihrer nächsten E-Mail-Kampagne , um sicherzustellen, dass Sie Ihre E-Mails optimal nutzen .