Responsive Design für eMails – leider keine Lösung

Wer kennt das nicht: der aufwendig gestaltete Newsletter sieht auf dem Smartphone ziemlich mau aus – im schlimmsten Fall ist er sogar ganz unlesbar. Fast kein Empfänger kennt hier Gnade, und so landen solche Mails direkt im Papierkorb. Ist die Wunderwaffe Responsive Design die Lösung solcher Probleme?


Responsive Design nutzt CSS3-Regeln (@media-queries), um für unterschiedliche Geräte unterschiedliche Gestaltungen anzuzeigen. Die Schriftgröße wird zum Beispiel geändert, die Pixelmaße von Bildern, die Anordnung der Elemente auf der Seite, die Größe von Buttons oder es werden einzelne Elemente gleich ganz versteckt.

Für Websites ist das heute Stand der Technik, alle einigermaßen aktuellen Browser für Desktop und mobile unterstützen Responsive Design. Doch leider, leider gilt das für eMail-Clients keineswegs. Unter Android bietet z.B. der mit ausgelieferte Gmail-Client bis heute keine Unterstützung für die @media-queries. Das heißt, dass ein großer Teil der mobilen Nutzer die responsiv gestalteten Mails nicht korrekt dargestellt bekommt.

Man macht sich also die Mühe einer aufwändigen Programmierung von Resposive Designs und am Ende sieht die Mail doch nicht überall gut aus. Ist das Budget begrenzt, ist oft die pragmatische Lösung die, bei klassischem Fluid Design zu bleiben.

Sie geben also die Größen im HTML-Template prozentual an, so dass die Mail bei allen Fenstergrößen im gleichen Verhältnis dargestellt wird. Wenn Sie dann noch darauf achten, dass die Bilder und vor allem die Buttons bei allen möglichen Größen noch gut erkennbar sind, dann haben Sie schon sehr viel gewonnen. Am besten nutzen Sie auch nur ein einspaltiges Layout und platzieren die Call-to-action linksbündig und möglichst weit oben, so dass sie immer ins Auge springen.

Wir müssen also leider noch etwas warten, bis die meisten mobilen Mail-Clients Responsive Design unterstützen und wir daher diese Technik als Standard nützen können. Wie es um die Verbreitung der @media-queries in mobilen Mailclients steht, lesen Sie hier: Responsive email support




Keine Kommentare möglich.