31.032014

Responsive E-Mails mit Ink

Über 50% aller E-Mails werden mittlerweile auf einem Mobile-Device geöffnet, gleichzeitig sind die Anforderungen an den Code einer robusten E-Mail alles andere als leichte Kost und "schön" ohnehin nicht. Grund genug sich ein Framework zu suchen, dass die Arbeit erleichtert. Mit Ink haben wir zuletzt sehr gute Erfahrungen gemacht.

Der Workflow

Nach dem Download von Ink sieht der Workflow vor, das man zunächst wie gewohnt die Styles von Ink nach seinen Wünschen anpasst, oder eigene Styles hinzufügt. Ink bietet im Anschluss ein Web-Tool namens "Inliner" an, das Styles verarbeitet und diese als Inline-Styles den Elementen mit entsprechender Klassenzuordnung einfügt. Zusätzlich sorgt der Inliner für Robuste E-Mails, indem z.B. Prefixe oder !importend-Ergänzungen hinzugefügt.

3 Dinge die uns an Ink gefallen haben

1. Das Grid

Ink bietet verschiedene Grid-Systeme an. Darunter ein Responsive-Grid sowie ein festes Grid für Unterteilungen einzelner Bereiche sowie ein Block-Grid mit dem sich Layouts in jeweils gleichgroße Blöcke unterteilen lassen, die ein Umbruchverhalten besitzen. Die Grid-Systeme ersparen viel Ärger den das layouten mit Tabellen sonst erzeugt.

2. Styles für Grundelemente

Buttons, Panels und Responsive Hide/Show Klassen. Die Wichtigsten täglich benötigten Elemente sind vorhanden, und besitzen ein angenehm schlichtes Styling. Verändern oder überschreiben ist einfach.

3. Templates

4 Templates decken eine große Menge von gern genutzten E-Mail-Layouts ab und bieten eine gute Basis für den Kickstart. Gleichzeitig sind die Templates einfach genug um Raum für Ideen zu lassen ohne das man aufwendig viel ausbauen muss.