Responsive E-Mails: Besser mit Fluid-Hybrid oder Media-Queries?

Grund sind die unüberblickbar vielen Mailclients, die heute genutzt werden - und vor allem der unangenehme Eigenheit, HTML und CSS nur sehr eingeschränkt zu unterstützen.

Jeder, der schon einmal das Feedback von Empfängern bekommen hat "der Newsletter ist zerschossen", kennt das Problem. Jeder, der selbst eine HTML-Mail gecodet hat, auch.

Dieser Ärger ist nicht neu, im Gegenteil. Inzwischen sollte es also doch Methoden geben, die

1. den Aufwand für responsive Mails in Grenzen halten,
2. weitgehende Gestaltungsfreiheit erlauben und
3. korrekte Darstellung auf allen Mailclients sicherstellen.

Doch gibt es die tatsächlich?

Media-Queries für responsive E-Mails

Der Ansatz, mit dem man responsive HTML-Seiten für die Darstellung im Browser erstellt, sind media queries.

Mit diesen kann ich direkt die Eigenschaften des aktuellen Ausgabegerätes abfragen. Also zum Beispiel die Breite des Bildschirms.

Leider unterstützen einige wichtige Mailclients keine media queries, allen voran die Gmail-App, die Android Outlook Exchange-App und Windows Phone.

Deshalb sollten media queries immer nur ein vorhandenes HTML-/CSS-Mail verbessern, nicht deren Basis sein. Sonst sieht die Mail auf den Clients, die keine media queries unterstützen, unmöglich aus.

Fluid Hybrid als Rettung?

In den letzten Monaten hat sich mehr und mehr ein neuer Ansatz durchgesetzt:

Fluid-Hybrid
Woher kommen die komischen Begriffe?

• Das fluid, also flüssig, bezieht sich darauf, dass man keine festen Vorgaben für die Größe der Elemente macht. Statt dessen werden diese prozentual definiert. Man gibt also nur an, wie viel der Größe des aktuellen Screens das Element einnehmen soll.
  
• Das hybrid kommt daher, dass zusätzlich noch die maximale Breite des Elements festgelegt wird.

Einerseits sind wir mit der Methode also flexibel/flüssig, andererseits begrenzen wir diese Flexibilität etwas - daher ist es eine Mischung von flexibel und fest - eben fluid hybrid.

Manche nennen diesen Ansatz auch spongy, weil er eine gewisse Festigkeit hat, aber dennoch etwas flexibel ist - wie der Schwamm (englisch sponge).

Tabellen für Outlook

Die Gestaltung von HTML mit Hilfe von Tabellen ist eine Technik, die in den 90er-Jahren für Webseiten üblich war. CSS hat das für Webseiten überflüssig gemacht - aber durch die mangelhafte CSS-Unterstützung einiger Mailprogramme sind wir bei HTML-Mails immer noch auf Tabellen angewiesen.

Beim Fluid-Hybrid-Design legt man eine Tabelle an, die nur für Outlook gedacht ist. Sie wird so formatiert, dass andere Programme sie ignorieren. (Ein weiterer hybrider Aspekt - einerseits nutzen wir eine Tabelle, andererseits eine flexible Formatierung für alle anderen Mailclients.)

Letztlich gibt es damit also für alle Mails zwei grundlegende Darstellungen:

1. Auf großen Bildschirmen wird der Inhalt zentriert angezeigt, in der Breite beschränkt (meist auf 600 Pixel).
2. Auf kleineren Screens füllt die Mail 100 Prozent der verfügbaren Breite.

Das ist sicher noch nicht elegant und auch hier muss man jedes Design auf so vielen Geräten und Mailclients wie möglich testen (z.B. mit E-Mail-Client-Vorschau von Evalanche    ).
Doch ist die Technik des fluid hybrid-Designs diejenige, mit der sich heute mit dem geringsten Aufwand die zuverlässigsten Ergebnisse erreichen lassen.