Hinweis: Dieser Beitrag stammt aus dem Jahr 2015 und beschreibt den damaligen Stand der Technik. Die Grundprinzipien gelten weiter, Werkzeuge und Unterstützung durch E-Mail-Programme haben sich aber weiterentwickelt.

Warum responsives Emaildesign wichtiger als je zuvor ist. Wenn Sie Ihre Emails regelmäßig mit einem internetfähigen Handy lesen, dann wissen Sie, dass diese Erfahrung von großartig zu schrecklich umschwenken kann. Sie können also entweder lernen wie man css responsive Codes aufsetzt – oder Sie können den einfacheren Weg wählen – mit ActiveTrail.

Mobile Erreichbarkeit ist ein beliebtes Thema im Email Design, was auch Sinn macht – Das Öffnen von Emails auf mobilen Endgeräten ist seit 2011 um mehr als 400% gewachsen. Wir haben bereits darüber gesprochen wie wichtig die mobile Erreichbarkeit für Emailhändler ist und das Optimieren von Kampagnen für mobile Zuhörer.
Viele Händler sind sich nicht im Klaren welche Strategien eigentlich existieren. Wenn man die Möglichkeit des Nichtstuns außer Acht lässt, so kann das Emaildesign in etwa drei Kategorien untereilt werden:

• Skalierbares Design
• Flüssiges Design
• Responsives Design

Um den geeigneten Ansatz zu wählen ist es wichtig, dass man die Unterschiede zwischen den einzelnen Ansätzen versteht.

Skalierbares Design

Beginnen wir mit dem, womit viele Emailhändler derzeit arbeiten: skalierbares Design. Skalierbares Design kann als jedes Design bezeichnet werden, dass auf dem Desktop und dem mobilen Endgerät funktioniert und einen Code nutzt um die Tabellen oder Bildgrößen anzupassen oder Inhalte anzuzeigen bzw. Zu verstecken. Während wir das Wort „skalierbar“ nutzen um diesen Ansatz zu beschreiben, so sind Sie eventuell vielleicht bereits über die Begriffe mobilbewusst, mobilfreundlich, agnostisch oder mobil first gestoßen.

Skalierbare Designs sind in der Regel am einfachsten umzusetzen. Da Emails nicht automatisch die Breite von Tabellen oder Bildern auf unterschiedlichen Geräten anpassen und auch keine CSS-Media-Queries nutzen (hierzu kommen wir später) um Inhalte auszutauschen oder die Textgröße zu ändern, so ist es wichtig, dass eine Reihe von Techniken genutzt werden um den Inhalt von skalierbaren Emails sowohl auf dem Desktop als auch auf dem mobilen Endgerät anzeigen zu können.

• Eine einfaches (nur eine Spalte) Layout, welches sich schön verkleinert.
• Großer Text, der auch auf kleinen Bildschirmen gut lesbar ist.
• Große, touch-freundliche Aufforderungen.

Flüssiges Design

Zwischen dem skalierbaren und responsiven Design liegt das sogenannte “flüssige“ Design. Flüssige Emails nutzen eine prozentuale Größe um Breiten von Tabellen und Bildern an die Bildschirmgröße anzupassen – ähnlich zu “flüssigen” Layouts bei Webseiten. Flüssige Emails sind den skalierbaren sehr ähnlich, beispielsweise, dass sie das Layout oder den Inhalt einer Email nicht gezielt vergrößern, sondern den Vorteil haben, dass Inhalt „fließt“ um den Bildschirm auszufüllen. Aus diesem Grund funktionieren flüssige Designs in der Regel am besten für Text lastige Layouts, da es weniger Kontrolle darüber gibt, wie sich Text und Bilder zueinander verhalten.

Responsive EMail

Responsive Emails umfassen alles von skalierbaren und flüssigen Emails und bauen für mehr Kontrolle hierauf durch CSS-Media-Queries auf. Während Media Queries auch genutzt werden um flüssige Layouts zu erhalten, ist es doch eine einfache Umsetzung von Media Queries – nichts zu fortgeschrittenes. Responsive Emails auf der anderen Seite nutzen Media Queries um das Layout von Emails zu verändern, den Text, Bilder und Knöpfe anzupassen und in manchen Fällen, um Inhalte zwischen dem Desktop und der mobilen Ansicht zu verstecken oder auszutauschen.

Welche Strategie ist die beste?

Sobald Sie die Unterschiede zwischen skalierbarem, flüssigem und responsivem Emaildesign verstanden haben, können Sie bestimmen welche Strategie am besten für Sie uns Ihr Team funktioniert. Wenn es Ihnen an Wissen oder Ressourcen fehlt um eine responsive Kampagne umzusetzen, so sind die skalierbare als auch die flüssige Strategie ein guter Weg um Emails für mobile Nutzer zugänglich zu machen. Wenn Sie aber die Zeit haben vollständig responsiv zu gehen, dann kann die zusätzliche Kontrolle genau das sein, was Sie von Ihren Wettbewerbern abhebt.