Ted Goas aus New Jersey weiß, wovon er spricht. Folgerichtig nennt er sein jüngstes Projekt Cerberus, eine Reminiszenz an den dreiköpfigen Höllenhund aus der griechischen Mythologie. Obschon Cerberus im Original eher die Aufgabe hat, das Tor zur Unterwelt zu bewachen, hält Goas den Namen dennoch für sprechend. Denn dieser Cerberus hier muss sich in der dreiköpfigen Hölle der Desktop-, Mobil- und Outlook-E-Mail-Clients behaupten. Cerberus ist eine Sammlung von übergreifend funktionierenden Elementen, realisiert in der Form zweier Templates.
Cerberus: Zwei Templates, Sie alle zu knechten
Ted Goas ist der Entwickler des Frameworks Responsive Email XX, ursprünglich ersonnen, die gleiche Aufgabe zu erledigen, für die er jetzt den Höllenhund an den Start bringt. Nach eigenen Angaben wurde Responsive Email XX Ted selber zu kompliziert, so dass er es am Ende selber nicht mehr nutzen mochte. Naheliegenderweise beschloss er, das Projekt noch einmal komplett zu überdenken. Das Ergebnis dieses Denkprozesses ist Cerberus.
Cerberus ist weit einfacher und beschränkter, dabei aber vollauf ausreichend, um die Aufgabe, responsive HTML E-Mails damit zu erstellen, zu meistern. Die zwei Templates, die Cerberus letztlich ausmachen, unterscheiden sich in einem wesentlichen Punkt. Während das eine auf Media Queries setzt, um responsiv zu sein, ist das andere komplett fluid erstellt. Nachdem damit beide Templates responsiv funktionieren, hängt es im konkreten Fall eher davon ab, wem Sie E-Mails schicken wollen.
Der größte Nachteil der Media Queries-Variante besteht darin, dass sie mit iOS Gmail, Android Gmail und Android Mail 4.4 schlicht nicht funktioniert. Sie kooperiert perfekt mit nahezu allen anderen Clients, etwa den Web-Vertretern von Gmail, Yahoo, AOL Mail und Outlook, aber auch mit Desktop-Clients wie Apple Mail, Outlook und Thunderbird und grundsätzlich sogar mobilen Clients wie iOS Mail und Android Mail to 4.3. Hier können Sie die Demo sehen.
Dann aber, wenn der Leser Gmail unter iOS oder Android oder Android Mail 4.4 einsetzt ist Schluss. Android Mail 4.4 erlaubt die Umwandlung von Tabellen-Spalten in Zeilen nicht, while es {display:block !important;} nicht unterstützt, während die Gmail-Apps den <style>-Tag gleich ganz übersehen.
Wollen Sie nun einen Newsletter für Outlook-Enthusiasten versenden, dürfte diese Einschränkung für Sie eher kein Problem sein. Denn Sie könnten wohl mit einiger Berechtigung davon ausgehen, dass Outlook-Enthusiasten Ihren Newsletter im favorisierten Outlook-Client lesen werden. Wenn sich Ihre E-Mails jedoch zu einem Gutteil an mobile Nutzer richten, wird wohl das zweite Template interessanter für Sie sein.
Das zweite Template verhält sich komplett fließend (fluid). Das sieht super auf kleinen Bildschirmen, aber weit weniger toll auf sehr großen Bildschirmen aus. Das Problem mit großen Bildschirmen relativiert sich dadurch etwas, dass man auch auf diesen Auflösungen E-Mail innerhalb irgendeines Clients lesen wird, der die eigentliche E-Mail in einem Teilfenster auf Größe bringt, entsprechend also die Breite reduziert. Das ist auf jeden Fall so in Outlook, es sei denn, Sie gehören zu den Personen, die die Mail aus dem Vorschaufenster heraus als Vollbild öffnen lassen. Etwas, das ich während der vielen Jahre meiner aktiven Nutzung des klobigen Microsoft-Clients nie getan habe.
Das fließende Template setzt die Breiten prozent-basierend, so dass das Layout in der Horizontalen schrumpft, je kleiner das Zieldisplay ist. Alle CSS-Styles sind inline. Hier können Sie die Demo sehen.
Cerberus ist komplett kostenfrei verwendbar. Es steht unter der MIT-Lizenz, was es Ihnen ermöglicht, private, wie kommerzielle Projekte damit abzuwickeln. Der Download erfolgt via Github.
Links zum Beitrag
Tools und weitere Ressourcen
