Manchmal möchtest du deine eigenen Vorlagen hochladen, anstatt die integrierten Vorlagen von uns zu verwenden. Bei der Entwicklung und Gestaltung deiner Vorlageninhalte musst du dich an bestimmte Regeln halten. Folgende Richtlinien sind notwendig, um die hochgeladene Vorlage mit unserem Drag & Drop-Editor zu bearbeiten und zu aktualisieren.
Format der Vorlage
Bei der Gestaltung deiner eigenen HTML-E-Mail-Vorlage musst du immer bedenken, dass jeder E-Mail-Client seine eigenen Einstellungen für die Darstellung der HTML-E-Mails hat. Das bedeutet, dass du einer Standardstruktur folgen musst, die bei fast allen E-Mail-Clients, insbesondere in Microsoft Outlook, üblich ist. Ein perfektes Beispiel ist die Verwendung vom <table> Tag anstelle vom <div> Tag. Nun, es ist nicht verboten, <div> Tag beim Entwerfen des Skeletts der Vorlage zu verwenden, aber es wird empfohlen, den <table> Tag zu verwenden, da er mit fast allen neuen und älteren E-Mail-Clients kompatibel ist.
Das Layout deiner E-Mail sollte einfach zu scannen sein, damit die Betrachter sofort wissen, wonach sie suchen. Abstände zwischen den Abschnitten, Überschriften und vor allem Bilder sind die grundlegenden Inhalte, die die Aufmerksamkeit des Betrachters am stärksten auf sich ziehen.
Einspaltiges Layout
Die Verbraucher wollen immer in kürzester Zeit das finden, was sie suchen. Und das einspaltige Layout ist für diesen Zweck die beste Wahl. Das Layout funktioniert perfekt auf dem Handy und dem Desktop und enthält nur die wichtigsten Informationen, die den Verbraucher am Newsletter oder an den Angeboten interessieren.
Umgekehrtes Pyramidenlayout
Dieses Layout ist das Standardformat für HTML-E-Mail-Vorlagen, da es Informationen in einem solchen Format anzeigt, wie es die Verbraucher wünschen, sowie das Layout, das optisch präziseste und punktgenauste für alle Arten von Lesern ist. Die Standardstruktur für dieses Layout ist
Bild mit oder ohne Link -> Überschrift -> Absatz -> Call to Action
- Ein einzelnes Bild kann mehr als tausend Worte sagen und die Bedeutung beschreiben, die für die Leser am wichtigsten sind.
- Die Überschrift funktioniert als perfektes Leistungsversprechen, das die Leser neugierig auf das Angebot macht.
- Der Absatz ist eine kurze Erklärung zum Angebot oder Produkt und warum sich der Leser dafür interessieren sollte.
- Schließlich ist der wichtigste Teil die Umwandlung von allgemeinen Lesern/Abonnenten in Konsumenten. Eine klare, prägnante Botschaft und eine kontrastierende Hintergrundfarbe sind der beste Weg, um die Aufmerksamkeit der Leser zu erregen.
Winkelanordnung
Dieses Layout ist in der Regel für Vorlagen gedacht, die unterschiedliche Angebote oder Funktionen für verschiedene Produkte enthalten. Diese Art von Vorlagen sind ideal für den Einsatz im E-Commerce. Sie können verschiedene Abschnitte mit unterschiedlichen Bildern oder Farbblöcken in eckiger Form (jeder Abschnitt) erstellen. Unterschiedliche Farben und Winkel des Abschnitts machen das HTML-Template für die Leser verständlich.
E-Mail-Breite
Nicht jeder Client unterstützt die volle Breite einer E-Mail-Vorlage. Beispielsweise wird die Hintergrundfarbe einer HTML-E-Mail in Google Mail nicht angezeigt, wenn die Breite der E-Mail mehr als 640 px beträgt. Andere Clients können auch Probleme verursachen, da die meisten E-Mail-Clients nicht die volle Breite des Bildschirms des Geräts nutzen, um die E-Mails anzuzeigen. Einige Kunden verwenden einen Abschnitt des Bildschirms, um Anzeigen anzuzeigen, oder einige verwenden diesen Abschnitt, um zusätzliche Funktionen wie Navigationen oder Erweiterungslisten hinzuzufügen.
Die empfohlene maximale Breite für die hochgeladenen benutzerdefinierten Vorlagen bei mailflatrate beträgt daher 550px. Die Breite sollte auf das übergeordnete <table> oder <div> Tag gesetzt werden, das den gesamten Inhalt der Vorlage umschließt.
Texte und Überschriften
Während du eine Vorlage entwirfst oder eine Vorlage von irgendwo herunterlädst, denk daran, dass die Texte und Überschriften innerhalb der Vorlage empfohlen werden, in ein <p>-Tag oder eines der Tags der Überschrift (<h1>,<h2>,<h3>,<h4>) eingeschlossen zu werden. Der Drag&Drop-Editor erkennt <p> und Überschriften-Tags als editierbare Textbereiche. Denken Sie daran, dass es empfohlen, aber nicht zwingend erforderlich ist. Du kannst immer noch Texte innerhalb anderer Tags bearbeiten, aber es wird dringend empfohlen, verschachtelte Tags zu vermeiden, die in einer Vorlage identisch sind. Hier das Beispiel:
Wenn sich ein Textblock innerhalb eines anderen Tags als <p> oder eines Überschriften-Tags ohne Kennzeichnung befindet, umhülle diese anderen Tags mit einem <p>-Tag oder einem der Überschriften-Tags.
<span>Lorem Ipsum </span>.
<stark>Eine einfache Überschrift</stark>.
Lorem ipsum dolor sit amet
Alles sollte wie folgt verpackt werden
<p><span><span>Lorem Ipsum</span></span></p>
<h2><pre>Eine einfache Überschrift</pre></h2></h2>>
<p> Lorem ipsum dolor sit amet</p>.
Ein weiterer Tipp für dich ist die Vermeidung von eingebetteten <span> Tags und die Verwendung von zusätzlichen Tags wie <strong>, <u> innerhalb eines Absatz- oder Überschriften-Tags. Wenn du Wörter innerhalb eines Satzes hervorheben möchtest, empfiehlt es sich, unseren Drag & Drop Editor Style Manager zu verwenden, um das beste Ergebnis zu erzielen.
Hyperlinks & Bilder
Verwende beim Einsatz von Hyperlinks und Bildern immer absolute Pfade. Wenn du deine Bilder nicht bei mailflatrate hochladen möchtest, dann hoste die Bilder auf deinem eigenen Server und verwende die absoluten Pfade als <img> Quelle. Gleiches gilt für die von dir verwendeten Hyperlinks.
Beispiel: Anstatt die
<img alt=“Buy“ src=“/images/buy.png“> oder
<a href=“buy.html“>Einkaufen </a>
Verwende den vollständigen Pfad
<img alt=“Buy“ src=“https://www.app.mailflatrate.com/gallery/danddeditor/assets/emailsnippets/buy.jpg“>
oder
<a href=“https://mailflatrate.com/full-service/“>Unsere Dienstleistungen</a>
Javascript & CSS
Die meisten E-Mail-Clients blockieren Javascript aus Sicherheitsgründen. Wenn du eine Vorlage von irgendwo herunterlädst oder eine eigene Vorlage entwirfst, vermeide die Verwendung von Javascript-Tags innerhalb der Vorlage. Obwohl der Drag&Drop-Editor von mailflatrate die <script>-Tags aus der hochgeladenen Vorlage entfernt, wird empfohlen, Skripte innerhalb der HTML-E-Mail-Vorlage vor dem Hochladen zu vermeiden.
E-Mail-Clients neigen dazu, Head- und Body-Tags innerhalb einer HTML-E-Mail zu entfernen. Die empfohlene Methode ist die Verwendung von Inline-CSS oder das Hinzufügen von CSS-Codes kurz vor dem Inhalt nach dem <body>-Tag.
Vermeide Spam-Inhalte
Lange und verwirrende Betreffzeilen wirken für den Leser immer spamig. Und das ist einer der wahrscheinlichsten Gründe dafür, dass die E-Mail in den Spam-Ordner geht. Versuche immer deine Betreffzeile kurz und bündig zu schreiben und verwende nicht zu viele ausgefallene Farben, um die Wörter hervorzuheben. Vermeide auch Ausrufezeichen und Emojis übermäßig in den Vorlagen zu verwenden. Achte beim Schreiben von Inhalten auf Formulierungen und versuche, offensichtliche Spam-Wörter wie „heißester Deal“, „Geld gewinnen“, „Hier klicken“ zu vermeiden. Und denk daran, dass du diese Wörter basierend auf dem Kontext verwenden kannst, sie aber nicht wiederholt innerhalb einer einzigen Vorlage verwenden darfst.
Link zum Abmelden
Last but not least der „Abmeldelink“. mailflatrate zwingt die Benutzer, den Abmeldelink hinzuzufügen. Daher ist es immer erforderlich, den Abmeldelink vor dem Versand einer Kampagne zu setzen. Wir möchten sicherstellen, dass die Empfänger deine E-Mail erhalten. Ohne einen Abmeldelink ist die Wahrscheinlichkeit hoch, dass die E-Mail in den Spam-Ordner des Empfängers landet.
Wir empfehlen dir auch, den Link zu deinen Datenschutzrichtlinien und zu deinen allgemeinen Geschäftsbedingungen in den Footer deiner E-Mail-Vorlage hinzuzufügen. Wenn die Vorlage keinen Footer enthält, füge diese Links einfach am Ende der Vorlage hinzu.
Zu guter Letzt....
Befolge die Tipps und Tricks in diesem Blog-Beitrag, um das beste Ergebnis zu erzielen, wenn du eine heruntergeladene Vorlage entwirfst oder bearbeitest, um das Beste aus dem mailflatrate Drag & Drop-Editor herauszuholen, wenn du die Vorlage importierst. Für weitere spannende Beiträge und Tutorials zu unserem Tool, besuche einfach regelmäßig unseren Blog oder unsere Website.
