Fallbacks für interaktive E-Mail: So bekämpfen Sie die eingeschränkte Unterstützung für Interaktivität

Zum dritten Mal in Folge wurden interaktive E-Mail-Erlebnisse zu einem der heißesten E-Mail-Designtrends gewählt . Warum sehen wir also nicht mehr interaktive E-Mails in unseren Posteingängen? Für viele Marken ist der eingeschränkte Support von Posteingangsanbietern der Hauptgrund, warum sie keine interaktiveren Kampagnen mehr versenden.

Sie müssen keine eingeschränkte Unterstützung befürchten, wenn Sie einen Fallback haben. Es gibt viele Methoden, die Ihnen helfen, ansprechende, interaktive E-Mails zu erstellen, wo sie unterstützt werden, und gleichzeitig ein funktionales und schönes Erlebnis in allen anderen Posteingängen zu gewährleisten.

Warum Fallbacks wichtig sind

Die Unterstützung für HTML und CSS variiert je nach E-Mail-Client, und viele der HTML- und CSS-Elemente, die Sie möglicherweise verwenden, um die Interaktivität in E-Mails zu fördern, werden möglicherweise nicht überall unterstützt.

Wenn Sie Fälle nicht berücksichtigen, in denen es nicht unterstützt wird, kann Ihre E-Mail beschädigt aussehen. Schauen wir uns dieses Beispiel für ein schönes interaktives Bildkarussell an:

Das interaktive Karussell mit seinen leistungsstarken Bildern sieht in Apple Mail großartig aus und ermöglicht es Abonnenten, mithilfe der Pfeile oder Kontrollkästchen durch die Bilder zu blättern. Aber so wird dieselbe E-Mail in Yahoo! Mailen, wenn kein Fallback vorhanden ist:

Ohne Fallbacks erscheint die E-Mail fehlerhaft und wird wahrscheinlich nicht viele Klicks aufweisen. Das wollen wir nicht! Schauen wir uns also an, wie wir interaktive E-Mails mit kugelsicheren Fallbacks überall zum Laufen bringen können.

Die Kraft des Versteck- und Einblenden-Frameworks nutzen

Das Ausblenden-und-Einblenden-Framework ist die grundlegendste und gebräuchlichste Taktik, um Interaktivität und Fallbacks in E-Mails einzurichten. Obwohl es einfach ist, ist es immer noch sehr mächtig.

Das Framework macht genau das, was sein Name vermuten lässt: Es verbirgt die Interaktivität für Clients, die es nicht unterstützen, und zeigt stattdessen einen Fallback an.

Sie richten in Ihrem HTML-Code zwei völlig separate Abschnitte ein – einen für Ihre interaktiven Inhalte und einen für Ihren statischen Fallback. Auf diese Weise können Sie nicht nur diese beiden unterschiedlichen Inhaltstypen angeben, sondern auch unterschiedliche Links und unterschiedliche Nachverfolgungen für jede Version Ihrer E-Mail einrichten, sodass Sie interaktive und statische Versionen verfolgen und vergleichen können. Betrachten Sie es als einen A/B-Test innerhalb einer E-Mail.

Sehen wir uns mit diesem vereinfachten Beispiel an, wie Sie dies in Ihrem E-Mail-Code umsetzen (oder sehen Sie sich den CodePen an):

 <!-- start INTERACTIVE_SECTION --> <!--[if (!mso)&(gte IE 10)]> <! -- --> <div > <div class=" content " > This is where the Interactive Content goes. </div> </div> <!--<![endif]--> <!-- end INTERACTIVE_SECTION --> <!-- start FALLBACK_SECTION --> <div > This is where the Fallback Content goes. </div> <!-- end FALLBACK_SECTION -->

Der interaktive Abschnitt verwendet bedingte Anweisungen, um Inhalte vor E-Mail-Clients auszublenden, die keine Interaktivität unterstützen. Dazu gehören bedingte MSO-Anweisungen, die alles dazwischen aus Outlook-Versionen ausblenden, die keine Interaktivität unterstützen, sowie Inline-CSS, das Inhalte für andere nicht interaktive E-Mail-Clients visuell ausblendet (das ist der Code in Grün). Dann zieht der dunkelrot hervorgehobene Code Stile ein, die den Code für den interaktiven Abschnitt überschreiben, während er stattdessen das Ausblenden des Fallback-Abschnitts erzwingt .

Wir wollten "visuell" rufen, weil der Inhalt immer noch geladen wird, auch wenn er nicht sichtbar ist. Dies ist wichtig zu beachten, da sich alle Bilder und anderen Dateien, die Sie möglicherweise in den interaktiven Abschnitt laden, auf die Ladezeit für das Fallback-Layout auswirken. Versuchen Sie als Workaround, für beide Layouts so weit wie möglich dieselben Bilder zu verwenden.

Für den Inhalt können Sie den Fallback-Abschnitt mit einem beliebigen herkömmlichen E-Mail-Code füllen oder diese <div> s einfach um jeden vorhandenen statischen E- Mail-Code wickeln, den Sie möglicherweise haben. Für den interaktiven Abschnitt können Sie mit jeder Art von reinen CSS-Techniken herumspielen, die Sie implementieren möchten. Die Suche nach reinen CSS-Karussells, Hotspots, Quiz, Scroll-Effekten usw. kann einige großartige Inspirationen liefern!

Verwenden von extern verlinkten Stylesheets

In der Zwischenzeit wird das im dunkelroten Code referenzierte CSS in einer extern verlinkten CSS-Datei gehostet, die Code wie diesen enthält:

 #interactive { display: block !important; max-height: inherit !important; overflow: visible !important; } #staticfallback { display: none !important; } #interactive .content { Font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; display: block; color:#ffffff; }

Die Stile #interactive und #staticfallback haben alle !important; Regeln, damit sie das Inline-CSS in Ihrem HTML überschreiben können. Dies sind die wichtigsten Stildeklarationen, die Ihre Layouts verbergen und anzeigen. Die #interactive .content- Deklaration stellt den Code dar, den Sie verwenden würden, um Ihren interaktiven Inhalt tatsächlich zu gestalten, obwohl interaktive Layouts normalerweise mehr als dieses Beispiel erfordern würden, um zu funktionieren. Wenn Sie beispielsweise einen CTA gestalten möchten, der nur im interaktiven Layout angezeigt wird , erstellen Sie eine neue Deklaration wie #interactive .cta (oder .interactive-cta , solange der Selektor für den interaktiven Abschnitt eindeutig ist) und fügen Sie hinzu Ihre Stile in die CSS-Datei.

Dann fügen Sie Ihrem HTML-Code ein Link-Tag hinzu, das auf dieses externe Stylesheet verweist, ganz unten in Ihrem <head> -Tag, wie in diesem vereinfachten Beispiel.

 <head> <style type="text/css"> /* Boilerplate Styles */ /* Responsive Media Query Styles */ /* Progressive Enhancement Styles */ </style> <!-- External CSS for Interactive Version --> <link rel="stylesheet" type="text/css" href=" http://your-url.com/hideshow.css "> </head>

CSS-Spezifität beherrschen

Wie Sie sehen können, ist eine Menge Tricks mit CSS-Spezifität im Spiel. CSS selbst steht für „ Cascading Style Sheets“, was sich auf die Reihenfolge bezieht, in der Ihr CSS in Bezug auf die Spezifität Und die Spezifität bestimmt, welche Regel sich durchsetzt. Daher ist die Platzierung des <link> -Tags nach all Ihrem eingebetteten CSS entscheidend, damit alle Stile in der externen CSS-Datei die vorherigen Stile überschreiben können.

Warum also eine extern verlinkte CSS-Datei anstelle von eingebettetem oder Inline-CSS? Denn wenn ein E-Mail-Client diese Funktion unterstützt, unterstützt er höchstwahrscheinlich alle Stile, die in der externen CSS-Datei enthalten sind. Wenn Sie Ihr interaktives CSS auf diese Weise getrennt halten, verringern Sie die Wahrscheinlichkeit, dass Ihre interaktiven Stile mit Ihrem nicht interaktiven Code in Konflikt geraten, sodass Sie nicht mit unbeabsichtigten Ergebnissen enden.

Das i-Tüpfelchen: Optimierung für eingeschränkten interaktiven Support mit progressiven Erweiterungen

Nachdem Sie Ihre beiden Hauptversionen – die interaktive und die statische Fallback-Version – eingerichtet haben, können Sie Ihre statische Fallback-Version mit einigen grundlegenden interaktiven Elementen erweitern. Hier ist die statische Version der obigen E-Mail, die durch Hover-Effekte für das Logo und den CTA ansprechender gestaltet wurde:

Sie können lernen , wie man diese einfache , aber leistungsfähige Hover - Effekte hier zu schaffen.

WOLLEN SIE WEITERE RESSOURCEN?

Erhalten Sie die besten E-Mail-Marketing- und Designtipps, Statistiken und Ressourcen direkt in Ihren Posteingang und bleiben Sie an der Spitze der E-Mail-Innovation.

Bleiben Sie auf dem Laufenden →