TECH NEWS

Ink, compagnon emailing passe-partout et responsive ?

Ecrire, formater et concevoir un email accessible sous toutes les plateformes (Outlook, Lotus Note, Gmail…) et bien sûr responsive est l’une des plus grosses angoisses des services de market/com et des développeurs web. Et si finalement Ink était le Saint-Graal tant attendu pour vos emailing !

May 7, 2015

Ecrire, formater et concevoir un email accessible sous toutes les plateformes (Outlook, Lotus Note, Gmail…) et bien sûr responsive est l’une des plus grosses angoisses des services de market/com et des développeurs web. Et si finalement Ink était le Saint-Graal tant attendu pour vos emailing !

Carte d’identité

On peut donc se demander si Ink, dans la même lignée de son ainé Foundation, suivra un chemin identique comme framework d’emailing responsive, open-source et multiplateformes. Grand challenge dans la communauté front-end, comme ZURB l’annonce sur la page d’accueil.Conçu par la société ZURB, la première release de Ink est apparue le 7 novembre 2013 sur GitHub. C’est à partir de cette date qu’il rejoint la famille de plateformes complètement responsive telle que Foundation, le framework front-end. Depuis son apparition en 2011, Foundation s’est imposé comme une valeur sûre dans le développement front-end, à l’instar de son concurrent Bootstrap.

Quickly create responsive HTML emails that work on any device & client. Even Outlook.

« Créer rapidement des emails HTML responsive fonctionnant sur tous les appareils et clients. Même Outlook »

Capture d’écran 2015-05-07 à 23.08.28

Ink en bref

Ayant été amené à utiliser Ink dans le cadre de nos campagnes d’emailing, nous résumons ci-dessous les points qui nous semblent important à retenir.

Pour commencer à utiliser Ink, nous vous conseillons de lire attentivement la section « Getting started » dans la page « Docs ». Elle a l’avantage de bien résumer les difficultés et problématiques liés à la création d’un email compatible multiplateformes. La lecture du reste de la documentation nous semble nécessaire également pour bien appréhender les différentes possibilités d’utilisation du framework.

Pour faire vos premiers pas avec l’outil, il vous sera nécessaire de télécharger le dossier contenant le document ink.css (tout le CSS relatif au design de Ink), un boilerplate.html (fichier .html de départ composé du <head> et du <body>) et deux fichiers dexemple de template emailing.

La création d’un template d’emailing Ink revient à constituer deux parties :

  • La première dans le <head> avec tous les styles CSS ;
  • La seconde dans le <body> avec votre structure HTML composé de tableaux imbriqués (seule structure HTML lisible par toutes les plateformes emails à l’heure actuelle).

En utilisant la documentation, vous serez guidé pas à pas et aurez l’occasion de créer chaque élément du template sans difficulté. Si vous devez constituer des tableaux, toutes les informations nécessaires sont dans la documentation et chaque élément y est bien détaillé, notamment la structure HTML qui se conçoit avec des .class tout comme dans Foundation.

Ink permet d’adapter vos emails à la majorité des clients email (Outlook, Gmail, iOS, Android…). Cependant, une restriction est à noter : le système de grille n’a pas un bon rendu avec Gmail pour Mobile (iOS et Android).

On vous le dit !

L’utilisation d’Ink nécessite de la rigueur dans les différentes opérations à réaliser. En effet, pour avoir une structure HTML performante et valide sur toutes les plateformes, le code doit être bien formaté notamment avec le concept d’imbrication de tableau dans des tableaux qui peut vite devenir difficilement lisible. Une simple balise mal fermée ou l’omission d’un tag finira par compromettre toute la composition de l’email.

La prise en main de l’outil peut paraitre fastidieuse mais la documentation constitue une aide précieuse et réelle dans l’atteinte de cet objectif. La lecture se fait rapidement et il n’y a pas beaucoup de matière à assimiler. De plus, si vous êtes familier avec le framework Foundation, vous n’aurez aucune difficulté à assimiler tous les concepts d’utilisation des class.

Pour résoudre les différents problèmes de compatibilité avec les clients d’email, Ink propose l’outil « Inliner ». Cet outil permet de copier/coller tout le code HTML et de le récupérer avec les CSS « Inline » dans les balises HTML. C’est notamment très utile pour la compatibilité avec le client Gmail, puisque ce dernier supprime tout le contenu de la balise <style></style>. En ajoutant le code CSS « Inline », vous aurez la garantie que votre email s’affichera de manière appropriée avec chacun des clients mails.

Au sein d’Agile Partner, nous avons été amenés à utiliser Ink dans Mailchimp et avons pu constater que le template était resté tel que nous l’avions conçu et qu’il s’adaptait correctement lors de sa consultation avec les différents clients email des plateformes mobiles et desktop. Si vous aussi avez fait l’expérience de Ink, votre avis nous intéresse. N’hésitez pas à nous en faire part sur notre blog !

[button color=”blue” link=”https://bitbucket.org/agilepartnerteam/template-email/src“]Télécharger le template réalisé par Agile Partner[/button]

Watch video

In the same category