Kategorien
Design E-Business HTML/CSS SEO & Online-Marketing UI/UX

Foundation for Emails 2: responsiv, einfach, universell

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.

foundation-for-email

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.

foundation-for-email_vorlagen
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.

foundation-for-email_newsletter
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.

foundation-for-email_order-password
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.

foundation-for-email_buttons
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.

foundation-for-email_inliner
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)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.