Name/Branche
PLZ/Ort
DasÖrtliche
DasTelefonbuch
GelbeSeiten

Mit Responsive Design Mails für unterschiedliche Geräte anpassen

Responsive Design Mails

Ob zu Hause am PC, im Büro auf dem Laptop oder unterwegs mit Smartphone und Tablet: E-Mails sind unsere ständigen Begleiter. Damit die Arbeit mit der elektronischen Post von jedem Gerät aus gleichermaßen leicht von der Hand geht und Informationen bestmöglich dargestellt werden, muss eine Mail über ein Responsive Design verfügen.

Unterschiedliche Bildschirmgrößen und Navigation

Was man von Webseiten kennt, gilt auch für E-Mails: Abhängig davon, mit welcher Hardware ich auf mein Postfach zugreifen möchte, ändert sich die Art und Weise, wie Nachrichten angezeigt werden können. Zum einen liegt das an der Bildschirmgröße, damit verbunden aber auch mit der Lesemotorik: Während man am PC scrollt, bieten die Wischbewegungen bei Smartphones und Tablets eine bequemere Navigation. Ist bei reinen Text-Mails die Zugriffsart eigentlich unerheblich, ändert sich das schlagartig, wenn auch Grafiken und HTML-Elemente angezeigt werden sollen. Insbesondere für Unternehmen stellt sich die Frage, wie beispielsweise ein Newsletter jeweils optimal auf den Geräten erscheinen soll. Responsive Design ist dabei ein Sammelbegriff für sämtliche programmiertechnische wie inhaltliche Maßnahmen, die dazu dienlich sind.

Auch das Leseverhalten berücksichtigen

Die Vorteile liegen auf der Hand: Nutzer lesen Newsletter nur, wenn sie einfach und bequem zu konsumieren sind. Eine angepasste Darstellung verhindert unter Umständen, dass versendete Mails direkt gelöscht werden. Die Effizienz eines Mail-Verteilers wird so erhöht. Unterschiedliche Devices sind allerdings nicht nur an materielle Bedingungen gekoppelt. Auch das Leseverhalten an sich variiert. Das Smartphone als typisches Gerät für unterwegs erfordert eine dementsprechende inhaltliche Orientierung: kurze Textpassagen, aussagekräftig platzierte Überschriften. PC-Nutzer haben in der Regel auch mit größeren Blöcken keine Probleme.

Smartphone ist nicht gleich Smartphone

Bewerkstelligt wird das Responsive Design über sogenannte Media Queries. Dabei handelt es sich um CSS3-Befehle, die über Abfragen verschiedene Ausgabemedien unterscheiden können. CSS (Cascading Style Sheets) regeln daher nicht nur die Farben oder die Typografie einer Datei, sondern unter anderem auch deren Auflösung. Ebenso können Hyperlinks oder das Grundlayout definiert werden. So erlauben die breiten Bildschirme von PCs und Laptops eine mehrspaltige Ansicht. Für Smartphones kommen dafür einspaltige Darstellungen infrage. Mitunter ist es sinnvoll, unter bestimmten Gerätetypen separat zu unterscheiden. Eventuell vergrößert bei Smartphone A eine andere Anordnung der Navigation und der Textelemente als bei Smartphone B den Nutzerkomfort, obwohl die Bildschirmgröße identisch ist. Bei Smartphones und Tablets ist außerdem zu beachten, dass der Nutzer auch bei schlechten Lichtverhältnissen die Inhalte konsumieren kann. Eher hinderlich sind dabei kaum zu unterscheidende Farben, Kontraste hingegen erleichtern das Lesen. Für Devices mit Touchscreen ist zu gewährleisten, dass etwaige Buttons und Checkboxen auch groß genug sind, um vom Nutzer ohne Mühe getroffen werden zu können.

Vorsicht bei Drittanbieter-Clients

Die dynamische Anpassung der Mail über Media Queries hängt jedoch nicht nur vom Device ab. Selbst eine umfangreiche Programmierung kann umsonst gewesen sein, wenn der Mail-Client des Nutzers darauf nicht reagiert. Die vorinstallierten Mail-Anwendungen unterstützen meist Responsive Design, aber auch nicht immer. Schwieriger wird es sogar noch bei Drittanbietern, gerade im App-Bereich (zum Beispiel die Gmail- oder Yahoo Mail- App). Das bedeutet, dass dieselbe Nachricht auf einem Gerät in unterschiedlichen Apps einmal optimiert und einmal unangepasst angezeigt wird. Allgemein ist festzuhalten, dass das Responsive Design umso ausführlicher codiert werden muss, je umfangreicher die Elemente der Mail sind. Es ist zumindest eine Überlegung wert, ob ein schlichterer Newsletter, der eine höhere Kompatibilität mit den Devices und Clients aufweist, ebenso für die Kommunikation geeignet wäre wie ein aufwendigerer, der schrittweise Device für Device und Client für Client programmiert werden muss.

Last but not least: Ausgiebig testen

Unerlässlich ist es, den fertigen Newsletter vor dem Versenden an die Kunden selbst ausgiebig zu testen. Unausgereifte Mails wirken nicht professionell, was unabhängig von der Branche von den Kunden unterschiedlich abgestraft wird. Selbst eine einmal für alle Newsletter festgelegte Grundprogrammierung kann zu kleineren optischen Fehlern führen, wenn bestimmte Details, die bis dato vielleicht nicht relevant waren, nicht hinreichend definiert wurden.