E-Mail-Marketing

Wissenswertes

E-Mailings: Das bringt Responsive Design

März 2016 - E-Mailings sorgen für viele Kunden und Bestellungen - wenn Sie alles richtig machen. Doch HTML bietet grundsätzlich kein starres, fixiertes Layout wie im Print-Bereich - vielmehr ist es eine Programmierung, die je nach Client Ihres PCs/Laptops unterschiedlich ausgewertet wird.

 

Und damit nicht genug: immer mehr Empfänger öffnen empfangene E-Mails gar nicht mehr am PC oder Laptop, sondern am Smartphone. Problem: nicht wenige E-Mails werden direkt wieder gelöscht - weil sie schlichtweg am kleinen Smartphone-Bildschirm nicht anwenderfreundlich zu lesen sind: Minischriften, Text und Bilder laufen bis weit rechts über den Bildschirmrand.

 

Doch das muss nicht sein: wir zeigen Ihnen, wie Ihre E-Mailings eine richtig gute Figur machen - auch auf dem Smartphone!

Responsive Design - was ist das überhaupt?

Ein normales E-Mailing ist auf einen Desktop optimiert. D.h. es verhält sich auf dem Smartphone so wie auf einem Desktop: die Anzeigebreite ist auf die Breite eines Bildschirmes angelegt (wenn nicht anders definiert), mehrspaltige Elemente werden nebeneinander angezeigt. Dies führt dazu, dass man um horizontales Scrollen nicht herum kommt, wie man in nebenstehender Grafik sieht. Außerdem ist die Schrift häufig sehr klein dargestellt und somit schwer lesbar.

 

Ein E-Mailing im Responsive Design passt sich dem Empfängergerät an - und sorgt für eine gute Lesbarkeit, unabhängig von der Größe des Endgeräts.

Bildquelle: iStock.com/alexsl

Wie sieht das in der Praxis aus?

Eine im Responsive-Design programmierte E-Mail passt sich den Gegebenheiten des Endgerätes an: nicht nur Texte und Bilder werden gemäß Bildschirmgröße skaliert - der gesamte Aufbau passt sich der Bildschirmgröße an. Mehrspaltige Elemente werden auf dem Handy dann nicht mehrspaltig nebeneinander angezeigt: die Elemente gruppieren sich vielmehr untereinander. Dies vermeidet horizontales Scrollen und garantiert die perfekte Lesbarkeit der E-Mail.

Bildquelle: iStock.com/CostinT

Bildquelle: iStock.com/alexsl

Das ist zu beachten:

Aufbau

  • Möglichst gleichbleibender Aufbau:
    Platzieren Sie Bilder und Texte im gleichen Schema untereinander. Wechseln Sie den Aufbau ab (Bild rechts/links), kann folgendes passieren: auf dem Smartphone werden zwei Bilder direkt untereinander angezeigt, der Text erscheint einmal darüber, einmal darunter.
  • Wenige Elemente nebeneinander:
    da die Elemente auf dem Smartphone untereinander dargestellt werden, können viele Elemente das E-Mailing sehr lang machen. Belassen Sie es besser bei 2 bis maximal 3 Elementen nebeneinander.
  • Große Buttons:
    Achten Sie auf große Buttons, die man auch mit normaler Fingergröße einfach klicken kann. Verlinkungen im Text sind auf dem Smartphone suboptimal.

Text

  • Weniger ist mehr:
    denken Sie daran, dass viele E-Mails auf dem Smartphone gelesen werden - lange Texte erfordern viel Scrollen. Und auch das Lesen auf dem Smartphone ist dann wenig angenehm. Nehmen Sie Informationen an den Text-Anfang. Dann werden sie auch gelesen, wenn man nicht ganz nach unten scrollt.
  • Passende Schriftgrößen:
    die Schriftgröße wird zwar proportional angepasst, Ausgangspunkt ist aber Ihre definierte Schriftgröße. Wählen Sie diese daher nicht zu klein.
  • Personalisierungen beachten:
    Wenn Sie Personalisierungen verwenden: die Laufweite auf dem Smartphone ist geringer als auf dem Desktop. D.h. bei viel Inhalt kann es
    zu unerwünschten Umbrüchen kommen.

Grafik

  • Keine festen Bildbreiten: Damit die verwendeten Bilder sich anpassen können, dürfen Sie keine festen Bildbreiten angeben - sonst wird Ihr Bild auf dem Smartphone genauso groß dargestellt wie auf dem Desktop.
  • Alternative Bildtexte: Geben Sie für Bilder alternative Bildtexte an. Wenn der Empfänger die Bilder nicht nachlädt, kann er dennoch gut die Struktur der E-Mail erkennen. Besonders wichtig sind Alternativtexte, wenn sich der Inhalt der Mail auf das Bild bezieht. 
  • Nicht zu große Bilder: Auch wenn die Grafiken skaliert werden, verwenden Sie möglichst nicht zu große Bilder. Bei der mobilen Ansicht kann das Nachladen großer Grafiken viel Datenvolumen verbrauchen. Integrierter Text in großen Bildern ist beim Skalieren evtl. auch nicht mehr lesbar.

Einschränkungen

Spontan hört es sich so an, als wäre Responsive Design die Universallösung für alle E-Mailings - allerdings gibt es auch Restriktionen, die man beachten sollte:

 

  • Struktur:
    Ihre E-Mailings brauchen eine möglichst einheitliche Struktur: Arbeiten Sie mit zweispaltigen Elementen, sollten diese möglichst immer gleich aufgebaut sein (z.B. Text links, Bild rechts), damit auch bei der mobilen Anzeige (bei der Text und Bild dann untereinander erscheinen) der Leser eine logische Struktur und Text-Bild-Zusammenhang erkennen kann. Es kann sonst passieren, dass mehrere Bilder untereinander erscheinen und der erklärende Text komplett ober- oder unterhalb angezeigt wird, ohne sich für den Leser logisch zu erschließen.
     

  • Bildunterdrückte Version:
    Beim E-Mail-Versand werden Bilder üblicherweise nicht mitgesandt, sondern in Form von Links mitgeliefert und nachgeladen. Vor dem Nachladen der Bilder sieht der Empfänger eine bildunterdrückte Version. Bei normalen Desktop-Versionen wählt man den Aufbau üblicherweise so, dass statt des Bildes in gleicher Größe ein (farbiges) Rechteck mit Text erscheint. So bleibt der Aufbau der E-Mail erhalten. Dies ist naturgemäß beim Versand im Responsive-Design nicht möglich: da man möchte, dass sich die Bilder automatisch anpassen, werden keine Größen angegeben. In einer Version ohne nachgeladenen Bilder, wird daher nur ein einzeiliger, ggf. farbig hinterlegter Alternativ-Text angezeigt.

Responsive Design oder nicht?

Sie sind sich nicht sicher, ob Sie eine Vorlage im Responsive Design verwenden sollen? Richten Sie Ihre Entscheidung nach Ihren Nutzern: Lesen nur wenige Empfänger Ihre E-Mails mobil, so können Sie vielleicht (noch) auf eine Responsive Design-Version verzichten.

 

Eine Variante wäre, Ihre Abonnenten zu fragen, wie Sie Ihre E-Mails lesen. Wenn Ihnen dies zu aufwändig ist: Nach dem Versand finden Sie in Ihrem Kundenbereich eine Auswertung darüber, wie Ihre E-Mails geöffnet wurden - sofern die Öffnungsratenmessung aktiviert war.

Bildquelle: GTC

Fazit

Responsive Design ist optimal für Ihre E-Mailings, wenn Ihre Empfänger auf verschiedenen Endgeräten lesen. Damit sorgen Sie dafür, dass Ihre E-Mail sowohl auf dem PC, dem Tablet und auf dem Smartphone eine gute Figur macht. Aber vor dem Versand gilt in jedem Fall: Testen, testen, testen -  über die Vorschau z.B. in unserem Templateeditor und im Testversand auf unterschiedlichen Clients. So wissen Sie, dass auch das ankommt, was Sie versenden wollen.

 

Aber beachten Sie, dass die Programmierung von Responsive Design E-Mails ihre Tücken hat: manche Clients können die häufig verwendeten Media Queries nicht auswerten, andere können einzelne Angaben nicht interpretieren. Doch als GTC Kunde können Sie richtig schicke Responsive Design E-Mails selbst erstellen: unsere Programmierer haben unsere Responsive Designs Vorlagen für Sie so optimiert, dass Sie sich einfach E-Mailings zusammenbauen können - die auf so gut wie allen Clients richtig gut ankommen!.

 

Haben Sie Interesse an einem Template im Responsive Design? Wir beraten Sie gerne oder helfen Ihnen, Ihre Vorlage im Responsive Design zu erstellen: rufen Sie uns an unter Tel.: +49-(0)7 11-4 90 90-82 oder kontaktieren Sie uns.

Landscape

Martina Assenmacher

Ingram Micro Pan Europe GmbH

"Den E-Mail Versand unserer Newsletters erledigen wir in nur wenigen Minuten - und trotzdem super-professionell. Wir brauchen keine zusätzliche Software und müssen uns nicht langfristig binden. So bleiben wir flexibel. Zudem schätzen wir den Support der aufmerksamen GTC-Mitarbeiter."

Landscape

Uwe Streb

Festina Uhren GmbH

"Der Kundenservice hat uns super beraten. Jetzt holen wir viel mehr aus unseren Aktionen heraus, können Kampagnenvergleiche machen und erreichen genau, was wir wollen."

Landscape

Jürgen Klein

DATEV eG

"GTC ist unser langjähriger Partner für den SMS- und E-Mail-Versand und super zuverlässig. Daumen hoch."

Landscape

Bettina Holz

X-PERION Consulting AG

"Unsere Mitarbeiter sind in ganz Deutschland unterwegs, teilweise sogar europaweit. Eine regelmäßige Abstimmung ist hierbei unerlässlich. Mit GTC central-meeting sind wir völlig unabhängig: jeder wählt sich einfach per Telefon ein. Da spielt es keine Rolle, wo der Kollege gerade ist. Über internationale Einwahlnummern erfolgt die Einwahl auch aus dem Ausland zu geringen Kosten."

Landscape

Edgar Augel

Stadtmobil carsharing AG

"Mit dem Template-Editor erstellte E-Mailings sehen super aus. Außerdem passen sich unsere Mailings jetzt mit Responsive Design immer an die Größe der Empfangsgeräte an. Toll."

Landscape

Roland M. Rupp

Schweizerischer KMU Verband

"Der Service bei GTC lässt keine Wünsche offen. Auch die einfache Bedienung, die Auswertung und die mehrsprachige Menüführung sind top."

Landscape

Christof Korr

CreditPlus Bank AG

"Eine SMS wird nicht übersehen. Deshalb ist ein SMS-Mailing unsere Wahl, wenn es darauf ankommt. Mit GTC haben wir dazu einen Profi gefunden, mit dem alles super läuft. Und was uns besonders wichtig ist: Alle Daten bleiben in Deutschland."

Zu unseren zufriedenen Kunden zählen
+49 (0)7 11 - 4 90 90-0