Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Software & Infrastruktur

Ink: Responsive E-Mail-Framework von den Foundation-Machern

    Ink: Responsive E-Mail-Framework von den Foundation-Machern

Ink: Responsive HTML-E-Mails für alle Clients (Screenshot: ZURB)

Ink ist ein Open-Source-Framework, das dir dabei helfen soll responsive HTML-E-Mails für alle Clients zu erstellen und soll dabei selbst stets problematische Software wie Outlook 2000 versorgen.

Ink löst ein langwieriges Problem, das Webworker mit der Gestaltung von E-Mails haben. Wer schon mal das Vergnügen hatte, ein HTML-E-Mail-Template erstellen zu dürfen, kennt die vielen technischen Probleme bei der Erstellung solcher Templates, die klassische Cross-Browser-Probleme alt aussehen lassen. Zwar kursieren im Internet zahlreiche Guidelines zu diesem Thema, die alltäglichen Probleme, bei der Erstellung von HTML-Emails, lösen diese aber nicht.

Der Umstand, dass 40 Prozent aller E-Mails über mobile Endgeräte abgerufen und gelesen werden, ist ein zusätzlicher Faktor, der weitere Herausforderungen mit sich bringt.

Zurb hat bereits einige der beliebtesten E-Mail Templates erstellt und fasst die Erfahrung und das Wissen mit Ink zusammen.

Lösung für HTML-E-Mail-Probleme: Ink

Ink Responsive eMail
Ink verspricht responsive E-Mails, die selbst in veralteten Clients funktionieren. (Screenshot: ZURB)

Ink ist für E-Mails das, was Bootstrap und andere Web-Frameworks für deine Seite sind. Nutze die Vorlagen von Ink, füge dein Branding und Design hinzu und innerhalb kürzester Zeit erhältst du eine responsive HTML-E-Mail um deren Kompatibilität du dir keine Sorgen zu machen brauchst. Hierfür hält Ink fünf Boilerplate-Templates für dich bereit.

Das wäre natürlich auch mit MailChimps E-Mail-Templates möglich. Mit Ink kannst du aber deinen eigenen Code erstellen und brauchst keine Sorgen zu haben, dass deine E-Mail falsch dargestellt wird.

Zu den Funktionen des Frameworks gehören Features wie ein Gridsystem, CSS-Klassen für Sichtbarkeit – damit du Elemente ein- bzw ausblenden kannst – sowie Buttons, die sich den Fähigkeiten des Clients anpassen – falls Bilder im Client deaktiviert sein sollten. Mit dem Ink-Inliner-Tool, dass das Stylesheet direkt in das HTML deiner E-Mail schreibt, werden deine Buttons auch in Webmail-Clients angezeigt.

Anders als bei der Entwicklung von Hand, kannst du mit Ink auch mit vergleichsweise geringen HTML-Kenntnissen schnell und unkompliziert zu guten Ergebnissen kommen. Wenn du mal nicht weiterkommen solltest, steht dir eine sehr detaillierte und gut nachzuvollziehende Dokumentation zur Verfügung.

Derzeit unterstützt Ink folgenden Clients:

  • Apple Mail (5 and 6)
  • Microsoft Outlook (2000, 2002, 2003, 2007, 2010, 2011, 2013)
  • Mozilla Thunderbird (3, latest)
  • Android Native (2.3, 4)
  • iOS Native (6, 7)
  • AOL Mail
  • Gmail
  • Yahoo! Mail
  • Outlook.com

Ink: Responsive E-Mails für alle

Die Befreiung von HTML-E-Mail-Design jenseits der 90er Jahre ist vielleicht ein wenig zu hoch gegriffen – vor allem da weiterhin auf Tabellen-Layouts gesetzt werden muss. Zurbs Ink schafft jedoch den Alltag von Webworkern einfacher zu machen, da sich nicht mehr der Kopf über veraltete Clients zerbrochen werden muss. Auf der offiziellen Seite von Ink erfährst du mehr.

Benutzt ihr Tools wie MailChimp oder Campaign Monitor – oder entwickelt ihr eure Newsletter selbst?

Finde einen Job, den du liebst zum Thema TYPO3, Webdesign

12 Reaktionen
RobertS
RobertS

Ganz interessant, aber scheint doch etwas kompliziert..
Ich empfehle, mal bei LianaMailer von Lianatech vorbeizuschauen (http://www.lianamailer.de)
Mit LianaMailer lassen sich responsive mobilfreundliche E-Mails ohne Programmierkenntnisse einfach mit dem Drag & Drop Editor erstellen. Zusätzlich gibt es umfangreiche Analysefunktionen, Abonnentensegmentierung und einen erstklassigen persönlichen Kundendienst. Achja, und alle gängigen E-Mail Clients werden natürlich auch unterstützt ;)

Beste Grüße,
Robert

Antworten
Stefan Müller
Stefan Müller

Einfach umzusetzen, wunderbar responsive in der Browser-Ansicht. Leider weder in Outlook noch in Aqua (Mobil, Android).
Das macht traurig... Oder ich muss noch üben :(

Antworten
wefwef
wefwef

Gähn, das Oulook 2007/2010 Problem ist ja nun kein neues. Da sollte man doch in den letzten Jahren genug Erfahrungen gemacht haben. Mittlerweile macht Gmail mehr Probleme.

Antworten
Mathis
Mathis

Ich sehe weniger Outlook 2000 ist ein Kindergeburtstag gegen 2007 und 2010, ich meine welcher *piep* kommt den ernsthaft auf die MS Word als Rendering Engine zu nehmen o.O

Antworten
involatus
involatus

Hmm... ein netter Anfang. Noch nicht wirklich ganz ausgereift.

Da setze ich momentan lieber auf http://www.campaignmonitor.com/templates/. Einfach und schnell

Antworten
Jonas
Jonas

Ausgiebig getestet und an sich eine feine Sache. Jedoch merkt man noch, dass Ink ein wenig in den Kinderschuhen steckt. Teilweise machen da vorgefertigte Templates von Mailchimp & Co eine bessere Figur.

Die Verschachtelungen sind teilweise sehr unübersichtlich, aber aufgrund des für viele Mailclients notwendige Tabellenlayout wohl nicht anders machbar.

Antworten
xxxfanta
xxxfanta

Niemand gehört geknechtet.. Ausser Microsoft, die in gefühlt jeder Outlook-Version die Rendering-Engine wechseln..

Es geht nicht um bunte Bildchen, aber um klar-strukturierte E-Mails. Ohne HTML müsstest du dann auch immer auf die Schriftart des E-Mail-Clients angewiesen sein..

Und textbasierte Webseiten? Ich bitte euch.. Selbst die benutzen Stylesheets um Schriften, Farben und Formen zu definieren..

Antworten
John
John

Ich verlange, dass das Internet sofort abgeschaltet wird!

Antworten
gadean
gadean

Dann gehört der eben auch geknechtet, was fällt denen bitte ein. Das textbasierende Websites wunderbar funktionieren weiß man doch schon länger - oh halt dafür müssen die Websites ja Inhalte die bieten die nicht einfach nur kopiert wurden o.ä. O.O

Antworten
andy
andy

JayMeeLee YMMD! :D

Antworten
JayMeeLee
JayMeeLee

Wahrscheinlich war das der selbe Typ, der dagegen war, dass das Web nur aus Text besteht. Was hat der sich nur dabei gedacht...

Antworten
gadean
gadean

Wer auch immer "HTML"-Emails eingeführt hat gehört geknechtet und verknüppelt. Ich versteh echt nicht wo darin der Nutzen liegen soll, in ner Mail will ich die Infos haben und keine bunten Bildchen. Fehlt nurnoch das irgendwelche Werbebanner eingeblendet werden :facepalm:

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen