Newsletter-Design – Gut gestaltet ist halb gewonnen ????

Anschließend an unsere letzten beiden Beiträge zu Newslettern (e-Mail-Marketing, Newsletter im Trend) schauen wir uns heute an, wie Newsletter richtig aufgebaut werden, um ihr volles Potenzial zu entfalten. Ein wesentlicher Punkt ist ein ansprechendes Newsletter-Design. Wie bei vielen Dingen gilt auch hier: Es gibt nur eine Chance für den ersten Eindruck und leider viele Stolpersteine, auf die man achten muss. Das bedeutet aber nicht, dass man zu reinen Text-Newslettern zurückkehren muss. Ganz im Gegenteil. Wie ein Newsletter genau aufgebaut ist, worauf man achten sollte und was in puncto Design möglich ist, erkläre ich euch hier:

Wie ist ein Newsletter aufgebaut?

Newsletter basieren auf HTML-Tabellen. Das jeweilige Template besteht immer aus einer Tabelle mit maximal zwei bis drei Spalten. Diese werden dann den Wünschen der KundInnen entsprechend befüllt und gestylt. Leider sind HTML-Tabellen etwas sperrig. Somit sind dem Design Grenzen gesetzt. Vor vielen Jahren hat man noch Webseiten mit HTML-Tabellen gestaltet, das macht heute aber keiner mehr. Vorallem, weil großer Wert auf eine gute responsive Darstellungen auf Smartphones und Tablets gelegt wird. Auch viele Funktionalitäten von modernen Webseiten lassen sich mit Tabellen kaum umsetzen.

Tabellen sind out, aber warum werden sie noch für Newsletter verwendet?

Newsletter müssen idealerweise mithilfe von HTML-Tabellen gebaut werden, weil nur so eine durchgängige Client-Kompatibilität garantiert werden kann. Es gibt eine Vielzahl von Mail-Clients, wie Outlook, Gmail, GMX, Hotmail etc., die sich unabhängig voneinander entwickelt haben. Dazu kommen verschiedene Browser-Versionen auf unterschiedlichen Betriebs-Systemen (Windows, Mac, Linux). Das macht wiederum alles noch komplizierter. Vielleicht ist dir schon einmal aufgefallen, dass sich Clients nicht nur von der Benutzeroberfläche unterscheiden, sondern Newsletter mit dem gleichen Code dahinter etwas unterschiedlich dargestellt werden. Dazu gleich mehr.

Der gemeinsame Nenner aller Clients: E-Mails werden von allen auf Tabellen-Basis dargestellt, das heißt sie müssen von uns auch so umgesetzt werden, damit jeder Client, weiß, wie er sie darstellen muss.

Beim Newsletter-Design gilt also die Devise: Keep it simple!

Hilfe, mein Newsletter sieht überall anders aus!

Stell dir folgendes Szenario vor: Du hast einen Newsletter mit einem Online-Tool zusammengeklickt. Texte und Bilder wurden an unterschiedlichen Stellen mit dem Tool eingefügt und los geht’s. Aber oh Schreck, im Online-Tool sah alles gut aus, aber in deinem Mail-Programm plötzlich nicht mehr. Und wenn es bei dir nicht gut aussieht, dann auch nicht bei allen anderen EmpfängerInnen, die den gleichen Client verwenden.

Wie kam es dazu?

Beinahe jeder Mail-Client interpretiert den Code im Newsletter-Template anders. Alte Clients ignorieren oft bestimmte Stylings beziehungsweise Code-Passagen komplett, was zu Darstellungsfehlern führt. Dem kann man entgegenwirken, indem man direkt im Code arbeitet und nicht mit einem Online-Tool alles zusammenklickt. Dazu ist allerdings ExpertInnenwissen gefragt.

Warum sich Pfusch beim Newsletter-Design nicht lohnt

Wird das Newsletter-Design nicht so weit vereinfacht, dass es alle Clients ordentlich interpretieren können, treten häufig Darstellungsprobleme auf. Klassische Fehler sind zum Beispiel:

• ineinander verschobene Texte und Bilder
• falsche Größenverhältnisse
• verzerrte Bilder (oder auch verzerrte Firmenlogos)
• abgeschnittene Bereiche: Der Newsletter ist zu breit für den Viewport und man muss jedesmal horizontal scrollen, um dem Text zu folgen. Wie mühsam! Das passiert vorallem bei fehlender responsive Optimierung.
• fehlende responsive Optimierung: Der Newsletter ist nicht gut für mobile Geräte optimiert und kann daher nur schlecht auf Smartphones konsumiert werden.

Im schlimmsten Fall ist das ganze Layout „zerschossen“ und der Inhalt ist kreuz und quer verschoben. Auch das haben wir leider schon gesehen. Da nützt der beste Text und Bildinhalt nichts, wenn die technische Umsetzung nicht stimmt.

Leider kommt dann noch erschwerend dazu: Die Aufmerksamkeitsspanne der AbonnentInnen ist sehr gering. Wer sich nicht auf Anhieb im Newsletter zurecht findet, verliert schnell das Interesse und surft weiter. Im schlimmsten Fall, meldet sich der Nutzer/die Nutzerin vom Newsletter ab. Mangelnder Usability und schlechtem Newsletter-Design sei Dank. Das gilt es zu verhindern! Aber wie?

Mit datenwerk auf Nummer sicher gehen

Eine meiner Aufgaben hier in der Agentur ist die Erstellung von Newslettern, die einerseits den KundInnenbedürfnissen entsprechen und andererseits von den gängigsten Clients richtig interpretiert und dargestellt werden können. Durch jahrelange Erfahrung weiß ich, worauf ich achten muss und wie der Code genau aufgebaut sein muss, damit optische Probleme erst garnicht auftreten. Ich weiß auch, was im Hinblick auf Newsletter-Design möglich ist und was nicht. So kann ich nicht umsetzbare Wünsche mancher KundInnen gleich abfangen und alternative Vorschläge machen, die garantiert funktionieren.

Nachdem ich ein Template gebaut habe, befülle ich alle Bereiche mit Inhalten und teste das Template zusätzlich noch mit dem kostenpflichtigen Online-Tool Litmus in allen gängigen Clients. Frei nach der Devise: Vertrauen in meine Fähigkeiten ist gut, aber Kontrolle ist immer noch besser. 😉 Dabei achte ich genau auf Darstellungsprobleme und optimiere im Bedarfsfall so lange, bis alles überall gut aussieht. Erst dann baue ich den Code im Newsletter-Tool des Kunden/der Kundin ein und diese kann die Textbereiche befüllen und guten Gewissens verschicken.

Möchtest du auch einen Newsletter verschicken, aber weißt nicht so recht, wo du anfangen sollst und wie deine Wünsche technisch umgesetzt werden können? Oder verwirren dich Begriffe wie „Double-Opt-In“, „Template“ und „Bounces“?  Schreib mir an office@datenwerk.at und ich helfe weiter!

Abonniere doch auch gleich unseren monatlichen Newsletter! Wir freuen uns auf dich und deine Meinung!