Bootstrap est le framework sur lequel reposent un très grand nombre de sites et d'applications web, et tôt ou tard chacun d'eux doit envoyer des e-mails : un message de bienvenue après l'inscription, un lien de réinitialisation du mot de passe, une confirmation de commande. Nos modèles d'e-mail gratuits pour projets Bootstrap vous offrent des designs assortis à l'apparence de votre site, avec le type de balisage que les boîtes de réception comprennent réellement.
Pourquoi les modèles d'e-mail Bootstrap demandent un autre HTML
Une page Bootstrap s'appuie sur flexbox, les media queries et une feuille de style chargée depuis un fichier ou un CDN. Les clients de messagerie traitent ces trois éléments très différemment des navigateurs :
- Pas de feuilles de style liées. Gmail, Outlook.com et Yahoo Mail ignorent un fichier CSS lié depuis l'e-mail : les classes Bootstrap arrivent donc dans la boîte de réception sans aucun style derrière elles.
- Pas de flexbox dans Outlook classique. Outlook pour Windows affiche les e-mails avec le moteur de rendu de Word, qui ne prend en charge ni flexbox, ni les éléments flottants, ni le positionnement : une grille Bootstrap s'y effondre.
- Peu de place pour le CSS. Gmail limite la taille d'un bloc de styles dans un e-mail, et la feuille de style Bootstrap complète est plusieurs fois plus volumineuse que cette limite.
C'est pourquoi les développeurs d'e-mails construisent leurs mises en page avec des tableaux et des styles en ligne. Blocks fait ce travail pour vous : les modèles sont assemblés à partir de structures en tableaux dont les styles sont écrits dans les éléments eux-mêmes, incluent des correctifs pour Outlook et s'adaptent aux écrans de téléphone dans les clients de messagerie qui le permettent.
Utiliser un modèle Blocks dans un projet Bootstrap
- Choisissez un modèle et ajustez les couleurs, les polices et le logo pour que l'e-mail semble faire partie de votre site.
- Exportez le résultat en fichier HTML ou en archive ZIP avec les images, ou copiez le code directement depuis l'éditeur.
- Enregistrez le HTML dans votre projet comme modèle d'e-mail et remplacez les noms, les liens et les détails de commande par les variables de votre moteur de templates.
- Envoyez-le via votre serveur SMTP ou une API d'e-mail comme Amazon SES ou SendGrid, et ajoutez une version en texte brut pour les lecteurs dont l'application de messagerie n'affiche pas le HTML.
Si vous préférez écrire vos e-mails à la main avec des classes de type Bootstrap, il existe un projet open source distinct, Bootstrap Email, qui compile ce balisage en tableaux et en styles en ligne. Il est développé indépendamment de l'équipe Bootstrap et nécessite une étape de compilation sur votre machine. Blocks prend plutôt la voie visuelle : vous concevez dans le navigateur et obtenez immédiatement un HTML finalisé.
Les e-mails qu'envoie chaque site Bootstrap
- E-mails de bienvenue qui accueillent les nouveaux utilisateurs et les orientent vers la première étape dans votre produit.
- E-mails de réinitialisation de mot de passe avec un seul bouton clair et une courte note indiquant quand le lien expire.
- Confirmations de commande pour les boutiques et les sites de réservation qui ont besoin d'un récapitulatif d'achat inspirant confiance.
- E-mails d'onboarding pour les applications web qui présentent les fonctionnalités un message à la fois.
Conseils pour les modèles d'e-mail dans les projets web
- Hébergez les images publiquement. Les URL d'images absolues se chargent dans toutes les boîtes de réception, alors que les chemins relatifs copiés depuis votre application ne fonctionnent pas.
- Testez dans plus d'un client. Vérifiez au moins Gmail, Apple Mail et Outlook pour Windows avant de mettre en production un nouveau modèle.
- Nommez clairement les variables. Des espaces réservés lisibles indiquent au prochain développeur exactement quelle valeur va où.
- Gardez les modèles dans le dépôt. Stockez le HTML des e-mails à côté du code qui les envoie, pour que chaque modification passe en revue de code.
Pour approfondir les choix de balisage, lisez notre comparatif des frameworks d'e-mail et le guide sur les e-mails HTML versus texte brut. Si votre application envoie beaucoup d'e-mails système, le panorama des services d'e-mail transactionnel vous aidera à choisir un fournisseur.
Obtenez des modèles d'e-mail gratuits pour vos projets Bootstrap
Choisissez un modèle ci-dessus, adaptez son style à votre thème Bootstrap et exportez un HTML propre pour votre application. Si votre équipe envoie aussi des newsletters, le même design peut être exporté directement vers Mailchimp ou HubSpot.