Votre première construction d'e-mail réactif avec Foundation for Emails

Dans ce tutoriel, nous allons jeter un premier regard sur le framework Foundation for Emails de ZURB. Nous allons l'installer, expliquer ce qu'il y a dans le paquet, puis construire nous-mêmes un simple email réactif.

Nous avons élaboré un guide complet pour vous aider à apprendre Foundation, que vous soyez débutant ou que vous souhaitiez explorer des sujets plus avancés Fondation Apprendre.

Cadres

Au cours du dernier semestre, je me suis familiarisé avec deux ou trois cadres et passe-partout pour créer des emails HTML. Avant ces outils, le développement réel était toujours difficile à tester et à corriger, sans oublier de rendre les e-mails réactifs.

Le codage des courriels HTML est un animal très différent de celui de la création d’une page Web normale. C'est comme voyager dans le passé jusqu'en 1999. Nous devons utiliser des mises en page basées sur des tableaux, des styles en ligne et répondre aux besoins des clients tels que les applications de bureau (Thunderbird, Outlook) et les courriers Web (Gmail, Yahoo).. 

Pour résoudre ce casse-tête et obtenir des résultats fiables, nous avons deux options:

• suivez les tutoriels de Nicole Merlin
• choisissez un framework de messagerie HTML moderne comme Foundation for Emails

Pour les besoins de ce tutoriel, nous allons évidemment passer à la deuxième option.

Qu'y a-t-il dans la boite?

L'email ZURB empiler fournit une solution tout en un pour la création d'e-mails.

Cela consiste en:

• Gorgée: un système de compilation pour automatiser le workflow
• Inky HTML: pour convertir du code simple en tables
• Toupet: le préprocesseur CSS populaire
• Inliner: pour aligner les styles
• NavigateurSync: un serveur de test pour le rechargement
• Compression d'image: pour la compression automatique des images

Foundation for Emails surveillera le codage, la compilation, l’alignement, puis la minimisation du résultat, prêt pour la production. Il a été largement testé dans de nombreuses applications de bureau et mobiles; Pour la liste complète de ce qui est supporté, vous pouvez vérifier la section compatibilité. Vous pouvez également vous référer au guide officiel lorsque vous débutez avec le cadre..

Mise en place du projet

Pour tout ce processus, j'utilise Windows 10, la version 64 bits. Si vous utilisez un autre système, vous pourrez toujours suivre.

La pile fonctionne avec Node.js et son gestionnaire de paquets npm. Pour installer Foundation for Emails, nous ouvrons notre terminal, puis nous utilisons la commande suivante:

npm installer --global foundation-cli

Ensuite, nous changeons de répertoire dans un dossier de projet (où que vous vouliez exécuter ce projet) en utilisant cd [chemin du dossier du projet]. Dans le répertoire du projet, la commande suivante devrait être:

fondation new - emails de cadre

On vous demandera «Comment s'appelle le projet? (pas d'espaces) ", où vous entrez un nom de projet, appuyez sur Entrée, puis restez assis pendant un moment pendant l'installation des dépendances du projet.

Démarrez vos moteurs

Nous sommes maintenant configurés avec tous nos fichiers de projet, nos modules de nœud sont installés et nos composants Bower sont installés. Pour démarrer la structure et le serveur, accédez au dossier du projet et utilisez la commande suivante:

montre de fondation

L'adresse Web par défaut (généralement http: // localhost: 3000 /) s'ouvrira directement dans votre navigateur dès que vous le ferez. Vous verrez un tout nouveau modèle de courrier électronique, prêt à l'emploi:

Src

Dans votre dossier de projet, vous trouverez (entre autres) un src dossier. Dans ce dossier, vous trouverez:

• les atouts, styles et images
• mises en page, mises en page d'emballage
• des pages, codes HTML de base
• partiels, parties HTML réutilisables

La page d'index peut être trouvée ici: src / pages / index.html

Remarque: si vous ne connaissez pas bien Node.js, vous pouvez consulter notre guide du débutant simplement pour renforcer ce que nous faisons:

Des grilles

Foundation utilise une grille de douze colonnes. Il convient de noter que l’espace horizontal dans un courrier électronique est généralement étroit, d’autant plus que de nombreux messages ont été déplacés vers le mobile, il est donc recommandé d’utiliser une ou deux colonnes. Pour plus de meilleures pratiques, consultez le guide suivant:

Foundation for Emails utilise Inky, son propre nouveau langage de modélisation, qui vise à supprimer le balisage complexe que les tableaux causent inévitablement. Voici les balises Inky pour nous aider à baliser les grilles:

• : l'élément wrapper
• : le wrapper pour les lignes
• : l'élément de colonne pour le contenu actuel

Nous pouvons également spécifier la taille de la grille avec les attributs petit et grand.

Ceci est une section d'une colonne.

  Première colonne  

Ce balisage simple, une fois compilé, nous donne ce qui suit:

 
 
 
 
 
 
 
 
 
 
Première colonne
 
 
 
 
 
 
 
 
 
 
 

Cet exemple distinct est une ligne de deux colonnes (chaque colonne se réduit en 12 de largeur aux petits points de rupture, la largeur étant de 6 pour les grandes).

  Première colonne Deuxième colonne  

En substance, nous en utiliserons un élément, avec une série de  et  éléments pour construire notre structure.

Construire notre email

Maintenant que nous comprenons l'utilisation de base d'Inky, changeons le sujet de l'email. Dans pages / index.html nous pouvons modifier les détails suivants en haut du document. Si vous avez déjà utilisé YAML, vous connaissez peut-être cette forme de «matière première»:

--- sujet: Tournoi d'été de Cake Poker ---

Zone de logo

Pour insérer une image de logo, nous utilisons HTML standard balisage dans un . Le chemin d'accès à l'image du logo est relatif au document, dans le dossier des actifs. J'ai également ajouté une ligne vide au-dessus de la photo en insérant une autre avec un vide :

Texte d'introduction

J’ai ensuite ajouté deux autres rangées dans le , avec un texte d'introduction, un contenu de bienvenue et un grand prix.

  
Notre cher fan de poker! Nous avons des nouvelles pour vous: le championnat d'été arrive bientôt. Si vous souhaitez participer, veuillez vous inscrire avant le 5 juin.!
     
Le grand prix est 1 million d'euros et durée de vie 10% de rakeback en ligne!
  

Plus d'images

J'ai ajouté une autre image à propos de la ville du tournoi, à nouveau par rapport au document..

Remarquez le la balise est enveloppée dans un

  
Détails sur le tournoi
     
Londres, Royal Hall of Gamblers
   
L'endroit idéal pour un championnat de poker moderne.
     
Markuee Hotel
   
Hébergement 4 étoiles **** à proximité avec service complet et excellente cuisine.
     
Massage
   
Un service gratuit pour tous les joueurs du tournoi.
     
Buy-in
   
500 + 50 GBP
   

Version compilée

Au fur et à mesure que vous construisez et changez des éléments, votre projet sera continuellement actualisé dans le navigateur. Le code compilé se trouve dans le projet. dist répertoire, les fichiers principaux étant index.html et css / app.css.

Construire le courrier électronique fini

Lorsque nous sommes satisfaits de ce que nous avons, nous pouvons utiliser cette commande pour aligner le code avec des styles et compresser le tout:

npm run build

Après le processus de construction, ce que vous trouverez ensuite dans le dist Le dossier est une version prête à l'emploi, adaptée à la production mais certainement pas à l'édition.!

Conclusion

Vous avez terminé votre première session en créant un email HTML réactif avec le framework Foundation for Emails! Nous avons fait une mise en page simple, avec une et deux colonnes, des images, du texte enrichi et un registre bouton à la fin.

Inspirez-vous de la catégorie Modèles de courrier électronique sur Envato Market. Peut-être concevoir, construire, puis soumettre votre propre!