Anpassungsfähiges Design für bessere Newsletter
Definition Responsive E-Mail-Design
Responsive E-Mail-Design heißt, dass sich Inhalte flexibel an die jeweilige Bildschirmgröße anpassen. Dies geschieht durch Einsatz verschiedener technischer Mittel, wie beispielsweise Media Queries. Dem responsiven Element liegt ein “flüssiges” Raster zugrunde. Dieses sorgt dafür, dass sich nicht nur Inhalte an die vorhandene Fläche anpassen, sondern sich sogar das Layout bei Bedarf verändert. Daraus resultiert eine perfekte Anzeige für den jeweiligen Monitor. Ziel ist es, die User Experience in Sachen Darstellung, Lesbarkeit und Bedienbarkeit auf allen Geräten zu maximieren.
Wofür benötigt man Responsive E-Mail-Design?
Je nach Branche und Zielgruppe werden bis zu 90 Prozent der Newsletter unterwegs und somit über mobile Endgeräte geöffnet. Besonders im B2C-Umfeld mit einer sehr jungen Klientel ist der Anteil mobiler Öffnungen in der Regel extrem hoch. Umgekehrt hat der PC oder das Notebook bei reinen B2B-Verteilern deutlich die Nase vorne. Da die Größenverhältnisse sowie Bedingungen hier drastisch schwanken und leider auch nicht vorhersehbar ist, mit welchem Gerät der Empfänger den Newsletter abrufen wird, muss man eine universale Lösung anbieten.
Öffnung nach Endgerät
Durschschnittswerte einer AGNITAS-Auswertung Stand 2016; es ist zu beachten: Diese Öffnungsraten sind je nach Branche unterschiedlich.
Im B2C-Bereich sind die mobilen Öffnungsraten signifikant höher als im B2B-Bereich.
Die Lösung hierfür lautet mobil-optimiertes Design, auch genannt Responsive E-Mail-Design!
Eine Herausforderung beim Responsive E-Mail-Design ist unter anderem, die E-Mails anzupassen, an die verschiedensten:
- Displaygrößen
- Bildformate
- E-Mail Clients
- Browser
Welche Optimierungsmöglichkeiten unterscheidet man?
In der Welt von tausend verschiedenen Bildschirmgrößen, gibt es natürlich auch verschiedene Mittel und Wege sich diesen anzupassen. Responsive Design ist mittlerweile ein Gattungsbegriff. Es gibt jedoch verschiedene Herangehensweisen, die man wie folgt unterscheiden kann:
Scalable
Beim sogenannten scalable Design (dt. skalierbares Design) ist der Ansatz recht simple. Man entwirft eine E-Mail so, dass sie mit demselben Design sowohl auf einem PC als auch auf dem Smartphone/Tablet gut aussieht. Es wird auf ein Gittersystem, das Anordnung und Proportionierungen regelt, gesetzt. Des Weiteren werden E-Mails mit dieser Designvariante einspaltig angelegt, es werden “größere” Schriften verwendet (min. 14 px) und touchscreen freundliche Call to Actions eingesetzt. Es gibt auch nur eine Variante dieser E-Mail, sie wird auf allen Geräten mit den gleichen Inhalten und derselben Darstellung angezeigt.
Fluid
Fluid Design passt sich den jeweiligen Bildschirmgrößen “fließend” an, indem es anstatt auf vorgegebene Umbruchpunkte, auf prozentuale Größen zurückgreift. Das Design passt sich dementsprechend “einfach nur” der Größe an, indem es die Größe der Elemente prozentual verkleinert oder vergrößert und Texte dynamisch um diese Elemente fließen. Diese Art des E-Mail-Designs ist zu empfehlen, wenn man große Textblöcke in einem Mailing verwendet. Es ist jedoch wichtig, eine maximale Größe festzulegen, da es sonst auf großen Monitoren zu Problemen mit der Lesbarkeit, kommen kann.
Responsive
Während sich Responsive E-Mail Design auch aus Elementen von Scalable und Fluid Design bedient, setzt es, wie später genauer erklärt wird, auch auf Media Queries. Dadurch ermöglicht ein responsive Design, dass Inhalte je nach Bildschirmgröße nicht nur größer oder kleiner werden, sondern sich diese verschieben oder gar ausgeblendet werden. Die Ausblendung von bestimmtem Content ist insofern sinnvoll, da manche Elemente auf einem Desktop PC zwar wunderschön aussehen, bei der mobilen Version aber die Ladezeiten stark in die Höhe treiben oder die E-Mail zu einem endlos Bandwurm mutieren lässt.
Vorteile von Responsive E-Mail Design
- Bessere Lesbarkeit auf mobilen Geräten
- Bessere Bedienbarkeit auf mobilen Geräten
- Professionelle Außenwirkung
- Höhere Conversions
Nachteile von Responsive E-Mail Design
- Keine Kontrolle mehr, wie das Design unter seltenen Konstellationen interpretiert wird
- Bei komplexen Layouts aufwändig umzusetzen und nicht für alle Sonderfälle realisierbar
- Manche Design-Elemente lassen sich responsive nicht sinnvoll umsetzen
Tipps zum Thema Responsive Design
Media Queries
Unter Media Queries versteht man CSS3-Befehle, die definieren, wie bestimmte Elemente auf den einzelnen Endgerätetypen dargestellt werden sollen. Ihre Newsletter und sonstigen Mails werden dann an die Gegebenheiten des jeweiligen Geräts angepasst. Eine Anpassung könnte zum Beispiel die Veränderung des Layouts an die Bildschirmbreite sein oder aber die Umwandlung von mehrspaltigen Mailings in eine einspaltige Ansicht.
Breite & Auflösung
Auch die Breite und Auflösung der E-Mail sollten beachtet werden. Die Standardbreite für den Inhalt eines Mailings liegt bei circa 600 Pixel, Hintergrund nicht mit berücksichtigt. Die meisten Tablets und Smartphones können diese Breite problemlos ohne Scroll-Balken darstellen. Ältere Modelle zeigen zum Teil nur 400 Pixel. Falls Ihr Mailing eine feste Breite von 600 Pixel hat, wird es an den Seiten unschön abgeschnitten und der User muss von Seite zu Seite scrollen. Um dies zu vermeiden, sollte man mit Hilfe von Media Queries entsprechende Umbruchpunkte definieren. Bei der Auflösung reichen 72dpi. So wird der Inhalt auch auf einem Retina-Display ordentlich dargestellt und verursacht aber keine übermäßigen Ladezeiten.
Kontrastreiche Farben
Um es dem User noch einfacher zu machen, sollten Sie außerdem darauf achten, dass Sie in Ihrem Newsletter kontrastreiche Farben verwenden. Wenn der User von unterwegs seine E-Mails abruft, sind die Lichtverhältnisse oftmals nicht optimal. Kontrastreiche Farben helfen dabei, den Text und die Bilder besser sehen zu können.
Eingebaute Links
Des Weiteren müssen eingebaute Links gut aufrufbar sein. Sie sollten also in Form eines fingergroßen Buttons (sog. Call to Action) mit aktivierendem Design, dargestellt werden. Bauen Sie außerdem Servicenummern in Ihre E-Mail ein, damit der Empfänger, falls er Hilfe braucht, sofort mit seinem Smartphone darauf zugreifen kann.
Alt-Tags
Beinhaltet Ihr Mailing Bilder, ist es außerdem empfehlenswert, sogenannte Alt-Tags (Alternative Tags) dafür zu verwenden. Kann der Browser des Empfängers ein Bild nicht anzeigen, wird diesem trotzdem der Titel des Bildes oder der Grafik angezeigt. So weiß der Empfänger zumindest, was für ein Motiv ihm angezeigt werden sollte.
Kurz und aussagekräftig
Halten Sie Ihre Texte außerdem kurz und aussagekräftig! Die meisten mobilen User lesen Ihre Mails unterwegs und haben oftmals nur wenige Minuten Zeit dafür. Die Kernaussage der E-Mail sollte dem Leser also in wenigen Sätzen näher gebracht werden. Je schneller die Botschaft wirkt, desto besser.
Haben Sie all diese Tipps beherzigt, testen Sie Ihr Mailing vorab auf möglichst vielen Endgeräten, um sicherzustellen, dass all Ihre Empfänger Ihre E-Mail optimal dargestellt empfangen können. Alternativ können Sie auch Tools wie die Inbox-Vorschau von AGNITAS nutzen, um die Darstellung auf möglichst vielen Geräten zu überprüfen.
Das könnte Sie auch interessieren
Folgende Inhalte passen zu diesem Beitrag und könnten Sie auch interessieren:
Lesen Sie auch unsere Blog-Beiträge:
Bei AGNITAS bekommen Sie zahlreiche Newsletter-Templates, die bereits im Responsive Design erstellt wurden. Auf Wunsch optimieren wir auch Ihre individuelle Newsletter-Schablone. Um Ihr Responsive Design noch besser kontrollieren zu können, bietet Ihnen AGNITAS die Möglichkeit der Inbox-Vorschau. Die Inbox-Vorschau ist eine von vielen nützlichen Möglichkeiten, die Sie mit dem Erwerben des Layout Packages erhalten. In einem persönlichen Gespräch beraten wir Sie gerne, wie Sie Ihre Newsletter am besten responsive gestalten.
Über AGNITAS
Die AGNITAS AG wurde 1999 als erster E-Mail-Marketing-Anbieter Deutschlands gegründet. Seitdem vertrauen zahlreiche Kunden auf unsere individuellen und flexiblen Software-Lösungen.
Wir bieten mit dem E-Marketing Manager (EMM) eine innovative Digital-Push-Marketing-Suite, mit der Sie automatisierte Kampagnen via E-Mail, Web Push, WhatsApp, Facebook-Messenger, SMS und Fax durchführen können.
Durch die optimale Verbindung von Content Marketing, Lead Management und Marketing Automation stärkt der EMM die Kundenbindung und unterstützt Ihren Unternehmenserfolg. Die mehrfach ausgezeichnete Software erfüllt als Inhouse-Applikation oder als Software-as-a-Service alle Anforderungen an eine leistungsstarke Marketing-Automation-Lösung.
Der EMM bietet höchste Datensicherheit, garantiertes Whitelisting und ermöglicht die detaillierte Erfolgsmessung.