Der ultimative Leitfaden zur Verwendung von Snippets im E-Mail-Design

Zwischen Dutzenden von E-Mail-Clients, scheinbar unzähligen Rendering-Macken und sich ändernder Unterstützung für HTML und CSS ist die Codierung von E-Mail-Kampagnen komplex. Leider bedeutet diese Komplexität für E-Mail-Designer, dass das E-Mail-Design zeitaufwendiger wird. Daher haben wir den ultimativen Leitfaden zur Verwendung von Snippets im E-Mail-Design erstellt.

Auf der Email Design Conference hat Dan Denney von der Code School das Problem perfekt formuliert:

Die größte Herausforderung beim Erstellen von E-Mails ist nicht Gmail … es ist Zeit.

Beim E-Mail-Design ist Zeit von entscheidender Bedeutung und die Einrichtung eines Entwicklungsworkflows ist entscheidend. Um mit den sich schnell ändernden Anforderungen des E-Mail-Designs Schritt halten zu können, wird es immer wichtiger, Ihren Workflow so effizient wie möglich zu gestalten.

Was können Sie also tun, um Ihren Workflow zu optimieren? Ein Wort: Schnipsel .

Mithilfe von Snippets können Sie E-Mails einfacher – und schneller – als je zuvor erstellen. Verbringen Sie weniger Zeit mit der Erstellung und Fehlerbehebung von E-Mails und mehr Zeit damit, ein besseres E-Mail-Erlebnis für Ihre Abonnenten zu schaffen.

Was sind Schnipsel?

Snippets sind E-Mail-Module mit wiederverwendbarem Code, die Sie in einer E-Mail-Vorlage oder einem breiteren E-Mail-Designsystem verwenden können. Sie sind ideal für Elemente, die häufig in E-Mail-Designs verwendet werden, wie Doctype, kugelsichere Schaltflächen und Links. Anstatt den Code jedes Mal neu schreiben zu müssen, wenn eines dieser Elemente verwendet wird, können Sie ein Snippet verwenden. Die Verwendung von Snippets automatisiert Ihre Codierung und beschleunigt die Entwicklungszeit drastisch.

So verwenden Sie Schnipsel

Unabhängig davon, welchen E-Mail-Editor Sie zum Erstellen Ihrer E-Mails verwenden, können Sie Snippets verwenden, um Ihren Workflow zu optimieren. Hier erfahren Sie, wie Sie sie in den gängigsten Editoren verwenden.

Traumweber

In Dreamweaver können Sie Snippets hinzufügen oder bearbeiten, indem Sie Folgendes aufrufen: Windows → Snippets → Neu/Bearbeiten. Sie können Ihre Snippets sogar in Gruppen speichern (dh tabellenbezogene Snippets, bildbezogene Snippets usw.), um die Suche zu erleichtern.

Verwenden Sie beim Codieren Ihrer E-Mail Snippets, indem Sie auf den Snippet-Titel doppelklicken, auf Einfügen klicken oder eine Tastenkombination verwenden.

Lackmus-Builder

Klicken Sie in einem Builder-Projekt oben rechts im Editor auf das Snippets-Symbol.

Sie können innerhalb dieser Benutzeroberfläche neue Snippets erstellen und bearbeiten und Snippets in Ihrem Code über Tastenkombinationen auslösen. Sie können auch mit {braces} Bearbeitungspunkte innerhalb des Snippets hinzufügen. Sobald Sie ein Snippet ausgelöst haben, können Sie automatisch zu vordefinierten Bearbeitungspunkten im Snippet springen, um eine schnelle und einfache Anpassung zu ermöglichen.

Erhabener Text

Um vorhandene Snippets anzuzeigen oder neue in Sublime Text hinzuzufügen, gehen Sie zu: Tools → Snippets/Neues Snippet. Jedes Snippet wird in einer eigenen .sublime-snippet-Datei gespeichert.

Fügen Sie Ihrem Code Snippets über Tastenkombinations-Trigger hinzu. Im folgenden Code wird das Snippet beispielsweise ausgelöst, wenn „Hallo“ in den Code eingegeben wird. Sie können auch Bearbeitungspunkte innerhalb des Snippets hinzufügen, indem Sie Dollarzeichen in sequentieller Reihenfolge verwenden ( $1 , $2 usw.).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

Atom

Zeigen Sie Snippets in Atom an, bearbeiten Sie sie oder fügen Sie sie hinzu, indem Sie Folgendes aufrufen: Atom → Open Your Snippets. Jedes Snippet wird als eigene Datei snippets.cson gespeichert.

Ähnlich wie bei Sublime Text funktionieren Snippets in Atom über einen Tastenkürzel-Trigger. Sie können auch Bearbeitungspunkte innerhalb des Snippets hinzufügen, indem Sie Dollarzeichen in sequentieller Reihenfolge verwenden ( $1 , $2 usw.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

Koda

Snippets in Coda werden als „Clips“ bezeichnet. Um einen Clip hinzuzufügen oder zu bearbeiten, gehen Sie zu: Seitenleiste → Clips. Clips können in Gruppen gespeichert werden und funktionieren mit einem Tastenkürzel-Trigger. Sie können auch Bearbeitungspunkte innerhalb des Snippets hinzufügen, indem Sie benutzerdefinierte Platzhalterpunkte in der Benutzeroberfläche definieren.

Snippet-Bibliothek

In jedem Editor können Sie eine Bibliothek mit Ihren Snippets erstellen. Alles in der Bibliothek sollte auf dem neuesten Stand und vorab getestet sein. Da sich die E-Mail-Welt ständig ändert, sollten Sie Ihre Snippets regelmäßig testen und bei Bedarf neue hinzufügen.

Obwohl es noch viele weitere gibt, haben wir eine umfassende Liste mit einigen unserer beliebtesten sofort einsatzbereiten Snippets für die E-Mail-Entwicklung zusammengestellt. Fühlen Sie sich frei, sie zu Ihrer Snippet-Bibliothek hinzuzufügen!

Dokumententyp

Ein Doctype weist einen E-Mail-Client an, eine E-Mail im Standard- oder Eigenartenmodus zu rendern. Es gibt zwei empfohlene Formen von Dokumenttypen für E-Mail. Der erste ist der HTML5-Dokumenttyp:

HTML5

 <!doctype html>

XHTML

Der zweite ist der XHTML-Dokumenttyp:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Campaign Monitor zeigt auf, welche HTML-Dokumenttypen gut zu verwenden sind, und auch in der Litmus-Community gibt es eine großartige Diskussion darüber. Wenn Sie keinen Dokumenttyp für Ihre E-Mail angeben, rendern E-Mail-Clients die E-Mail im „Mackenmodus“, was zu Rendering-Problemen führen kann.

Meta-Tag

Wenn Sie Ihre E-Mail responsive codieren, sollten Sie mehrere wichtige Meta-Tags einbeziehen.

UTF-8

Das erste empfohlene Meta-Tag setzt die Zeichenkodierung auf utf-8, die typische Kodierung für eine E-Mail. Dies kann bei Bedarf geändert werden.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Ansichtsfenster

Das zweite empfohlene Meta-Tag legt die Reaktionsfähigkeit für die E-Mail fest.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Windows Phone

Das dritte empfohlene Meta-Tag dient speziell dazu, die E-Mail auf Windows Phone reaktionsfähig zu machen.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Tabellen

HTML-E-Mails verwenden Tabellen, um Inhalte zu strukturieren. Tabellen von Hand zu codieren kann ziemlich mühsam sein, daher haben wir grundlegende Snippets für einfache Tabellenlayouts entwickelt.

Tabelle 1×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Tabelle 2×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabelle 3×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabelle 2×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabelle 2×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabelle 3×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tabelle 3×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Kugelsichere Tasten

Das Erstellen von Schaltflächen in E-Mails ist dank der Outlook-Rendering-Macken ziemlich mühsam. Es gibt vier empfohlene Arten von kugelsicheren Schaltflächen, die unabhängig davon angezeigt werden, ob Bilder vorhanden sind oder nicht.

VML-Schaltfläche

Die erste Bulletproof-Button-Methode wurde von Stig Morten Myre von Campaign Monitor entwickelt und ist ein VML-basierter Button-Ansatz:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

Campaign Monitor hat auch buttons.cm erstellt, ein einfaches Tool zum Generieren des obigen VML-Button-Codes.

Polsterbasierte Taste

Die zweite Methode ist ein Live-Text-Ansatz mit einer auffüllbasierten Schaltfläche:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Der größte Nachteil dieser Schaltfläche ist, dass sie nicht zu 100 % anklickbar ist.

Randbasierte Schaltfläche

Bei der dritten Methode mit kugelsicheren Schaltflächen wird ein Rahmen um den Link erstellt, um einen großen anklickbaren Bereich zu erstellen:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Der entscheidende Nachteil dieser Methode besteht darin, dass Outlook 2007-2013 die Rahmenbreiten von Link-Tags nicht berücksichtigt, sodass die künstliche Auffüllung der Schaltfläche etwas reduziert wird.

Padding+Rand-Based Button

Die letzte Methode beinhaltet eine Kombination der Padding- und Rand-Buttons:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Dieser Hack wird verwendet, um die Probleme beim Auffüllen von Rendern in Outlook zu vermeiden.

Bilder

Bei der Verwendung von Bildern in E-Mails sind zahlreiche Schlüsselfaktoren zu berücksichtigen. Beispielsweise müssen Sie die Höhe und Breite in HTML-Attributen definieren, damit Bilder in Outlook korrekt gerendert werden. Und die Verwendung von ALT-Text ist nicht nur aus Gründen der Barrierefreiheit extrem wichtig, sondern da 43 % der Benutzer E-Mails ohne Bilder anzeigen. Um zusätzliches Auffüllen und Lücken um Bilder herum zu vermeiden, sollten Sie sie schließlich auf display:block; setzen.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Links

Basislink

Wenn Sie einen Link in einer E-Mail verwenden, müssen Sie darin Inline-Stile festlegen, z. B. Schriftgröße, Schriftfamilie und Textdekoration. Hier ist ein einfacher Ausschnitt, der diese Inline-Stile bereits enthält:

 <a href="#">{style}</a>

Blaue Links unter iOS entfernen

Es gibt mehrere Strategien, um blaue Links unter iOS zu entfernen, aber hier ist ein einfacher Ausschnitt, der dazu eine einzige CSS-Deklaration verwendet:

 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; }

Versteckter Preheader/Vorschautext

Der Preheader- oder Vorschautext wird aus dem Text Ihrer E-Mail kopiert, der normalerweise unter dem Absendernamen und der Betreffzeile im Posteingang eines Abonnenten angezeigt wird. Die Verwendung von verstecktem Preheader-Text ist eine Möglichkeit, die verwendete Kopie zu definieren und zu verhindern, dass sie das tatsächliche Design der E-Mail beeinflusst.

Hier ist der Ausschnitt:

 <div> {preheader text} </div>

Medien-Anfragen

Media Queries sind eine Komponente von Cascading Style Sheets (CSS), der Sprache, mit der Websites und E-Mail-Kampagnen gestaltet werden. Mit Medienabfragen können Sie E-Mail-Designs so optimieren, dass sie über mobile, Desktop- und Webmail-Posteingänge besser nutzbar sind.

Hier ist eine Liste aller wichtigen Medienabfragen, die Sie beim Gestalten von E-Mails benötigen:

Basismedienabfrage

 @media screen and ({declaration}) { {content} }

Max-Width-Media-Abfrage

 @media screen and (max-width: {width}) { {content} }

Medienabfrage nach Mindestbreite

 @media screen and (min-width: {width}) { {content} }

iPad 1 & 2 + iPad Mini Medienabfrage

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPad 3 & 4 Medienabfrage

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

iPhone 2G/3G/3GS Medienabfrage

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4/4S/5/iPhone 6 (Zoomansicht) Medienabfrage

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

HTC ONE + SAMSUNG GALAXY S4/S5 Medienabfrage

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (Standardansicht) + iPhone 6 Plus (Zoomansicht) Medienabfrage

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (Standardansicht) Medienabfrage

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Bedingte Outlook-Kommentare

Angesichts der Fülle von Renderingproblemen, die mit der Unterstützung von Outlook einhergehen, ist es manchmal nützlich, Outlook mit bestimmten Stilen anzuvisieren. Outlook kann mit bedingten MSO-Kommentaren für HTML- oder CSS-Inhalte angesteuert werden.

Microsoft Word-Rendering

 <!--[if mso]> {content} <![endif]-->

Ausblick 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Weitere bedingte Outlook-Kommentare:

• Outlook 2000
• Ausblick 2000-2002
• Ausblick 2000-2003
• Ausblick 2000-2007
• Ausblick 2000-2010
• Ausblick 2002
• Ausblick 2002-2013
• Ausblick 2003
• Ausblick 2003-2013
• Ausblick 2007-2013
• Ausblick 2010
• Ausblick 2010-2013
• Ausblick 2013

WebKit

Eine der besten Möglichkeiten, Ihre E-Mails schrittweise zu verbessern, besteht darin, auf WebKit-Rendering-Engines abzuzielen. Ungefähr 47 % der E-Mail-Öffnungen erfolgen in Posteingängen, die von WebKit unterstützt werden.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Google Mail

Gmail unterstützt keine Klassen oder IDs im <head> von E-Mails, weshalb CSS in E-Mails eingebettet werden muss. Justin Khoo von FreshInbox entdeckte jedoch einen neuen Hack, bei dem Gmail CSS in E-Mails liest.

Wenn Sie das lang- oder title-Attribut als Attributauswahl verwenden, dessen Wert sich in einer Liste von durch Leerzeichen getrennten Werten befindet, von denen einer genau übereinstimmt, liest Gmail dieses CSS. Das ist ein Schluck, also hier ist ein Ausschnitt, um Ihnen zu helfen:

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mail hat vor kurzem seine eigene einzigartige Medienabfrage eingeführt, die es uns ermöglicht, ganz einfach auf bestimmte Stile für das Webmail abzuzielen.

 @media yahoo { {style} }

Android

James White hat kürzlich in der Litmus Community einen Hack gepostet, um E-Mails auf Android 4.4 zu zentrieren.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

Ausschnitte in der Community

Willst du noch mehr Schnipsel? Haben Sie einige Favoriten, die Sie teilen möchten? Mit Hilfe von E-Mail-Freaks überall haben wir in der Litmus-Community bereits Dutzende nützlicher Snippets, wie den Code zum Entfernen blauer Links auf iOS-Geräten.

Sortieren Sie vorhandene Snippets nach dem E-Mail-Client, für den sie erstellt wurden, oder nach dem Snippet-Typ (dh Hack, Image, Link usw.). Sie können Ihre eigenen hinzufügen und eine Snippet-Bibliothek Ihrer Favoriten erstellen. Und Sie können noch mehr Zeit sparen, indem Sie Snippets aus der Community direkt in Builder importieren. In Verbindung mit den Instant Previews von Builder ist die Codierung mit Snippets möglicherweise der schnellste Weg, um erstaunliche E-Mail-Kampagnen zu erstellen.

Schau dir Snippets in der Community an →