Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03260.jsonl.gz/1234

Das Grundsätzliche zuerst
Konzentrieren Sie sich zuerst auf den Schriftteil. Schrift ist das, was durch die verschiedenen Email Clients konsequent gleich dargestellt wird. Die meisten Email Clients blockieren zudem standardmässig Bilder von erstmaligen Absendern, so dass Ihre Kampagnenempfänger häufig den Text Ihrer Email vor dem Rest des Inhaltes sehen. Ihre Botschaft sollte auch ohne Bilder noch deutlich wiedergegeben werden.
Viele Email Clients besitzen eine Vorschau, welche ziemlich schmal ist. Achten Sie daher darauf, dass das Layout Ihrer Email ca. 600 Pixel breit ist, um sicherzustellen, dass auch in der Vorschau das gesamte Design sichtbar ist. 600 Pixel sind immer noch weit genug, um Ihren Inhalten ein klares Design für die Anzeige in Desktop Email Clients und auf mobilen Geräten zu verpassen.
Design Best Practices
HTML kann als das Grundkonzept des World Wide Web bezeichnet werden. HTML wurde 1992 zum ersten Mal als Standard dokumentiert und bildet auch heute noch die Grundlage für alle Webseiten. HTML ist auch das Format, in welchem Emails und Emailvorlagen für Kampagnen in Winoffice Prime gehandhabt werden.
Winoffice Prime besitzt einen eigenen Editor für Emailvorlagen. Dieser eignet sich für einfache Inhalte. Falls Sie jedoch aufwändig gestaltete Vorlagen für Ihre Newsletters und Kampagnen verwenden, so empfehlen wir, diese in einem HTML Editor zu erstellen und den gesamten Code mittels Copy&Paste in die Prime Emailvorlage zu übernehmen.
Die folgenden Tipps gelten für die Gestaltung von Emailvorlagen im HTML Format. Dafür wird vorausgesetzt, dass Ihnen die Grundlagen von HTML und CSS bekannt sind. Die Seite von html.net bietet sonst eine gute Einführung.
Beim Entwerfen von HTML Emailvorlagen sollten Sie folgende Punkte beachten:
- Emails sollten maximal 600-800 Pixel breit sein.
- Halten Sie das Design geradlinig und klar. Vermeiden Sie komplizierte Elemente, welche z.B. HTML floats erfordern.
- Sorgen Sie dafür, dass die Hauptinhalte Ihres Emails auch dann "funktionieren", wenn das Laden von Bildern durch den Email Client des Empfängers blockiert wird.
- Entwerfen Sie keine Emails, welche im Wesentlichen aus einem grossen Bild bestehen.
- Verwenden Sie plattformübergreifende Schriftarten wie z.B. Arial, Verdana, Georgia oder Times New Roman.
- Vermeiden Sie unbedingt Elemente, welche Flash oder JavaScript erfordern. Diese Technologien werden sehr oft als Träger von Viren angesehen. Emails mit diesen Inhalten werden demzufolge oft als Spam eingestuft. Sollten Sie nicht auf Animation verzichten können, so setzen Sie diese mit Hilfe von .gif um.
- Verwenden Sie Tabellen für die Gestaltung komplizierter Layouts und Strukturen. Verwenden Sie Attribute wie cellpadding, valign und width, um das Tabellenlayout festzulegen.
- Halten Sie Ihre CSS einfach. Betten Sie die CSS in Ihr HTML Dokument ein.
- Verwenden Sie nur absolute Links für Bilder und hosten Sie diese Bilder auf einem frei zugänglichen Server.
- Testen, testen und nochmals testen. Lassen Sie Ihre Emails nach dem 4-Augen Prinzip Korrekturlesen. Versenden Sie Probe Emails und prüfen Sie, wie diese auf verschiedenen Email Clients dargestellt werden.
Bilder
Das Einbetten von Bildern in Nachrichten ist einer der Hauptgründe dafür, warum HTML Emails versandt werden. Der richtige Weg, um Bilder in solchen Emails zu verwenden ist, sie auf einem Webserver zu bereitzustellen und in Ihren Emails deren Pfad einzutragen. Oder andersrum gesagt, gestalten Sie keinesfalls Kampagnenemails mit einkopierten Bilddateien, sondern speichern Sie die Bilder zentral und verweisen Sie in Ihrem Emails darauf.
Der HTML Code für ein korrekt eingebettetes Bild sollte in etwa so aussehen:
<img src="http://www.ihredomain.ch/bilder/logo.png">
Klickbare Bilder
Verwenden Sie wenn immer möglich Bilder, welche gleichzeitig auch anklickbare Links sind. Bilder animieren die Leser häufiger, darauf zu klicken. Zudem ist es auch für mobile Leser einfacher auf ein Bild zu klicken, statt auf einen kleinen Textlink.
Produktbilder
Verwenden Sie enge Bildausschnitte und Fotos mit geringer Tiefenschärfe für Ihre Produktbilder. Auf diese Weise wird die Aufmerksamkeit des Betrachters rascher auf den Hauptinhalt des Bildes gelenkt.
Animation
Verwenden Sie in Ihrem Emails keine Elemente, welche auf JavaScript oder Flash basieren. Diese Technologien werden oftmals von Spamfiltern oder Firewalls blockiert.
Verwenden Sie animierte GIFs, falls Ihre Emails ein bisschen "Leben" enthalten sollen. Animierte GIFs lenken sehr effektiv die Aufmerksam auf einen bestimmten Bereich des Emails oder sie können als Call-To-Action eingesetzt werden.
Es gilt aber auch bei animierten GIFs vorsichtig zu sein. Erstens wird ihre Darstellung auch nicht von allen Email Clients unterstützt. Andererseits können sie rasch sehr gross werden. Wir empfehlen daher, Animationen generell einfach zu halten und sparsam damit umzugehen.
Bildgrösse
Emails werden immer öfter auch auf mobilen Geräten gelesen. Hochaufgelöste oder zu viele Bilder in einem Email führen zu längeren Ladezeiten. Achten Sie auf eine gesunde Balance zwischen der Qualität der verwendeten Bilder und deren Grösse.
Layout
Ihr HTML-E-Mail-Layout sollte zwischen 600 und 800 Pixel breit sein, um das Vorschaufenster von Email Clients nicht zu überlappen. Entwerfen Sie Ihre Email Vorlagen nicht wie eine reichhaltige Website, denn es gilt: Je kürzer und einfacher Ihre Emails sind, desto besser. Emails werden zunehmend von viel beschäftigten Leuten und unterwegs gelesen. Machen Sie auf den ersten Blick deutlich, welche Inhalte am wichtigsten sind.
Eine oder mehrere Spalten?
Die Art der Inhalte, welche Sie senden bestimmt auch das Spaltenlayout Ihrer Emails.
Einspaltige Emails sind am besten geeignet für:
- Fokussierte, prägnante Nachrichten
- Leicht lesbare Emails
- Emails mit Call-To-Action
Mehrspaltige Emails können verwendet werden für:
- Emails mit einer unterschiedlichen Inhalten
- Produktbasierte Ankündigungen, E-Shop Promotionen oder Verkaufsaktionen
- Emails, welche Nebeninhalte in einer Sidebar präsentieren
Zweckgebundenes Layout
Alle Kampagnen Emails fallen in drei Zweckkategorien:
- Lies mich
- Kauf mich
- Mach mit
Lies mich Emails (Info Newsletter, wichtige Botschaften) zeichnen sich aus durch eine geringe Anzahl von Bildern. Der Aufhänger Ihrer Botschaft muss bereits aus dem Kopfbereich des Emails hervorgehen. Lies mich Emails enthalten kurze und prägnante Botschaften und leben ganz besonders von der Typographie (Schriftart und Grösse) - 12px Sans ist weniger geeignet als 16px Georgia.
Kauf mich Emails sind abhängig von interessanten Grafiken oder Bildern (z.B. Produktefotos Ihres E-Shops). Klare, gut geschnittene Bilder sind ein Muss. Die Bilder sollten unbedingt mit beschreibenden Zusammenfassungen versehen werden, um die Botschaft auch beim Blockieren der Bilder durch den Email Client zu transportieren. Jedes Produktbild sollte mit einem Link ausgestattet sein, welches dem Leser den Zugang auf die Produktseite Ihrer Homepage erleichtert.
Mach mit Emails sollten kurz und bündig sein. Die Informationshierarchie ist sehr wichtig. Darum sollten die Event Details stets prominent und im oberen Bereich des Emails platziert werden. Falls vorhanden, muss der Aufruf zum Handeln klar definiert und auf einen Blick leicht erkennbar sein.
Call-To-Action
Ein Aufruf zum Handeln (Call-To-Action) ist ein guter Anstoss für die Interaktivität Ihrer Emails. Ein gut formulierter und geschickt platzierter Call-To-Action sollte überzeugen. Er sollte auch beschreibender sein, als lediglich hier klicken. Verwenden Sie aktivierende Verben, um klar herauszustreichen, zu was das Klicken auf den Link oder Button führen wird, z.B.:
- Lesen Sie mehr darüber in unserem Blog
- Laden Sie unsere neue Preisliste herunter
- Jetzt kaufen
- Bestellen Sie Ihr Exemplar
- Vergleichen Sie hier
Sie sollten Ihren Lesern auch einen Grund geben, Ihrem Call-To-Action zu folgen. Vergewissern Sie sich darum, dass der Inhalt, welcher sich direkt auf den Button oder Link bezieht, hinreichend beschrieben ist und den Nutzen der Aktion erklärt. Sie können durchaus auch ein gewisses Mass an Dringlichkeit vermitteln. Übertreiben Sie es aber nicht, denn es existiert eine feine Grenze zwischen Dringlichkeit und Aufdringlichkeit.
Buttons oder Links?
Verwenden Sie Schaltflächen die wichtigsten Aktionen. Sie sind die beste Lösung, um den Leser auf einen Call-To-Action aufmerksam zu machen. Seien Sie aber zurückhaltend bezüglich der Anzahl solcher Buttons. Ihre Email Vorlage sollte nicht mit Buttons übersäht sein.
Links können besser mit dem übrigen Inhalt Ihres Emails "verschmolzen" werden. Sie bieten dem Leser ein harmonischeres Leseerlebnis. Andererseits können Links schnell überlesen werden. Eine einfache Möglichkeit, dies zu verhindern ist es, die Anzahl der Worte des Links zu vergrössern. Statt einen Link aus nur dem Wort spenden zu erstellen, können Sie sich auch überlegen, den Link über einen ganzen Satz, wie z.B. Hier können Sie Ihre Spende abgeben, zu spannen.
HTML-Schaltflächen oder Grafiken?
Buttons in Email Vorlagen können im Allgemeinen entweder mit HTML oder auf der Grundlage einer Bilddatei gestaltet werden. HTML Schaltflächen haben den Vorteil, dass sie auch dann angezeigt werden, wenn der Email Client des Empfängers Bilder blockiert. HTML Buttons werden in der Regel auch schneller geladen als Bilder. Allerdings bieten Ihnen bildbasierte Schaltflächen mehr Gestaltungsmöglichkeiten. Alles, was Sie mit Hilfe einer Bildbearbeitungssoftware gestalten, kann auch als Button verwendet werden.
Experimentieren Sie mit beiden Varianten und finden Sie heraus, welche Form für Sie die geeignete ist.
Welchen Editor für welche Inhalte - Prime Editor vs. HTML Editor
Winoffice Prime verfügt über einen eigenen Editor für das Erstellen und Bearbeiten von Email Vorlagen. Dieser ermöglicht das unkomplizierte und rasche Erstellen von Emailvorlagen. Der Prime Editor erlaubt keine Bearbeitung von HTML mit gleichzeitiger Anzeige des im Email dargestellten Layouts. Er ist daher eher für einfache, wenig strukturierte Inhalte geeignet.
Für das Kreieren von aufwändig strukturierten Newsletters empfehlen wir die Verwendung eines dafür geeigneten HTML Editors. Dieser ermöglicht es, Email Inhalte zu gestalten und gleichzeitig den HTML Code dieser Inhalte anzuzeigen sowie zu bearbeiten. Auch erlaubt Ihnen ein HTML Editor, Ihre Emails vorgängig in einem Web Browser zu betrachten, um zu prüfen, ob diese auch tatsächlich wie geplant dargestellt werden. Ist ein Email fertiggestellt, so kann sein gesamter HTML Code mit Hilfe von Copy&Paste in eine Winoffice Prime Emailvorlage eingefügt und wie gewohnt via Kampagne versandt werden.
Nachstehend haben wir für Sie einige HTML Bearbeitungstools zusammengestellt. Bestimmt finden Sie darin ein für Sie passendes Werkzeug.
Microsoft Expression Web
Microsoft Expression Web ist eine inzwischen kostenlos verfügbare Lösung zum schnellen Bearbeiten von HTML-Dateien. Die Ansicht für HTML Dateien lässt sich zweiteilen in einen HTML-WYSIWYG Editor und einen HTML-Quelltext-Editor. So kann das Resultat einer HTML Quelltextbearbeitung umgehend überprüft werden. Der Editor von Microsoft bietet ausreichende Features für alle gängigen Emailvorlage-Typen. Hier geht's zum Download von Expression Web.
Brackets
Brackets ist ein kostenloser Code-Editor für Webdesigner, der von Adobe entwickelt wird. Brackets ist sowohl für Mac OS als auch für Windows verfügbar und besitzt eine integrierte Dokumentation für CSS. Die live Vorschau erfordert die Installation von Google Chrome. Das Programm kann von Entwicklern um neue Funktionen erweitert werden. Verschiedene solche Erweiterungen stehen auf der Downloadseite bereit oder können nach der Installation nachgeladen werden.
KompoZer
KompoZer ist ein kostenloses Web-Authoring-System, welches die Dateiverwaltung und die einfach zu bedienende WYSIWYG HTML Bearbeitung kombiniert. Das Look&Feel des Tools mutet zwar ein wenig antiquiert an, ist jedoch auf die möglichst einfache Bedienung auch durch Nicht-Experten ausgelegt. Hier geht's zur Downloadseite.