Newsletter: Responsive vs. Liquid/Fluid Design

Hier möchte ich eine kleine Einführung in die komplexe Welt des Newsletter-Designs und die anschließende Programmierung geben. Warum Newsletter immer noch mit Hilfe von Tabellen umgesetzt werden und nicht wie moderne Webseiten mit HTML5 und CSS3. Was der Unterschied zwischen einer responsiven und einer liquiden Umsetzung eines Newsletters ist und welche Variante erfolgsversprechender ist. Und warum wir nach der „Devise Mobile First“ arbeiten und nach dem kleinsten gemeinsamen Nenner suchen sollten.

Geschichte des Newsletters

E-Mail wurde erstmals im Jahre 1982 spezifiziert in RFC 822 (Request for Comments „Bitte um Kommentare“ – ein gängiger Weg im Internet für Standardisierungen). Damals waren es reine Textnachrichten ohne aufwendiger Programmierung.

Gutes altes Tabellenlayout

Das HTML entwickelte sich stetig weiter, sodass wir mittlerweile in HTML5 und CSS3 programmieren können. Leider hilft diese Entwicklung der Erstellung von Webseiten und Bannern viel mehr, als der von Newslettern. Da es bei den E-Mail Clients keine einheitliche Definition gibt, haben sich diese – im Gegensatz zu den Browsern – in ihrer Verarbeitungs- und Verständnismöglichkeit unterschiedlich schnell entwickelt. Deswegen wird ein HTML-Layout bei unterschiedlichen Clients unterschiedlich dargestellt.

So muss man sich bei der Newsletter Programmierung auf den kleinsten gemeinsamen Nenner konzentrieren. In diesem Fall ist das der Standard, der bei der Entstehung der E-Mail galt, also HTML2, das Tabellenlayout. Für alle Designer und Programmierer der blanke Horror…

Responsive Design für Newsletter nicht empfehlenswert

In einer Zeit, in der Smartphones den Markt erobert haben, sollten Newsletter auf jeden Fall mobile optiert sein. Das heißt, sie sollten auf dem Smartphone richtig und optimal angezeigt werden. Eine Möglichkeit dies umzusetzen, ist die Programmierung des Newsletters mithilfe eines responsiven Aufbaus.

Mit dieser Programmierart können CSS-Eigenschaften u.a. mittels Mediaqueries in unterschiedlichen Browserbreiten neu gestaltet werden. Leider können die wenigsten E-Mail Clients Mediaqueries richtig verarbeiten und somit werden die Designänderungen nicht (richtig) übernommen. Es findet beispielsweise keine optimierte mobile Darstellung des Newsletters statt. Der Newsletter wird auf dem Smartphone bestenfalls verkleinert dargestellt (eine verkleinerte Desktopversion), schlechtesten Falls aber komplett zerschossen. Eine Gegebenheit, die nicht sein darf und die man durchaus verhindern könnte.

Beste Darstellung mit Liquid/Fluid Design

Liquid Design zeichnet sich durch seine Einfachheit aus und ist die beste Möglichkeit, um eine einheitliche Darstellung der Newsletter in diversen E-Mail Clients zu erzeugen. Dieses Design passt sich in seiner Weite automatisch der Breite des Browsers an. Es rollt sich gleichmäßig über die Bildschirmgröße aus.

Durch ein vertikales Layout des Newsletters sollte einer mobileoptimierten Darstellung nichts im Wege stehen.

Wir müssen uns auch dringend von dem Anspruch, einen Newsletter überall genau identisch aussehen zulassen, lösen. Bei der Erstellung eines Newsletters sollte immer das oberste Ziel sein, in allen E-Mail Clients eine gute Darstellung zu erreichen, anstatt eine herausragende und in anderen eine schlechte oder sogar gar keine.

Weitere Gestaltungs- und Aufbauhinweise

Bei der Erstellung eines Newsletters gibt es viele Sachen, die beachtet werden sollten. Neben den technischen Anforderungen gibt es auch konzeptionelle und inhaltliche Herausforderungen. Denn inhaltlich einen ansprechenden aber auch informativen Newsletter zu kreieren, ist oft am schwierigsten. Jeder muss sich mit den Fragen auseinandersetzen, wie man es schafft, die Empfänger sofort abzuholen und sie dazu zu bringen, sich für das Produkt zu interessieren.

Hier scheiden sich die Geister. Die einen finden, dass eine aggressive Gestaltung das Maß aller Dinge sei. So falle der Newsletter mit dem zu bewerbenden Produkt sofort ins Auge. Andere Stimmen meinen, das Layout solle sich zurücknehmen, damit vor allem das Produkt im Vordergrund stehen könne.

Um den User mit dem Newsletter abholen zu können, steht zunächst die optimale und korrekte Darstellung, als auch ein fehlerfreier Quellcode im Vordergrund.

Spaltenlayout im Newsletter

Bei der Gestaltung eines Newsletters sollte darauf geachtet werden, dass der Aufbau immer vertikal ist und ggf. nicht mehr als zwei Spalten nebeneinander verwendet werden. So ist es viel leichter, einen Newsletter auch mobile zu optimieren, um eine auf Smartphones einwandfreie Darstellung zu schaffen.

Drei oder mehr Spalten im Layout machen den Newsletter nicht übersichtlicher, sie bringen letztlich eher mehr Arbeit mit sich. Gerade beim Mobile Layout macht man sich damit keine Freude. Empfehlenswert ist, gleich von Anfang an darauf zu verzichten und andere Lösungen für das Design zu finden!

Bilder im Newsletter

Ein schwieriges Thema bei der Erstellung eines Newsletters, sind neben der optimalen Programmierung des Quellcodes und dem möglichst vertikalen Aufbau natürlich die Bilder. Hier ist darauf zu achten, dass die Bilder in ihrer Datenzahl nicht zu groß sind. Nichts ist für einen User ärgerlicher, als eine lange Ladezeit und die Verschwendung seines Datenvolumens, wenn er sich den Newsletter über sein Smartphone ansieht. So sollte gleich bei der Erstellung darauf geachtet werden, dass die Bilder möglichst klein gehalten bzw. reduziert werden können. Wir sollten dem Empfänger, der uns seine Aufmerksamkeit für unseren Newsletter schenkt, nicht mit einer unnötig langen und voluminösen Ladezeit des Newsletters wieder vergraulen!

Mehr zu diesem Thema