Während man in modernen Browsern mittlerweile ohne größere Probleme HTML5 und CSS3 einsetzen und davon ausgehen kann, dass Chrome, Firefox und Internet Explorer beziehungsweise Edge alles so anzeigen, wie man es erwartet, sieht das bei E-Mail-Programmen und -Diensten ganz anders aus. Denn jedes Programm hat seine ganz eigenen Vorstellungen davon, wie es HTML und CSS darstellt. Doch mit „Foundation for Emails 2“ bekommst du ein umfangreiches Framework, welches komplexe HTML-E-Mails ermöglicht, die in den meisten Programmen und Webmail-Oberflächen funktionieren.
Starter-Kit mit elf Vorlagen
„Foundation“ ist ein beliebtes Framework für responsive Weblayouts, welches nun auch in einer aktuellen Version für responsive HTML-E-Mails erschienen ist. „Foundation for Emails 2“ gibt es in einer CSS- und in einer SASS-Version. Hast du das Starter-Kit heruntergeladen, findest du elf verschiedene Vorlagen für HTML-E-Mails.
Vorschau auf die elf E-Mail-Vorlagen
Darunter findest du relativ einfach gehaltene Vorlagen sowie mehrspaltige Vorlagen für verschiedene Zwecke. So gibt es zwei spezielle Newsletter-Vorlagen mit großer Header-Grafik und wahlweise ein- oder zweispaltigem Text. Darüber hinaus findest du Vorlagen für häufige Anlässe wie Bestellbestätigungen und klassische Passwort-vergessen-Mails, in denen üblicherweise ein Link zum Zurücksetzen des Passwortes verschickt wird.
Zwei Vorlagen für Newsletter
Alle Templates besitzen eine externe CSS-Datei, in der alle Styles hinterlegt sind. Das Layout der Vorlagen ist absichtlich schlicht gehalten, so dass ein schlanker und übersichtlicher CSS-Quelltext vorhanden ist, der den eigenen Vorstellungen leicht angepasst werden kann.
Einfaches Tabellenlayout
Viele E-Mail-Programme und Webmail-Oberflächen verstehen leider nicht viel von moderner Webentwicklung. Und während es bei den Browsern eine recht übersichtliche Auswahl gibt, ist die Vielfalt der E-Mail-Programme und -Dienste so groß, dass man sich auf einen sehr kleinen gemeinsamen Nenner einigen muss.
Vorlagen für Bestellungen und vergessenes Passwort
Dieser besteht darin, dass HTML-E-Mails wie in den guten alten Zeiten vor CSS und ganz weit vor HTML5 als Tabellen ausgezeichnet werden. Dabei wird das Layout nicht komplett in einer Tabelle ausgezeichnet. Vielmehr kommen ineinander verschachtelte Tabellen zum Einsatz, die mit verschiedenen Klassen versehen werden.
Die oberste Tabelle erhält die Klasse „body“. Sie definiert den eigentlichen Bereich der E-Mail. Es folgen Tabellen mit der Klasse „container“, die einen Abschnitt innerhalb der Mail darstellen. Für mehrspaltige Tabellen fügst innerhalb einer Container-Tabelle eine weitere Tabelle mit der Klasse „row“ ein. In dieser kannst du dann Spalten mit unterschiedlicher Breite definieren.
12-er Raster für responsive Darstellung
Da „Foundation“ auf einem 12-spaltigen Raster basiert, hast du die Möglichkeit, deine Spalten entsprechend flexibel zu unterteilen. So sind zwei-, drei-, vier- und sechsspaltige Layouts problemlos möglich. Dank unterschiedlicher Klassen für große und kleine Fenster- beziehungsweise Displaygrößen entscheidest du sehr einfach, wie die Spalten bei kleinen und großen Auflösungen darzustellen sind.
Für ein dreispaltiges Layout vergibst du dann zum Beispiel bei großen Auflösungen die Klasse „large-4“ an deine Tabellenzellen. Sollen diese bei kleinen Auflösungen einspaltig dargestellt werden, vergibst du zusätzlich die Klasse „small-12“.
Vordefinierte Buttons, Farben und Schriften
Um die Arbeit mit „Foundation for Emails 2“ zu vereinfachen, stehen dir viele vordefinierte Komponenten zur Verfügung. So fügst du beispielsweise ohne großen Aufwand eigene Buttons in deine E-Mail ein. Neben primären und sekundären Buttons gibt es spezielle Buttons, um Warnungen und erfolgreiche Aktionen kenntlich zu machen.
Verschiedene vordefinierte Buttons
Auch für Überschriften, Fließtexte und Links gibt es entsprechende CSS-Vorgaben, die du natürlich anpassen und überschreiben kannst. Zur Ausrichtung von Texten und Bildern stellt die „Foundation for Email“ Klassen zur Verfügung, die es dir ermöglichen, Text links- oder rechtsbündig beziehungsweise zentriert auszurichten und Bilder links oder rechts mit Text umfließen zu lassen.
Inline-Styles erstellen
Neben der Notwendigkeit, das Layout einer HTML-E-Mail als Tabelle auszuzeichnen, gibt es eine weitere Besonderheit zu beachten. Viele E-Mail-Programme interpretieren Stylesheets nur, wenn sie inline – also per „style“-Attribut direkt im HTML-Element – definiert sind.
Da die Inline-Auszeichnung aufwendig ist und nachträgliche Änderungen gerade bei langen Mails sehr mühsam sind, stellt „Foundation“ dir einen „Web-Inliner“ zur Verfügung. Hierbei kopierst du sowohl deinen HTML- als auch deinen CSS-Quelltext in je ein Textfeld. Per Klick erstellt dir der „Web-Inliner“ einen HTML-Quelltext, bei dem alle im externen Stylesheet definierten Eigenschaften als Inline-Styles in den HTML-Quelltext übernommen wurden.
Web-Inliner erstellt HTML-Quelltext mit Inline-Styles
Außerdem werden bei dem ausgegebenen Quelltext alle Zeilenumbrüche und Leerzeichen entfernt, sodass trotz Inline-Styles ein möglichst schlanker Quelltext entsteht. Diesen Quelltext kannst du nun als HTML-E-Mail versenden.
Lediglich die Media-Queries-Regeln werden in einem eigenen „<style>“-Element definiert, da sich diese nicht per „style“-Attribut inline auszeichnen lassen. Allerdings wird das „<style>“-Element nicht wie üblich im HTML-Kopf, sondern im Body platziert, denn einige E-Mail-Programme entfernen alle Stylesheets-Blöcke aus dem HTML-Kopf.
Breite Kompatibilität mit gängigen E-Mail-Programmen und Webdiensten
„Foundation for Emails 2“ läuft in vielen E-Mail-Programmen – und das nicht nur in aktuellen Versionen. So unterstützt das Framework zum Beispiel Microsoft Outlook in den Versionen 2000 bis 2016. Apple Mail wird in den Versionen 7 und 8 unterstützt. Auch die mobilen Standard-E-Mail-Anwendungen von Android 4.4 und iPhone 5 und 6, sowie iPad werden unterstützt – dazu die Gmail-App für Android.
Da viele ihre E-Mails über Webmail-Oberflächen öffnen, werden diese für die Dienste Gmail, Office 365, Outlook.com und Yahoo! Mail unterstützt – jeweils für Chrome, Firefox und den Internet Explorer.
Insgesamt ist „Foundation for Emails 2“ sehr einfach in der Handhabung, dabei äußerst flexibel und individuell anpassbar. Die große Kompatibilität mit zahlreichen E-Mail-Anwendungen macht es zu einem gelungenen Framework für HTML-E-Mails.
(dpe)
