242014Mrz

Responsive E-Mail-Design

Responsive E-Mail-Design

wenig Aufwand, großer Effekt

responsive-designHaben Sie Ihren Newsletter schon einmal auf Smartphones oder Tablets getestet? Und Sie sind mit der Darstellung zufrieden? Glückwunsch! Denn erst knapp ein Fünftel der versendeten Newsletter sind für mobile Endgeräte optimiert – und das, obwohl schon 40% der Newsletter mobil abgerufen werden.

Doch was ist ein „mobil-optimiertes Design“, auch „responsive E-Mail-Design“ genannt? Unter responsive E-Mail-Design versteht man, dass sich Newsletter an die Gegebenheiten des empfangenden Geräts, z.B. an die Displaygröße, anpassen. Das heißt, dass beispielsweise Bilder und Texte gut lesbar sind, man nicht links/rechts scrollen muss und Links ohne Probleme angeklickt werden können.


Jetzt stellt sich nur noch die Frage: Wie erreicht man ein responsive E-Mail-Design?
Die Antwort lautet: Mit Media Queries.

Media Queries, der Schlüssel für ein responsives Design

Das Kunststück ist es, das Mailing auf jedem Endgerät gut aussehen zu lassen und bedienbar zu machen. Media Queries sind CSS3-Befehle, die die Eigenheiten jedes Endgeräts berücksichtigen.

Beim Laden des Mailings fragen sie die Merkmale des Endgeräts ab und passen es so an, dass es optimal dargestellt wird. Zentraler Parameter ist die Fenster- oder Bildschirmbreite des Endgeräts. Je nach vorgefundener Pixelzahl in der Breite ändert sich das Layout und damit die Anordnung der Inhalte.

Was können Media Queries beeinflussen?

  • Mithilfe von Media Queries werden Tabellenbreite, Schriftgröße und Textumbrüche einfach dem Endgerät angepasst. So erhält jeder Abonnent Ihres Newsletters auch auf dem kleinsten Display einen zusammenhängenden, gut lesbaren Text.
  • Die Bilder können je nach Art des Endgeräts mitgezoomt oder ganz ausgeblendet werden.
  • Mit Media Queries lassen sich mehrspaltige Layouts an die Fensterbreite anpassen. Die Spalten werden dementsprechend untereinander angeordnet oder ausgeblendet, sodass kein Links-/Rechts-Scrollen nötig ist.
  • In der Ansicht für mobile Endgeräte können mithilfe von Media Queries die Weblinks als klickbare Buttons dargestellt werden. So kann der Leser auch mit Daumen oder Zeigefinger unkompliziert navigieren.

Mehr Tipps finden Sie in unserem kostenlosen Whitepaper zu Responsive E-Mail-Design.

Whitepaper downloaden


Sie sollten auf alle Fälle Ihre Newsletter regelmäßig auf verschiedenen Endgeräten testen, ob die Darstellung Ihren Wünschen entspricht!

Tipp: Nutzen Sie dazu auch die Vorschaufunktion des EMM mit den Einstellungen Desktop, Tablet (Portrait/Landscape), Mobile (Portrait/Landscape) oder die Inbox-Vorschau, die Ihnen für verschiedenste Geräte und Browser anzeigt, wie Ihr Mailing dort tatsächlich ankommt.

Beitrag kommentieren

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.