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:

Grafik: Bunte BriefumschlÀge und der Text: "Newsletter-Design - Gut gestaltet, halb gewonnen!"

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.

Screenshot aus dem Online-Kampganen-Tester von eyepin.com. Er zeigt einen Newsletter-Design in unterschiedlichen mobilen Clients.

Mit Online-Tools lÀsst sich das Design auf unterschiedlichen AusgabegerÀten testen. Screenshot von eyepin.com

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?

Screenshot aus dem Online-Kampganen-Tester von eyepin.com. Er zeigt einen Newsletter-Design in unterschiedlichen Desktop-Clients.

Die gÀngigsten Mail-Clients und wie sich mein datenwerk Newsletter in allen verhÀlt. Screenshot von eyepin.com

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.