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.