Comment utiliser le framework Foundation for Emails pour créer des conceptions d'e-mails réactifs

Il existe de nombreux outils marketing qui vous permettent de créer facilement des conceptions d'e-mails réactifs. Le fait est que vous préférerez peut-être avoir plus de contrôle sur l'apparence de vos e-mails, et la meilleure façon de le faire est de les concevoir à partir de zéro. L'utilisation d'un framework tel que Foundation for Emails vous offre un excellent compromis. Vous aurez pas besoin de concevoir chaque composant à partir de zéro, mais vous avez le plein contrôle sur comment, quand et où les utiliser.

Dans cet article, nous allons d'abord expliquer ce que sont les frameworks de messagerie et comment ils peuvent vous aider. Ensuite, nous passerons à la discussion sur Foundation for Emails et sur la façon dont vous pouvez l'utiliser pour créer vos propres campagnes d'e-mail personnalisées et réactives. Mettons-nous au travail!

Que sont les frameworks de messagerie (et comment ils peuvent vous aider à créer de meilleurs e-mails)

Les frameworks vous obligent toujours à faire du codage, mais le processus est très simple pour les e-mails.

En général, un cadre est une compilation de pratiques, de fichiers et de codes conçus pour aider au développement de types de produits spécifiques. Considérez-les comme des blocs de code qui peuvent vous aider à créer des projets complexes plus rapidement, en vous permettant de ne pas réinventer la roue à chaque fois.

Il existe également des frameworks pour le courrier électronique, et c'est ce dont nous allons parler dans cet article. Explorons quelques-uns des avantages :

• Les éléments prédéfinis vous aident à concevoir des e-mails plus rapidement. De nos jours, la plupart des e-mails incluent des éléments au-delà des images et du texte, tels que des boutons et des menus. L'inclusion de ces éléments peut prendre du temps, mais un framework vous permet de les insérer et de les personnaliser instantanément.
• Réactif hors de la boîte. Alors que de plus en plus de personnes se tournent vers les appareils mobiles, vous devez vous assurer que vos e-mails s'affichent correctement sur leurs écrans. La plupart des frameworks modernes sont réactifs par défaut, ce qui signifie que vous avez une chose de moins à vous soucier.
• Les modèles peuvent vous aider à démarrer vos conceptions. De nombreux frameworks de messagerie modernes incluent une variété de modèles pour vous aider à créer rapidement des campagnes.

Comme vous pouvez le voir, le thème commun ici est que les frameworks vous permettent de gagner du temps. Il existe de nombreux cas où vous voudrez coder vos projets à partir de zéro, mais un framework qui peut vous permettre de faire les choses plus rapidement et avec une meilleure qualité vaut la peine d'être utilisé.

Une introduction au framework Foundation for Emails

Avant d'aller plus loin, il est important de noter qu'il existe deux frameworks Foundation disponibles en ligne - Foundation for Sites et Foundation for Emails - et nous allons nous concentrer sur ce dernier tout au long de cet article. Le principal argument de vente est sa grille réactive. Ce type de système n'est pas révolutionnaire, mais la popularité de Foundation repose sur sa facilité d'utilisation.

La prise en main du framework est assez simple (même si vous n'avez aucune expérience en codage), et vous pouvez choisir entre deux versions - l'une basée sur les feuilles de style en cascade (CSS) et l'autre sur Sass. Bien entendu, la version Sass vous permet de gagner encore plus de temps en éliminant le besoin de répéter des styles CSS de , mais il nécessite une certaine familiarité avec Node.js.

Enfin, Foundation for Email vous propose également de nombreux « modèles » tels que des boutons et des menus pour rendre votre travail encore plus simple. Pour gagner plus de temps, vous pouvez même utiliser un modèle au lieu de concevoir une mise en page à partir de zéro.

Principales caractéristiques:

• Utilise une grille réactive pour créer des campagnes d'e-mail modernes.
• Offre une version CSS ou Sass du framework.
• Vous permet de tirer parti des modèles pour ajouter rapidement des éléments communs à vos e-mails.
• Utilise des mises en page pour rationaliser encore plus le processus de création d'e-mails.

Prix ​​: Gratuit | Plus d'information

Comment utiliser Foundation for Emails pour créer des designs modernes (en 4 étapes)

Comme nous l'avons mentionné, il existe deux versions de Foundation for Emails. Pour cette section, nous allons utiliser la variante CSS car sa configuration nécessite moins de travail. De plus, les résultats finaux devraient se ressembler – tout ce qui change est la façon dont vous y arrivez.

Si vous voulez voir la version Sass en action ou en savoir plus sur son utilisation, vous pouvez commencer par ce super tutoriel.

Étape 1 : Télécharger la Fondation pour les fichiers de courrier électronique

Tout d'abord, rendez -vous sur la page de démarrage de Foundation for Email et cliquez sur le bouton Télécharger le kit de démarrage sous le sous-titre CSS Version :

Une fois que vous avez le fichier, décompressez-le et extrayez son contenu dans un nouveau dossier. A ce stade, votre dossier doit contenir un fichier index.html et deux sous-dossiers - un pour votre CSS et un autre pour vos modèles.

Pour l'instant, lancez votre éditeur de texte préféré et ouvrez le fichier index.html avec. Cela devrait être assez simple, mais nous allons résoudre ce problème dans un instant.

Étape #2 : Familiarisez-vous avec le système de grille

La réactivité de Foundation for Email est basée sur son système de grille flexible. Si vous créez un e-mail à partir de zéro, vous souhaiterez créer votre propre grille pour segmenter les sections de votre e-mail. Pour ce faire, nous allons utiliser trois composants différents : des conteneurs, des lignes et des colonnes.

Ouvrez le fichier index.html de votre Fondation dans votre éditeur de texte et faites défiler jusqu'à la section du corps :

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Comme vous pouvez le voir, le corps de votre e-mail contient un tableau prédéfini que nous n'allons pas toucher. Au lieu de cela, nous allons simplement ajouter nos propres éléments de grille à la section où il se lit <!– Votre grille va ici –> . Commençons par le code que vous devez utiliser pour vos conteneurs :

<table class="container">
<tr>
<td></td>
</tr>
</table>

Maintenant, ajoutons une ligne là-dedans :

<table class="row"> <tr> <th></th> </tr> </table> 

Enfin, nous pouvons diviser cette ligne en colonnes :

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Gardez à l'esprit que chaque ligne comprend jusqu'à 12 colonnes. Le code ci-dessus indique à votre client de messagerie qu'il doit afficher votre contenu en utilisant les 12 colonnes complètes sur les petits écrans tels que les appareils mobiles ( small-12 ), mais n'en occuper que six sur les ordinateurs de bureau ( large-6 ).

Le problème est que si votre e-mail s'affiche sur un grand écran, il y a six colonnes vides, nous devons donc ajouter une deuxième table pour y remédier :

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Comme vous pouvez le voir, les deux colonnes sont fondamentalement les mêmes. Cependant, ils ont deux classes différentes, les premières colonnes et les dernières colonnes . Ceux-ci indiquent à votre client de messagerie quelles sont les première et dernière colonnes de votre ligne, et les colonnes intermédiaires n'ont pas besoin de les utiliser.

Si vous deviez maintenant ouvrir votre fichier index.html dans un navigateur, voici ce que vous verriez :

C'est assez nu, oui, mais la mécanique devrait être évidente à ce stade. Chaque e-mail peut avoir autant de lignes que vous le souhaitez et vous pouvez avoir jusqu'à 12 colonnes pour chaque ligne. Pour l'instant, continuez à jouer avec le système de grille jusqu'à ce que vous trouviez une mise en page que vous aimez, et utilisez des espaces réservés de texte pour vous aider à les identifier jusqu'à ce que vous commenciez à ajouter des éléments.

Étape 3 : Ajoutez des composants à vos e-mails

Foundation for Email packs dans de nombreux composants, et les plus couramment utilisés sont les boutons, les images d'arrière-plan et les sous-titres. Ils sont assez simples, alors examinons-les dans l'ordre. Pour ajouter des boutons, vous devrez utiliser le code suivant dans une ou plusieurs de vos colonnes :

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Ce code ajoute un simple petit bouton avec un fond vert à votre email. Les éléments clés ici sont les classes minuscules et les classes de réussite . Le premier régit la taille de votre bouton, et le second sa couleur. Au lieu d'ajouter toutes les classes disponibles ici, nous allons vous lier à la ressource officielle de la Fondation sur les boutons où vous pouvez les parcourir à votre guise.

Passons maintenant aux images d'arrière-plan. Celles-ci sont un peu plus délicates, car vous devez utiliser la classe wrapper pour qu'elles occupent toute la largeur de votre ligne et leur attribuer un arrière-plan spécifique à l'aide de CSS :

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Enfin, parlons des sous-titres. Ce sont les plus simples du groupe - tout ce que vous avez à faire est d'envelopper votre texte dans les balises requises :

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

C'est aussi simple que ça! L'utilisation de ces trois éléments suffit pour créer de beaux e-mails. Le secret, bien sûr, est de les styliser avec CSS à votre guise, ce qui nous amène à notre dernière étape.

Étape n°4 : stylisez votre e-mail à l'aide de CSS

Certains clients de messagerie (tels que Microsoft Outlook) suppriment certaines des balises de style de vos fichiers HTML. Ceci est fait pour que les e-mails soient rendus sans aucun problème, ainsi que pour supprimer les menaces de sécurité potentielles. Cependant, le résultat est que vos e-mails auront l'air assez ennuyeux à moins que vous n'ajoutiez votre CSS directement à votre HTML (ou l' inline ).

De cette façon, votre contenu et son style seront chargés dans un seul fichier, et ils devraient fonctionner parfaitement sur la plupart des clients de messagerie modernes. Voici à quoi ressemble un élément HTML avec CSS intégré :

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Cela peut devenir un peu compliqué, nous vous recommandons donc de travailler sur vos fichiers HTML et CSS séparément, puis d'utiliser un outil tel que Foundation Inliner pour les combiner pour vous. Collez simplement votre code, cliquez sur un bouton et il s'occupera du reste pour vous.

Une fois que vous avez votre fichier HTML en ligne, vous pouvez le tester à l'aide d'un outil de marketing par e-mail, ce qui est toujours une bonne idée, avant de l'envoyer à vos abonnés.

Conclusion

Il existe de nombreuses façons de créer des e-mails fonctionnels et réactifs. Cependant, l'utilisation d'un framework tel que Foundation for Emails est une excellente option si vous recherchez de la flexibilité. Il vous permet soit de concevoir des e-mails à partir de zéro à l'aide de composants prédéfinis, soit d'accélérer le processus à l'aide de modèles. Indépendamment de ce que vous choisissez, cela devrait réduire considérablement votre temps passé à créer des e-mails.

Pour récapituler, voici les quatre étapes dont vous avez besoin pour créer des e-mails modernes avec Foundation for Emails :

1. Téléchargez les fichiers du framework.
2. Familiarisez-vous avec le système de grille.
3. Utilisez des composants pour vos e-mails.
4. Stylisez votre e-mail en utilisant CSS.

Vous avez des questions sur l'utilisation du framework Foundation for Emails ? Demandez dans la section commentaires ci-dessous!

Image miniature de l'article par Faberr Ink / shutterstock.com.