Warte ab. Was ist gerade mit meiner E-Mail passiert? Webinar-Aufzeichnung

Veröffentlicht: 2016-02-11

Fast jeder Designer und Entwickler muss irgendwann in seiner Karriere E-Mails erstellen – ob er will oder nicht. Aber die schiere Anzahl von E-Mail-Clients – jeder mit seinen eigenen Rendering-Problemen – lässt viele den Kopf schütteln, verwirrt über den Ansturm von E-Mail-Designproblemen.

Nachdem wir viele solcher Szenarien durchlebt haben, haben wir uns mit Alex Mohr von Sendwithus zusammengetan, um die häufigsten Probleme von E-Mail-Neulingen zu beleuchten und, was noch wichtiger ist, einige Lösungen für diese Probleme zu finden.

Wenn Sie keine Gelegenheit hatten, am Webinar teilzunehmen: „Warte. Was ist gerade mit meiner E-Mail passiert?“, keine Sorge. Sie können die Folien herunterladen und sich die Aufzeichnung unten ansehen.

Zeigt Folien und Aufnahmen an →

So sehr wir es auch versuchen, wir konnten nicht alle Fragen beantworten, die während des Webinars gestellt wurden. Und es waren einige tolle dabei. Daher nutze ich diese Gelegenheit, um einige der am häufigsten gestellten Fragen zu beantworten, die von denjenigen gestellt werden, die sich nur mit E-Mail-Marketing und -Design beschäftigen.

Warum sind Google und Microsoft beim Rendern von E-Mails so schlecht?

Alle E-Mail-Clients haben Probleme beim Rendern von HTML und CSS – den beiden Sprachen, die zum Codieren von E-Mail-Kampagnen verwendet werden. Dies liegt daran, dass sie alle unterschiedliche Rendering-Engines verwenden. Rendering-Engines sind die zugrunde liegenden Teile der E-Mail-Anwendung, die bestimmen, welcher Code auf dem Bildschirm gerendert wird und wie er tatsächlich gerendert wird.

Rendering-Engine

Im Fall von Googles Gmail wird ein Präprozessor verwendet, um aus Sicherheitsgründen bestimmte Teile des Codes aus einer E-Mail zu entfernen. Während fast jeder andere Webmail-Client es inzwischen herausgefunden hat, entfernt Gmail im Wesentlichen eingebettete CSS-Stile im <head> einer E-Mail. Und da viele Designer diese Stile verwenden, um das Aussehen ihrer Kampagne zu bestimmen, leiden diese E-Mails in Gmail.

Dies kann besonders bei den mobilen Clients von Gmail auffallen, da Medienabfragen – die CSS-Trigger, die im traditionellen responsiven Design verwendet werden – in diesem Abschnitt leben. Aus diesem Grund wurden Techniken wie hybride (oder schwammige) Codierung als direkte Lösung für die schlechten Rendering-Funktionen von Gmail entwickelt.

Bei den Outlook-Clients von Microsoft liegt das Problem darin, dass Outlook tatsächlich Microsoft Word als Rendering-Engine verwendet. Das ist richtig, ein Rich-Text-Editor, der von Studenten und Geschäftsleuten gleichermaßen verwendet wird, wird verwendet, um HTML- und CSS-Code zu rendern (oder versucht es zumindest). Während ältere Versionen von Outlook die installierte Version von Microsofts Webbrowser Internet Explorer zum Rendern von E-Mail-Code verwendeten, wurde Word ab Outlook 2007 verwendet, um die Rich-Text-Bearbeitung für Outlook-Benutzer zu vereinfachen.

Leider bietet Word für E-Mail-Designer nur eine sehr begrenzte Unterstützung für HTML und CSS, die häufig im Web und in E-Mail-Kampagnen verwendet werden. Diese eingeschränkte Unterstützung für Webstandards führt zu E-Mail-Kampagnen, die in Outlook fehlerhaft aussehen. Das Verständnis dieses Supports ist der erste Schritt, um E-Mails in Outlook oder einem anderen E-Mail-Client gut aussehen zu lassen.

Hier sind einige Ressourcen, die Ihnen den Einstieg in ein besseres Verständnis der E-Mail-Client-Unterstützung für HTML und CSS erleichtern:

  • Der ultimative CSS-Leitfaden von Campaign Monitor
  • Gmail und CSS verstehen: Teil 1 und Teil 2
  • Eine Anleitung zum Rendern von Unterschieden in Microsoft Outlook-Clients
  • Wie Geräte, Betriebssysteme, Apps und Engines das Rendering beeinflussen
  • Probleme beim Desktop-Rendering? Konzentrieren Sie sich beim ersten Testen auf eine Handvoll Rendering-Engines
  • Webmail-Rendering erklärt: Warum Präprozessoren der Feind sind

Wie gehen Sie damit um, dass Outlook bei der Verwendung von Webfonts nicht die richtigen Schriftarten anzeigt?

Webfonts, Fonts, die über das Web bereitgestellt werden, anstatt auf dem Gerät eines Benutzers installiert zu werden, werden immer beliebter. Da sie es Unternehmen ermöglichen, mit ihrer Typografie auf der Marke zu bleiben und Live-Text zu fördern, sind sie ein ideales Werkzeug für E-Mail-Marketer. Leider werden sie nicht von allen E-Mail-Clients unterstützt. Und im Fall von Outlook führt die fehlende Unterstützung zu Situationen, in denen Times New Roman anstelle von in Ihrem HTML deklarierten Fallback-Schriftarten angezeigt wird.

Wir haben dieses Problem bereits mit einer Lösung angegangen, die eine HTML-Klasse für den betroffenen Text und einige Outlook-spezifische CSS erfordert. Obwohl diese Lösung immer noch gut funktioniert, hat sich eine sauberere und wartungsfreundlichere Lösung durchgesetzt. Diese Lösung wurde ursprünglich von den Leuten von Action Rocket vorgeschlagen und erfordert die Verwendung von @font-face-Regeln, um Schriftarten bereitzustellen und sie in eine Medienabfrage im Kopf Ihrer E-Mail einzuschließen.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

Diese Lösung ist ein ausgezeichneter Ansatz, da keine HTML-Klassenattribute erforderlich sind, die Ihren Code verschmutzen, während gleichzeitig sichergestellt wird, dass Outlook auf Ihren deklarierten Schriftartenstapel zurückgreift. Lesen Sie den Originalartikel von Action Rocket, um mehr über die Technik zu erfahren.

Wie verhindern Sie, dass blaue Links auf Mobilgeräten auftreten?

Mobile Geräte sind nützliche Werkzeuge. Um sie noch nützlicher zu machen, haben Unternehmen wie Apple ihrem E-Mail-Client eine Funktion hinzugefügt, mit der Benutzer schnell Informationen zu ihren Kontakten, Kalendern oder Karten-Apps hinzufügen können. Die Chancen stehen gut, dass Sie so etwas in einer E-Mail gesehen haben:

ios_links

Bestimmte textähnliche Adressen, Datumsangaben, Uhrzeiten und Telefonnummern werden als blaue, unterstrichene Links hervorgehoben, um anzuzeigen, dass mit ihnen interagiert werden kann. Leider verursachen diese blauen Links manchmal Probleme sowohl aus der Design- als auch aus der Zugänglichkeits-Perspektive. Wenn heller Text auf dunklem Hintergrund blau wird, sind diese Links jetzt schwer (wenn nicht unmöglich) zu lesen, geschweige denn mit ihnen zu interagieren.

blue-links-zugänglichkeit

Wir haben bereits über eine Lösung für dieses Problem geschrieben, mit der Sie Stile für diesen Text beibehalten können, aber auch hier gewinnt eine neuere Lösung an Popularität. Es stellt sich heraus, dass das Einfügen des folgenden Snippets blaue Links auf iOS tötet, ohne dass zusätzliches Markup in Ihrem HTML erforderlich ist. Fügen Sie es einfach in den Kopf Ihrer E-Mail ein und senden Sie es ab.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Einige Webinar-Teilnehmer wiesen scharfsinnig darauf hin, dass das obige CSS speziell auf Apple-Geräte abzielt. Während meine jüngsten Tests gezeigt haben, dass blaue Links auf Android kein Problem darstellen, haben einige Mitglieder der Litmus-Community Probleme mit Android und Gmail, die Dinge wie Telefonnummern verknüpfen. Sehen Sie sich die Community-Diskussion an, um einige der cleveren Problemumgehungen zu sehen.

Wie geht man am besten mit responsiven Bildern um? Wie wäre es mit Netzhautbildern?

Da immer mehr Menschen responsives E-Mail-Design übernehmen, ist der Bedarf an responsiven Bildern gestiegen. Mein bester Rat für den Umgang mit responsiven Bildern ist eine Technik, die ich für Julie Ng, die Entwicklerin des fantastischen E-Mail-Entwicklungs-Newsletters, aufgegriffen habe.

Grundsätzlich geben Sie Ihre Bildabmessungen in Ihrem img-Tag auf verschiedene Weise an. Um zu verhindern, dass einige E-Mail-Clients größere Retina-Bilder in voller Größe anzeigen, deklarieren Sie die Breite mit dem width-Attribut. Dies liefert eine gute Basislinienbreite in Pixeln. Bei Responsive-E-Mails deklarieren Sie dann die Breite, die maximale Breite und die minimale Breite des Bildes als Inline-CSS. Hier ist ein Beispiel:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Natürlich möchten Sie etwas ALT-Text bereitstellen, wenn Bilder deaktiviert sind und display:block; um unnötigen Leerraum um das Bild herum zu vermeiden. Wenn Sie zusätzliche Kontrolle über das Bild benötigen, können Sie es mit einer Klasse und CSS im Kopf Ihrer E-Mail ausrichten. Denken Sie daran, eingebettetes CSS wird nicht überall unterstützt.

Wenn es um Netzhautbilder geht, erstellen Sie Ihre Bilder am besten einfach mit der doppelten Anzeigegröße für das Bild in Ihrer E-Mail. Wenn Sie beispielsweise ein 600 x 200 Pixel großes Bild haben, würden Sie es als Bild mit 1200 x 400 Pixel erstellen und speichern. Fügen Sie es normalerweise in Ihre E-Mail ein. Das bereits erwähnte width-Attribut verhindert, dass es in Clients wie Outlook als absurd riesiges Bild angezeigt wird, und Ihre Bilder werden auf Geräten mit Retina-Bildschirmen schön und scharf aussehen.

Irgendwelche Ratschläge für jemanden, der animierte GIFs in einer E-Mail verwenden möchte?

Tue es! Animierte GIFs sind eine fantastische Möglichkeit, Ihren E-Mail-Kampagnen Bewegung und Interesse zu verleihen. Wir lieben die Technik so sehr, dass wir eine ausführliche Anleitung zur Verwendung von animierten GIFs in E-Mails geschrieben haben.

Gehen Sie einfach mit dem Verständnis ein, dass sie nicht überall unterstützt werden, am bemerkenswertesten in Microsoft Outlook, das nur den ersten Frame der Animation anzeigt. Es ist eine gute Idee, sicherzustellen, dass alle Bilder im GIF zu Illustrationszwecken verwendet werden und nicht, um den Abonnenten wichtige Informationen zu übermitteln. Solche Informationen sollten immer als Live-Text in der E-Mail angezeigt werden, damit Abonnenten sie auch dann lesen können, wenn GIFs und Bilder deaktiviert sind.

Während viele Leute denken, dass GIFs nur zum Spaß sind, verwenden viele Produktfirmen animierte GIFs, um Interaktionen mit ihren Produkten zu zeigen und den Leuten im Wesentlichen beizubringen, wie man Produkte verwendet, bevor sie sie überhaupt berühren. Hier ist ein großartiges Beispiel von MailChimp:

mailchimp-interface-gif

GIFs sind eine großartige Ergänzung für die Toolbox jedes E-Mail-Marketers. Ein Ratschlag wäre jedoch, sie sparsam zu verwenden. Wenn jede Kampagne eine Menge GIFs enthält, verlieren sie schnell ihre Überraschung. Verwenden Sie sie gelegentlich, wenn Sie wirklich auf eine Kampagne oder eine coole Show aufmerksam machen möchten.

Was halten Sie von der Verwendung von Videos in E-Mails?

Genau wie animierte GIFs können Videos eine hervorragende Möglichkeit sein, die Aufmerksamkeit eines Abonnenten zu erregen. Leider haben Videos selbst noch weniger Unterstützung durch E-Mail-Clients. Während wir früher einen Videohintergrund in einer E-Mail verwenden konnten, wurde er nur in Apple Mail und Outlook für Mac unterstützt.

Das sollte Sie jedoch nicht davon abhalten, Video in Verbindung mit E-Mail zu verwenden. Die Leute lieben Videos absolut und Unternehmen nutzen Videomarketing zunehmend, um die Interaktion mit den Nutzern zu erhöhen. Die beste Möglichkeit, Videos in E-Mails zu verwenden, besteht darin, ein Standbild des Videos mit einer Wiedergabeschaltfläche in die E-Mail-Kampagne aufzunehmen, die auf eine Zielseite verweist. Nutzer erkennen sofort, dass es sich um ein Video handelt und können das Video auf der Landingpage ansehen.

Während eingebettete Videos in E-Mails eine angenehme Benutzererfahrung ermöglichen würden, haben unsere Freunde bei Wistia einige gute Argumente dafür gegeben, warum Landing Pages eine bessere Lösung sind.

  • Videos auf einer Landingpage können an anderer Stelle wiederverwendet werden. Es ist eine dauerhafte Inhaltsressource.
  • Landing Pages erleichtern weitere Interaktionen. Was müssen Sie noch tun, nachdem Sie ein Video in Ihrem Posteingang angesehen haben?
  • Nutzer können Videos leichter auf Landingpages teilen.

Verwenden Sie also auf jeden Fall Videos in Ihren E-Mail-Kampagnen, aber kommen Sie zumindest vorerst damit zurecht, dass dies nicht bedeutet, Videos in einer E-Mail anzuzeigen.

Gibt es responsive E-Mail-Frameworks, die Sie empfehlen?

Wir haben im Webinar einige Ressourcen zum Erstellen besserer E-Mail-Kampagnen erwähnt, aber es lohnt sich auf jeden Fall, sie hier zu wiederholen und zu erweitern.

Was responsive E-Mail-Frameworks und -Vorlagen angeht, gibt es eine Reihe von verfügbaren:

  • Cerberus von Ted Goas
  • E-Mail-Blueprints von MailChimp
  • Zurb-Stiftung für E-Mails
  • MJML von Mailjet

Einer unserer Favoriten ist unser eigener Slate, der fünf responsive Vorlagen für eine Vielzahl von Sendeszenarien enthält. Für welche Option Sie sich auch entscheiden, testen Sie sie in allen E-Mail-Clients, um sicherzustellen, dass Ihre Abonnenten keine Überraschungen erleben.

Sehen Sie sich die Folien und die Aufnahme an

Wir haben eine Menge Boden in „Warte. Was ist gerade mit meiner E-Mail passiert?“ Neben der Identifizierung der häufigsten E-Mail-Probleme und deren Lösungen haben wir die Bedeutung des Testens jeder E-Mail angesprochen und sogar untersucht, wie Sie Transaktions-E-Mails mit Sendwithus testen können. Wenn Sie es beim ersten Mal verpasst haben, können Sie die Folien herunterladen und die Aufzeichnung unten ansehen.

Zeigt Folien und Aufnahmen an →