Newsletter to go


Februar 2014

Wir wollten für uns einen Newsletter umsetzen. Und wir wussten, dass dieser auch auf Smartphones & Co. abgerufen wird. Ein Fall für Responsive Design!

Responsive Design ist zur Zeit eines der größten „Buzzwords“ im Web-Technologie-Bereich. Nicht zu Unrecht: In Zeiten, in denen massiv über mobile Geräte gesurft wird, sollten Webangebote auf jedem Bildschirm optimal dargestellt werden. Es werden mehr und mehr Websites umgesetzt, die ihre Darstellung und Inhalte dem jeweiligen Gerät anpassen.

Responsive Newsletter

Es gibt aber neben den Websites aber noch einen weiteren Bereich, in dem Responsive Design seine Stärke zeigt: Bei Newslettern, die via E-Mail versandt werden.

Falls Sie ein Smartphone oder Tablet besitzen, werden Sie sicher Ihre E-Mails darauf abrufen. Dabei werden Sie den einen oder anderen Newsletter erhalten, der schön gestaltet wurde – jedoch nur für den großen Bildschirm auf Ihrem Schreibtisch. Für ein kleines Display ist das Layout untauglich. 

Deshalb setzt man bei der Newsletter-Gestaltung zunehmend auf Responsive Design. Auch wir haben uns dafür entschlossen und unserem neuen Newsletter "beigebracht" sich Geräten anzupassen.

Wir wollen einen responsive Newsletter!
 

Auf dem Weg zum Newsletter

1. Layout

Der erste Schritt auf dem Weg zum Newsletter war das Layout, das wir von der Designerin Irene Fuchs bekamen. Irene ist nicht nur für unser Corporate Design zuständig, sie hat in den letzten Jahren auch sehr viel Erfahrung mit Projekten in Responsive Design gesammelt. Diese Expertise ist wichtig, heißt es doch von Anfang an darauf zu achten, dass sich das Design wirklich für alle großen und kleinen Endgeräte umsetzen lässt.

Für den Newsletter gilt: Je einfacher, desto leichter zu entwickeln und desto weniger Fehlerquellen. Das sicherste ist ein einspaltiges Layout. In ihm müssen sich Elemente zwar verkleinern aber nicht die Position ändern, um sich schmalen Bildschirmen anzupassen.

Wir wollten es uns aber nicht ganz so einfach machen und haben uns für ein zweispaltiges Layout entschieden. Das ist noch immer ein relativ simples Layout, nutzt aber stärker die Vorteile von Responsive Design: Auf großen Bildschirmen sieht man den Newsletter mit zwei Spalten, auf kleinen ändert er sich auf einspaltig.

2. Umsetzung

Die gute Nachricht: Man muss nicht ganz von vorn anfangen, wenn man einen Newsletter in Responsive Design entwickeln möchte. In den Weiten des Netzes gibt es schon einige kostenlose Templates. Wir haben uns für die Vorlage von Email on Acid entschieden und diese an unser Layout angepasst.

Die Entwicklung eines Newsletters in Responsive Design ist eine interessante Kombination aus "alten Techniken" (z.B. greift man auf Table-basierte Layouts zurück) und neuen Technologien wie Media Queries. Darüber hinaus machen spezielle Workarounds für unterschiedliche E-Mail-Clients die Sache noch spannender. Zu den Clients zählen:

  • Web-Clients (E-Mails, die direkt im Browser angezeigt werden – z.B. GMX, Gmail, Outlook Web Access)
  • Rich Clients wie Microsoft Outlook, Mozilla Thunderbird oder Apple Mail
  • Mobile Clients für Android, iOS etc.

Eine weitere Herausforderung war die Integration des Newsletters in das von uns verwendete Kentico CMS. Das Ziel war, ihn so in das System einzufügen, dass einE RedakteurIn ohne Entwickler-Kenntnisse den Newsletter leicht mit Inhalten füllen und versenden kann.

3. Testen & Verzweifeln

Generell gilt für die Umsetzung von jeder Software in Responsive Design die Devise: Testen, testen, testen (und dann nochmals testen). Das ist beim Newsletter nicht anders. Auf verschiedenen mobilen und nicht-mobilen Endgeräten, mit unterschiedlichen E-Mail-Clients und ausliefernden Servern wurde unser Newsletter gecheckt.

Natürlich waren Verbesserungen notwendig und ein paar Probleme tauchten auf. Es hat zum Beispiel einige Zeit gedauert (und ein paar Nerven gekostet) herauszufinden, warum unser schöner „responsiver“ Newsletter sich auf manchen Android-Geräten nicht an die Bildschirmgröße anpasst. Schuld daran ist die Kombination aus auslieferndem Exchange Server und Android – sämtliche Media Queries werden in diesem Fall entfernt.

Testen eines Responsive Newsletters

Aus dem harten Leben eines Newsletter-Entwicklers (Bild anklicken für größere Ansicht).

Warum das in diesem Fall so ist, konnten wir nicht herausfinden. Deshalb müssen wir fürs Erste (!) akzeptieren, dass trotz aller Bemühungen unser Newsletter nicht auf allen Geräten sein perfektes Gesicht zeigt.

4. Optimiert aber (noch) nicht perfektioniert

Was wir also bei der Umsetzung gelernt haben:

  • Die Struktur möglichst einfach halten – je mehr Elemente verschoben werden müssen, desto komplizierter wird die Umsetzung.
  • Responsive Design für Newsletter steckt noch in den Kinderschuhen und ein wenig "Tüfteln" und spezielle Workarounds bleiben nicht aus.
  • Ein "responsives" Verhalten auf allen erdenklichen Geräten ist leider ein Wunschtraum. Schon bei Websites in Responsive Design stößt man in älteren Browsern an Grenzen. Bei einem Newsletter wird es mit all den Geräten, E-Mail-Clients und Servern (sowie den Kombis aus allen drei) noch um einiges schwieriger. Man muss akzeptieren, dass er nicht bei allen LeserInnen perfekt aussehen wird.

Noch ein Hinweis am Ende: Auch beim Befüllen mit Inhalten sollte man die kleinen Bildschirme im Hinterkopf haben. Das bedeutet zum einen, dass man sich kurz und bündig halten sollte (was LeserInnen immer zu schätzen wissen). Zum anderen sollte man Fotos mit genügend hoher Auflösung für Retina-Displays verwenden.

Noch nicht genug?

Falls wir Sie jetzt neugierig gemacht haben, können Sie natürlich gerne unseren Newsletter bestellen. Damit sehen Sie nicht nur das Ergebnis unserer beschriebenen Arbeit, sondern erhalten auch alle zwei Monate interessante Infos aus dem Bereich der Software-Entwicklung.

Weitere Infos finden Sie auch, wenn Sie den untenstehenden Links folgen. Darüber hinaus stehen wir gerne für spezielle Fragen zur Verfügung. Nehmen Sie einfach Kontakt mit uns auf! 
 

Links

Anmeldung zu unserem Newsletter
Mehr Infos zum Thema Responsive Design
Projektbeschreibung "Unser Newsletter"
Toller Guide zu Responsive Newsletter von Campaign Monitor
Unsere Referenzen im Bereich Responsive Design
Zum Template von Email on Acid
Responsive Email Patterns  
Responsive HTML Email Framework

 


 

Sie denken über ein Projekt mit Responsive Design nach? Gerne unterstützen wir Sie mit unserem Know-how und unseren Erfahrungen, die wir in den bisherigen Projekten gesammelt haben. Kontaktieren Sie uns!