Die E-Mail-Vorlagen von Emarsys sind ein schneller und effizienter Weg, um visuell ansprechende und sehr effektive E-Mail-Kampagnen zu erstellen. Basierend auf Ihren Designs werden diese Vorlagen mit unterschiedlichem Content erstellt, dabei reicht die Skala von hartcodierten Elementen wie Kopfzeilen (Headers) und Fußzeilen (Footers) über vorformatierte Standardabschnitte bis hin zu freien Bereichen, in denen eine maximale Bearbeitung möglich ist.
Einführung
Emarsys Vorlagen werden in einem Framework erstellt, das dafür sorgt, dass Ihre E-Mails in allen gebräuchlichen Mail-Clients – egal ob webbasiert, desktopbasiert oder mobil – richtig angezeigt werden.
Dieser Artikel soll Ihnen einen Einblick in das Vorlagen-Framework und einige seiner Einschränkungen geben; damit wollen wir sicherstellen, dass Ihre Designs von Anfang an für die Umsetzung als Vorlage geeignet sind. Inkludiert sind auch einige Überlegungen bezüglich der Zustellbarkeit.
Als Referenz können Sie hier ein gutes Beispiel für ein E-Mail-Design herunterladen.
Format der gelieferten Datei
Sie können Ihr E-Mail-Design als Bilder in einer Photoshop-Datei (.psd) an uns übergeben oder uns den Code direkt in einer HTML-Datei (.html oder .htm) senden.
Photoshop-Dateien
Wenn Sie eine neue Vorlage designen oder noch im Besitz der Designdateien für Ihre bestehenden Vorlagen sind, dann senden Sie uns bitte ein Mock-up Ihrer E-Mail in einer .psd-Datei.
Zusätzlich zur .psd-Datei benötigen wir von Ihnen eine Textdatei mit den generellen Dimensionen, Schriftarten und Farben. Es hilft, wenn Sie ein Bild der E-Mail inkludieren und klar kennzeichnen, welche Designelemente auf welchen Spezifikationen basieren, wie in diesem Beispiel:
Die wichtigen Informationen in dieser .psd-Datei sind, dass das Rastern und die Kantenglättung für den gesamten Textcontent auf None gesetzt sind und dass Sie keine Ebenen zusammenführen oder reduzieren.
Sie müssen auch die RBG-Farbdefinition und 72 dpi für ein optimales Webrendering verwenden.
In unserer Vorlagen dürfen sich Bilder nicht überlappen; achten Sie bitte darauf, dass die Bilder in Ihrer .psd-Datei sorgfältig nebeneinander platziert sind.
HTML-Dateien
Wenn Sie als Basis für Ihre Vorlage eine bestehende E-Mail verwenden wollen, können Sie uns einfach den HTML-Code schicken. Wir bauen dann die E-Mail gemäß dieser Standards neu auf und stellen sicher, dass sie in allen unterstützten Browsern und Clients gleich aussieht.
Die HTML-Datei sollte Ihr gesamtes Stylesheet enthalten, daher ist es nicht erforderlich, dass Sie uns Details zu den Dimensionen, Schriftarten und Farben übermitteln. Folgende Informationen sollten Sie jedoch an uns weitergeben:
- Einen Screenshot der E-Mail, so wie sie aussehen soll, mit Informationen zu dem Mail-Client und der Browser-Version, in der sie angezeigt wird.
- Eine klare Kennzeichnung all jener Bilder und Links, die für die Bearbeitung gesperrt sein sollen.
Bitte senden Sie uns den Code als .html- oder .htm-Datei und nicht als HTML-Code, der in eine .txt-Datei oder ein anderes Dateiformat kopiert wurde.
Bevor Sie beginnen
Es gibt eine Reihe von wichtigen Aspekten, die Sie bedenken sollten, bevor Sie mit dem Design Ihrer Vorlage beginnen.
Die Message
Als Erstes sollten Sie sich absolut klar darüber sein, welche Message die E-Mail vermitteln soll. Das ist ausschlaggebend für alle anderen Entscheidungen, die Sie treffen werden.
Zu den Fragen, die Sie sich stellen sollten, gehören:
- Ihre Kampagne fungiert als direkter Channel zwischen Ihrem Unternehmen und der Inbox Ihrer Kunden; gibt sie Ihre Corporate Identity wieder und repräsentiert Sie Ihre Marke?
- Entspricht das generelle Layout den Gepflogenheiten Ihrer Branche?
- Handelt es sich um eine saisonale Kampagne (zum Beispiel Angebote in der Weihnachtszeit), um eine einmalige Angelegenheit (zum Beispiel eine Willkommen-Mail) oder um eine wiederkehrende Kampagne, deren Content regelmäßig aktualisiert werden muss?
Personalisierung und dynamischer Content
Wie viel Personalisierung werden Sie verwenden? Und planen Sie die Verwendung von Block-Targeting?
Wann immer Sie diese Art von dynamischem Content verwenden, besteht die Möglichkeit, dass einige Kontakte ihn nicht sehen werden; Ihr Design sollte flexibel genug sein, um das zu kompensieren. Mit anderen Worten: Vermeiden Sie ein Design, das bei fehlendem dynamischen Content Leerräume anzeigt.
Mobil zuerst?
Mit dem Emarsys E-Mail Editor ist es sehr einfach, responsive E-Mails zu erstellen, die sowohl auf Mobilgeräten als auch auf dem Desktop gut aussehen. Aufgrund der großen Vielfalt an Bildschirmgrößen und -formen ist jedoch nicht immer klar, welche Version auf welchem Gerät angezeigt wird.
Wenn Sie Ihr Vorlagendesign vorbereiten, kann es von Vorteil sein, sich folgende Frage zu stellen: Sind wir ein 'Mobile First'-Unternehmen oder nicht?
Falls dem so ist, sollten Sie Ihr Design auf die Standard-Screens von Mobilgeräten ausrichten (d.h. ein einspaltiges Layout und große CTAs). Wird der Content auf einem Desktop geöffnet, wird er entsprechend skaliert; vor allem aber erreichen Sie so eine wirklich optimale Darstellung auf allen Mobilgeräten.
Elemente im Vorschaufenster
Es gibt einen Kernbereich von 5-8 cm, der in den Vorschaufenstern der meisten Mail-Clients sichtbar ist. In diesem sehr begrenzten Bereich sollten der Mehrwert, Ihr Corporate Branding und das Editorial/die Personalisierung sichtbar sein, auch wenn die Bilder nicht angezeigt werden.
Falls hier keine Informationen von Wert enthalten sind, sollten Sie das Design verbessern. Wenn Sie dafür Ideen benötigen, sehen Sie sich ein paar Best-Practice-Beispiele an. Bei sehr großen E-Mails sollten Sie überlegen, ein Inhaltsverzeichnis (Table of Contents, TOC) zu verwenden. Fragen Sie die Emarsys Consultants danach, wie dies das Verhalten der Vorlage beeinflussen kann.
Variablen
Möchten Sie später in der Lage sein, globale Stile wie die Schriftart oder die Bg Color schnell und mühelos zu ändern? Falls ja, spezifieren Sie diese und wir fügen sie als Variablen hinzu.
Sprachen
Falls die Vorlage in mehr als einer Sprache erstellt werden soll, übermitteln Sie uns bitte auch folgende Informationen:
- Geben Sie genau an, welche Texte übersetzt werden sollen.
- Zusätzlich zu den Artwork-Dateien senden Sie uns bitte eine Tabelle mit sämtlichen übersetzten Strings.
Designentwurf
Bevor Sie uns Ihre endgültigen Spezifikationen schicken, empfehlen wir, uns einen Designentwurf als Bild (.jpeg oder .png) zu senden. Dann können wir Ihnen ein frühes Feedback geben, das Ihnen möglicherweise Zeit spart.
Allgemeiner Styleguide
Einige unserer Richtlinien sind für alle Teile einer E-Mail gültig.
Generelle Dimensionen, Schriftarten und Farben
Wir benötigen folgende Informationen von Ihnen:
- Die Gesamtbreite des Designs; diese sollte 650 px nicht überschreiten.
- Die horizontalen und vertikalen Abstände zwischen Blöcken und Spalten (dies sollte einer allgemeinen Logik folgen).
- Die maximale Höhe und Breite von Bildern.
- Die zu verwendende Schriftart (keine benutzerdefinierten oder nicht webtauglichen Schriften - die Eignung Ihrer Schrift überprüfen Sie hier).
- Die gewünschte Schriftfarbe als sechsstelliger Hexcode (z.B. #dd15as).
- Die gewünschte Schriftgröße in Pixel. Verwenden Sie Schriftgrößen zwischen 10 px und 19 px (8 pt 14 pt) und vermeiden Sie Halbpixel.
- Den Stil für verlinkten Text im Body-Text (z.B. unterstrichen, andere Farbe etc.).
- Den Stil für verlinkten Text in Überschriften, falls unterschiedlich.
Falls Sie zusätzliche Anforderungen haben, wie etwa Links oder Bilder, die für die Bearbeitung gesperrt sein sollen, dann inkludieren Sie bitte auch diese.
Das gilt für sämtliche Textelemente!
Vermeiden Sie die Verwendung von definierten Zeilenhöhen und Buchstabenabständen. In manchen Mail-Clients (z.B. Outlook) werden diese nicht oder nur teilweise dargestellt. Diese Clients zeigen eine zu hohe Zeilenhöhe an und zerstören damit das Layout. Falls die Verwendung definierter Zeilenhöhen unumgänglich ist, lassen Sie etwas mehr Raum im Design, um sicherzustellen, dass die Abschnitte korrekt angezeigt werden.
Das Hochstellen und Tieferstellen von Zeichen wird nicht optimal unterstützt und sollte vermieden werden.
Hintergrundbilder
Hintergrundbilder sollten nicht verwendet werden, weil manche Mail-Clients, zum Beispiel Outlook 2007 und 2010, diese nicht (oder nicht vollständig) anzeigen.
- Falls Sie einen Contentblock erstellen wollen, in dem Text über ein Bild gelegt wird, machen Sie den Text zu einem Teil des Bildes und wir verwandeln es in ein Bannerbild.
- Falls der Text unbedingt bearbeitbar sein soll, müssen Sie eine Ersatzfarbe angeben, die in den entsprechenden Clients statt des Bildes angezeigt werden soll.
Listenstile
Vermeiden Sie die Verwendung von Listenstilen, da sie von vielen Mail-Clients nicht unterstützt werden. Als Aufzählungszeichen können ausschließlich schwarze Punkte verwendet werden.
Darüber hinaus haben Listen üblicherweise Textabstände oder Ränder definiert, die wahrscheinlich nicht zu Ihrem Gesamtlayout passen.
Hartcodiert vs. bearbeitbar
Fall Sie Links in der Kopf- oder Fußzeile hartcodieren wollen, machen Sie deutlich, wie diese getrackt werden sollen, damit wir die Tracking-Parameter inkludieren können.
Ebenso sollten Sie angeben, welche Bilder oder Links beim späteren Erstellen der E-Mail für die Bearbeitung freigegeben sein sollen.
Deliverability Compliance
Es gibt eine Reihe von Stilen, die vermieden werden sollten, weil Sie die Zustellbarkeit negativ beeinflussen; unter anderem sollten Sie Folgendes beachten:
- Verzichten Sie auf die Einbettung von Flash oder Rich Media.
- Verwenden Sie möglichst wenig rote Schrift (selbst wenn Ihre CI rot ist).
- Verzichten Sie auf die Verwendung von JavaScript.
- Verwenden Sie keine in die Kampagne eingebetteten Formulare.
Sie sollten auch sicherstellen, dass sowohl Ihre Vorlage als auch die E-Mails, die Sie senden, den Zustellbarkeitsstandards von Emarsys entsprechen; damit erreichen Sie optimale Liefer- und Response-Raten.
E-Mail-Design: Über der Falz
Der obere Teil Ihrer E-Mail enthält die Kopfzeile, das Banner und das Editorial; diesen Teil sehen Ihre Kunden in der Vorschau und wenn sie die E-Mail öffnen. Hier wollen Sie den stärksten Eindruck hinterlassen und damit das Vertrauen und Engagement Ihrer Kunden fördern.
- Schließen Sie stets einen Link zur Online-Version ein. Wenn Sie den Emarsys Standardlink für die Online-Version verwenden, so ändert sich dieser je nach der Sprache, die in den E-Mail Einstellungen ausgewählt wurde. Wenn Sie das hartcodieren, müssen Sie für jede Sprache eine eigene Vorlage erstellen.
Das Einschließen eines Preheaders ist nicht erforderlich; dies geschieht im Feld Text-Vorschau auf dem Tab E-Mail-Basics.
E-Mail-Design: Hauptinhalt
Der Body der E-Mail ist jener Bereich, in dem Sie die größte Vielfalt an Blockstilen verwenden können.
- Mehrspaltige Blöcke werden auf Mobilgeräten zu einer Spalte gestapelt. Es sollten nicht mehr als vier Spalten verwendet werden.
- Die Abstände zwischen den Spalten müssen identisch sein.
- Verwenden Sie symmetrische Spalten, wann immer das möglich ist.
- In jedem Block sollten Header, Bodytext, Bild und/oder CTA ausgewiesen sein.
- Schließen Sie alle Trennelemente im Contentblock selbst ein, statt sie in einem eigenen Block anzuordnen. Dann müssen Sie die Trennelemente nicht im jeweiligen Block-Targeting einschließen; zudem sieht es besser aus, wenn auf Mobilgeräten mehrere Spalten gestapelt werden.
- Schließen Sie von jedem Blockdesign nur jeweils eines ein. Diese können im Vorlageneditor dupliziert werden, um mehrere Vorlagenlayouts zu erstellen.
Soziale Netzwerke
Falls Sie Links zu sozialen Netzwerken einschließen wollen, geben Sie bitte an, ob die Emarsys Standard-Icons verwendet werden sollen; alternativ können Sie auch Ihre eigenen Icons zur Verfügung stellen.