Newsletter per E-Mail sind eine sehr effektive Methode, um Kunden auf interessante Aktionen oder neue Produkte aufmerksam zu machen. Anhand einer flexiblen Vorlage lässt sich ein attraktiver Newsletter erstellen, der auch für das mobile Internet pädestiniert ist. Worauf Sie dabei achten müssen, beschreibt dieser Ratgeber.

Responsive Webdesign: Web versus E-Mail

Seit dem Durchbruch des mobilen Internets, nutzen immer mehr Menschen unterwegs das Internet, um beispielsweise ihre E-Mails abzurufen. Auch immer mehr Newsletter werden auf diesem Wege geöffnet, jedoch ist die Darstellung vom jeweiligen Mailclient abhängig. Für die Erstellung eines eigenen E-Mail Newsletters, ist somit eine flexible Anpassung an die Displaygröße des jeweiligen Endgerätes entscheidend. Mithilfe der Responsive Webdesign Technologie, lässt sich eine optimale automatische Darstellung der Webinhalte erzielen, sei es auf Desktop-Monitoren, Smartphones, Tablets, Smart-TVs oder zukünftigen Gerätschaften für das „Internet der Dinge“. Bei Webseiten ist das kein Problem, bei einem E-Mail Client ist es ebenfalls möglich, jedoch erfordert es eine andere Herangehensweise.

Template-Auswahl:

Prinzipiell kann man bei der Newsletter Gestaltung auf bereits vorgefertigte, responsive Templates zurückgreifen. Je nach Anbieter werden die Templates dann kostenpflichtig oder teilweise auch kostenlos angeboten. Gefällt einem beispielsweise ein Entwurf, lässt sich dieser abändern und auf die eigenen Inhalte anpassen. Wird auf vollkommene Individualität Wert gelegt, ist eine Template-Gestaltung von Grund auf notwendig. Je nach Anforderung und Budget lässt sich dann das Template komplett an die Corporate Identity des Kunden anpassen.

Responsive E-Mail-Template

Gestaltungsrichtlinien:

Ein professionelles, schlankes Design mit skalierbaren Grafiken und möglichst prägnanten kurzen Texten, entscheidet oftmals darüber, ob ein Newsletter überhaupt gelesen wird oder nicht. Zudem sind dadurch die Ladezeiten relativ gering, sodass es der Leser nicht gleich ungeduldig wird. Soll der Nutzer dazu bewogen werden, Call-To-Action-Elemente anzuklicken, sind diese möglichst oben anzuordnen. Oftmals herrschen beim Lesen ungünstige Lichtverhältnisse, sodass auf eine möglichst kontrastreiche Farbgestaltung geachtet werden sollte. Bei der Auswahl der passenden Schriftart, kann zwar auf auf Webfonts zurückgegriffen werden, jedoch ist eine Unterstützung nicht bei allen Clients vorhanden. Wichtig ist, dass sie auf kleinen Geräten gut lesbar ist.

Programmierung-Spezifikationen:

Wurden in den 90ern noch Tables für mehrspaltige Layouts in der HTML-Programmierung eingesetzt, sind diese zum Glück durch flexible “div”-Tags abgelöst worden. Allerdings sind ältere Mail-Programmversionen wie Microsoft Outlook noch auf Tabellen festgelegt. Deshalb ist müssen bei der Programmierung eines Responsive E-Mail Template Tables zur Verschachtelung genutzt werden. Auf das “div”-, und “margin”-Tag ist zu verzichten. “Cellspacing” und “cellpadding” sollte auf Null gesetzt werden. Ferner ist die Integration von CSS-Elementen in den HTML-Bereich notwendig, weil nahezu kein Mail-Client externe CSS-Dateien importiert. Aufgrund mangelnder Unterstützung des float-Attributs, ist zur Anordnung lieber auf “align” zurückzugreifen, sowie „display:block“. Mit den CSS3 Media-Queries, kann die Newsletter-Darstellung von einem mehrspaltigen Layout in ein einspaltiges Layout angepasst werden. Jedoch werden diese Befehle von Browser-Anwendungen jeweils unterschiedlich interpretiert.

Testphase:

Bevor ein Newsletter versendet wird, sollte während der Erstellung mehrmals ein Testlauf unternommen werden, um zu überprüfen, ob auch alle Inhalte korrekt verlinkt und responsiv dargestellt werden.

[thrive_leads id=’1131′]