Responsive E-Mail Design erfolgreich umsetzenSchöne und funktionale Newsletter, egal auf welchem Endgerät
Google verfolgt seit einiger Zeit die Devise “Mobile first” und was bei Websiten gilt, das trifft natürlich auch auf E-Mails und Newsletter zu. Newsletter-Empfänger erwarten heute, dass sich E-Mails flexibel an ihre individuellen Gegebenheiten anpassen. Leider lässt sich nicht vorhersagen, wo Ihre Empfänger die E-Mails lesen werden. Am Arbeitsplatz, zu Hause am PC oder doch mal schnell in der Bahn? Sicherlich werden die Präferenzen unterschiedlich ausfallen. Zudem gibt es viele E-Mail-Nutzer, die nicht nur ein festes Gerät zum Abrufen nutzen, sondern situativ mal per Desktop und dann per Smartphone auf ihre Mails zugreifen. Die Lösung dafür heißt Responsive E-Mail Design (kurz: REMD). Das heißt, das Design reagiert auf die Gegebenheiten, wie die Bildschirmgröße oder den Browser, und passt sich entsprechend an. Der Anteil der mobilen Nutzung kann je nach Branche und Zielgruppe auch weit über 50 Prozent liegen. Da hier mit Ladezeiten, Lichtverhältnissen und anderen Störfaktoren noch zusätzliche Komponenten berücksichtigt werden müssen, sollte man dem Ansatz “Mobile first” für E-Mails folgen – selbst wenn in der eigenen Zielgruppe die mobile Nutzung geringer ausfällt.
Bei der Optimierung darf auf keinen Fall die Funktionalität und die Usability auf der Strecke bleiben. Einfach nur den Newsletter kleiner anzeigen ist keine Option, da dieser gerade auf einem Handy nicht mehr optimal lesbar wäre. Es muss also ein Design her, welches sich dynamisch an die verfügbare Größe anpasst. Bei einem responsiven E-Mail Design gibt es kein starres Grundgerüst und feste Größen, vielmehr skalieren Bilder mit, Spalten brechen flexibel nach vorgegebenen Regeln um und manche Inhalte verschwinden oder verändern sich.
Allerdings spielt nicht nur die Größe bei der Optimierung eine Rolle. Es müssen auch geänderte Nutzergewohnheiten beachtet werden. Bei der mobilen Nutzung nimmt sich der Empfänger pro Mail weniger Zeit. Daher sollten Inhalte kurz und prägnant verfasst werden und möglichst zielgerichtet aufgebaut sein. Man muss somit für optimale Newsletter sowohl an der Darstellung als auch am Inhalt arbeiten.
Schwierigkeiten bei der Optimierung
Das Problem ist, dass es nicht nur ein Handy, ein Tablet und einen PC-Monitor gibt, genauso wenig wie es nur einen Browser, ein E-Mail-Programm oder eine App dafür gibt. Es ist also nicht möglich, auf ein paar Standards hin zu optimieren. Stattdessen muss es ein flexibles Konstrukt sein, das sich den jeweiligen Bedingungen möglichst optimal anpasst und die Herausforderungen an Bedienungs- und Nutzerfreundlichkeit bestmöglich erfüllt. Deshalb arbeitet man beim Responsive E-Mail Design mit Media Queries, die bestimmte Verhaltensregeln für die Darstellung definieren.
Grundlagen für responsive Mailings
Damit eine optimale Darstellung möglich ist, müssen sowohl die Nutzergewohnheiten wie auch die physischen Eigenschaften des Gerätetyps Beachtung finden. Dazu gehört bei kleineren Bildschirmen eine andere Anordnung der Inhalte, sodass ein Text z.B. unter dem Bild steht und nicht mehr daneben, sowie die veränderte Bedienung – Finger statt Maus.
Diese grundlegenden Tipps sollten Sie bei der Umsetzung eines gelungenen responsiven E-Mail Designs beachten:
- Kontrastreiches Newsletter-Design verwenden, damit die Inhalte auch bei schlechten Lichtverhältnissen erfasst werden können
- Umbruchpunkte im Design einplanen und keine fixen Breiten vorgeben, um Links-Rechts-Scrollen zu vermeiden
- Buttons mit genügend Abstand und in ausreichender Größe verwenden, damit auch die Touch-Bedienung möglich ist
- Bildgrößen minimieren, um Ladezeiten zu verkürzen
- Schnell auf den Punkt kommen durch möglichst kurze und prägnante Texte, gegebenenfalls eine verkürzte mobile Newsletter-Version verwenden
- Regelmäßiges Testen der Darstellung auf verschiedenen Endgeräten oder mit Hilfe einer Vorschau im professionellen E-Mail-Marketing-Programm
- Nicht nur auf mobil-optimierte Newsletter setzen, sondern auch die eigene Webseite entsprechend anpassen, damit der Call-to-Action nicht zum Frust wird.
Mailings mit Responsive E-Mail Design erstellen
Der Balanceakt ist es, dass das Mailing auf jedem Endgerät gut aussieht, egal ob es jetzt im Extremfall eine Smartwatch ist oder ein 80-Zoll Fernseher. Damit nicht für jedes mögliche Gerät ein extra Design erstellt werden muss, ist ein responsives Design mit einer flexiblen Anpassung hinsichtlich Größe und Bildformate nötig. Dies gelingt mit Media Queries.
Bei Media Queries handelt es sich um CSS3-Befehle, die Merkmale des Endgerätes abfragen und das Mailing entsprechend der Rahmenbedingungen anpassen. Prinzipiell unterstützen die meisten mobilen Mailclients Media Queries, allerdings gibt es auch immer wieder Ausnahmen, wie z.B. Microsoft Surface.
Oft reichen schon wenige Media Queries, um eine optimierte Darstellung zu erzielen. Die wichtigsten Punkte sind dabei:
- Flexible Anpassung des Layouts an die Fenster- oder Bildschirmbreite
- Automatische Größenanpassung von Bildern je nach Fenster- oder Bildschirmbreite
- Umwandlung eines mehrspaltigen Mailing-Layouts in ein einspaltiges Layout, je nach Fenster- oder Bildschirmbreite
- Umwandlung von Weblinks in Schaltflächen (Buttons)
Die Media Queries werden erst beim Laden eines Mailings abgefragt und sind somit ad hoc an das Endgerät angepasst. Wie im Beispiel zu sehen, passt sich das Layout den jeweiligen Rahmenbedingungen an.
Qualität des Mailings sicherstellen
Im optimalen Fall passt sich der Inhalt des jeweiligen Mailings perfekt an die entsprechenden Bedingungen an, aber wie heißt es doch so schön – Vertrauen ist gut, Kontrolle ist besser. Viele E-Mail-Marketing-Anwendungen bieten hierfür integrierte Vorschaufunktionen für typische Bildschirmgrößen an, im EMM stehen z.B. folgende zur Auswahl:
Desktop, Tablet Hochformat, Tablet Querformat, mobile Hochformat, mobile Querformat
Diese Auswahl gibt aber nur einen Vorgeschmack auf die tatsächliche Darstellung. Neben der Bildschirmgröße, sollten auch Browser und E-Mail-Clients berücksichtigt werden. Hier können Sie die Probe aufs Exempel entweder selbst über verschiedene Geräte und Browser durchführen oder Sie greifen auf eine Inbox-Vorschau zurück, wie sie ebenfalls im EMM integriert ist. Das ist natürlich die bequemere Variante. In der Inbox-Vorschau werden die gängigsten Betriebssysteme und Browser berücksichtigt. So zeigt sich schnell, ob es bei bestimmten Optionen Probleme gibt.
Nach unserer Erfahrung ist z.B. Microsoft Outlook eines der häufigen Problemkinder – überall sieht es gut aus, nur in Outlook nicht. Das Problem ist hier, dass Outlook zur Ausgabe des Mailings als Basis Word verwendet und nicht den Internet Explorer oder Edge, was zu Darstellungsproblemen führen kann. So kann es vorkommen, dass bestimmte CSS-Befehle nicht ausgeführt oder Bilder nicht geladen werden. An dieser Stelle wird es leider notwendig, zusätzlichen Aufwand in das responsive Design zu stecken, um Fehlerquellen zu minimieren.
Was Sie sonst noch wissen müssen, damit Ihr Mailing einen positiven und bleibenden Eindruck macht – egal wie und wo es gelesen wird – erfahren Sie ausführlich in unserem Whitepaper. In diesem zeigen wir Ihnen dann auch, welche Einstellungen direkt im CSS-Code nötig sind.
Das Whitepaper können Sie hier kostenlos downloaden:
Sie interessieren sich für ein qualitativ hochwertiges E-Mail-Marketing? Dann sind vielleicht auch folgende Beiträge für Sie interessant:
Mit Trigger-Mails Kunden binden
Newsletter Design 2020 – aktuelle Trends
Automatisierte Touchpoints im Customer Lifecycle für eine langfristige Kundenbindung