Anzeige
Anzeige
Software & Entwicklung
Artikel merken

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

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.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige

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

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
12 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
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
andy

JayMeeLee YMMD! :D

Antworten
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
John

Ich verlange, dass das Internet sofort abgeschaltet wird!

Antworten
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
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
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
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
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
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
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

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige