Des modèles d'e-mails qui s'affichent correctement dans chaque boîte de réception
Gjethe conçoit et code des modèles d'e-mails pour les newsletters, les campagnes, les flux automatisés et les e-mails transactionnels, pour des plateformes comme Klaviyo, Mailchimp, HubSpot, Brevo, Customer.io et Postmark. Les modèles sont responsives, testés sur les principaux clients de messagerie et en mode sombre, accessibles et construits à partir de modules que votre équipe peut réorganiser sans casser la mise en page.
- Première consultation gratuite
- Devis écrit pour votre projet
- Paiements échelonnés par étapes, avec souplesse
En un coup d'œil
- Platforms
- Klaviyo, Mailchimp, HubSpot, Brevo, Customer.io
- Types
- Newsletters, campagnes, flux, transactionnels
- Test
- Principaux clients, appareils et mode sombre
- Editing
- Blocs modulaires que votre équipe peut réutiliser
Definition
Qu'est-ce que le design de templates d'e-mails?
Le design de modèles d'e-mails consiste à créer des mises en page réutilisables pour les e-mails, codées pour s'afficher correctement sur les clients de messagerie, les appareils et les réglages d'affichage.
L'e-mail est impitoyable. Gmail, Outlook, Apple Mail et des dizaines d'autres clients affichent le HTML différemment, le mode sombre inverse les couleurs de façon imprévisible et les images sont souvent bloquées par défaut. Un modèle qui paraît parfait dans l'éditeur peut casser pour une grande part des abonnés. Les bons modèles sont conçus pour ces limites et testés avant que quiconque ne les envoie.
À qui s'adresse-t-elle ?
Marques e-commerce
Modèles de campagnes et de flux pour les lancements, les paniers abandonnés et les e-mails d'après-achat.
Entreprises SaaS
E-mails de prise en main, de mise à jour produit et transactionnels fidèles à votre produit.
Éditeurs de newsletters
Modèles lisibles pour des éditions régulières.
Équipes marketing
Un système modulaire pour que les campagnes soient rapides à construire et toujours fidèles à la marque.
Ce qui est inclus, et ce que vous conservez
Ce qui est inclus
- Audit des modèles et captures d'écran de boîtes de réception
- Système de design pour l'e-mail : typographie, couleur, espacement
- Blocs modulaires : en-tête, bandeau principal, produits, texte, appel à l'action, pied de page
- Mises en page responsives pour mobile et ordinateur
- Gestion du mode sombre
- Balisage accessible et texte alternatif
- Codage dans le langage de modèles de chaque plateforme
- Tests d'affichage sur les principaux clients de messagerie
- Modèles d'e-mails transactionnels
- Documentation pour votre équipe
Ce que vous recevez
Remis en fin de mission. À vous pour toujours.
- Designs dans Figma
- Modèles codés installés dans votre plateforme
- Une bibliothèque de modules réutilisables
- Résultats des tests d'affichage
- Un court guide pour construire des e-mails avec les modules
Pourquoi le code des e-mails est différent
Les pages web peuvent s'appuyer sur du CSS moderne. Pas les e-mails : certaines versions d'Outlook utilisent le moteur de rendu de Word, de nombreux clients suppriment les styles et la prise en charge des fonctions de mise en page varie largement. Des modèles d'e-mails fiables utilisent des schémas testés, des styles en ligne et des solutions de repli pour que le message survive au client le moins performant utilisé par vos abonnés.
Nous testons chaque modèle sur les principaux clients de bureau, web et mobiles avant la remise, et corrigeons les problèmes client par client.
Concevoir pour le mode sombre
Beaucoup de gens lisent leurs e-mails en mode sombre, et les clients le gèrent différemment : certains laissent les couleurs intactes, d'autres les inversent en partie, d'autres complètement. Les logos disparaissent sur des fonds sombres, et le texte sombre sur des images transparentes devient illisible. Nous concevons en tenant compte de cela, avec des versions de logos, des fonds d'image et des choix de couleurs qui tiennent dans les deux modes.
Ensemble de modèles typique
| Template | Utilisée pour |
|---|---|
| Newsletter | Contenu éditorial régulier |
| Campagne | Promotions, lancements et annonces |
| Bienvenue et prise en main | Premiers e-mails après l'inscription |
| Panier ou navigation abandonnés | Rappels avec contenu produit dynamique |
| Transactionnel | Reçus, suivis d'expédition, réinitialisations de mot de passe |
Modulaire, pour que votre équipe construise vite
Au lieu de quelques modèles figés, nous construisons un ensemble de modules qui se combinent en n'importe quel e-mail : variantes de bandeau principal, grilles de produits, blocs de texte, témoignages, boutons et pieds de page. Votre équipe construit une nouvelle campagne en empilant des modules dans l'éditeur de la plateforme, et le résultat reste fidèle à la marque et testé.
E-mails accessibles
Les e-mails accessibles sont plus faciles à lire pour tout le monde. Nous utilisons du vrai texte plutôt que du texte dans des images, un contraste suffisant, des tailles de police lisibles, un texte alternatif pertinent, un ordre de lecture logique et des textes de lien descriptifs, et nous définissons la langue de l'e-mail pour que les lecteurs d'écran le prononcent correctement.
Avant le premier envoi
- Modèles testés sur les principaux clients et en mode sombre
- Les images ont un texte alternatif et l'e-mail fonctionne avec les images désactivées
- Liens et paramètres de suivi vérifiés
- Désabonnement et informations du pied de page corrects
- Nom de l'expéditeur et texte d'aperçu rédigés
- SPF, DKIM et DMARC configurés pour votre domaine d'envoi
Contenu dynamique et personnalisation
Les plateformes d'e-mailing modernes peuvent insérer des produits, des noms, des détails de commande et des recommandations dans chaque message. Les modèles doivent gérer chaque cas avec élégance : noms de produits longs, images manquantes, un produit ou douze. Nous construisons ces blocs avec le langage de modèles de votre plateforme et les testons avec de vraies données avant le lancement.
Pour les publics multilingues, nous planifions des mises en page avec de la place pour un texte allemand plus long ou un texte anglais plus court et mettons en place des versions linguistiques dans la plateforme.
Comment fonctionne le design de templates d'e-mails, étape par étape
Chaque étape produit un résultat clair que vous pouvez relire. Le calendrier est convenu dans votre devis.
- 1
Audit
E-mails actuels, plateforme, marque et modèles dont vous avez besoin.
- 2
Design
Modules et modèles conçus dans Figma pour validation.
- 3
Construire
Codés dans votre plateforme avec des zones et des modules modifiables.
- 4
Tester
Vérifications d'affichage sur les clients, les appareils et en mode sombre.
- 5
Handover
Modèles installés, documentés et expliqués à votre équipe.
Les outils, et ce qui détermine votre devis
Le prix dépend de votre projet et est convenu dans votre devis. Voici ce qui le fait varier.
| Facteur | Pourquoi c'est important |
|---|---|
| Nombre de modèles et de modules | Plus de mises en page et de modules demandent plus de design et de codage. |
| Platform | Certaines plateformes demandent plus de travail pour rendre les modules modifiables. |
| Contenu dynamique | Les flux de produits et la personnalisation ajoutent de la logique et des tests. |
| Langues | Les modèles multilingues demandent de la place pour le texte de chaque langue. |
| Périmètre des tests | Plus de clients et d'appareils à prendre en charge signifient plus de tests. |
| Domaine | Tools |
|---|---|
| Platforms | Klaviyo, Mailchimp, HubSpot, Brevo, Customer.io, Postmark, SendGrid |
| Code | MJML, HTML codé à la main, Liquid et langages de templates des plateformes |
| Test | Litmus, Email on Acid, vérifications sur appareils réels |
| Design | Figma |
Erreurs courantes à éviter
Ce qui tourne le plus souvent mal, et comment un bon projet l'évite.
Concevoir comme une page web
Les mises en page qui reposent sur du CSS moderne cassent dans plusieurs clients de messagerie.
Du texte dans les images
Il disparaît lorsque les images sont bloquées et est illisible pour les lecteurs d'écran.
Ignorer le mode sombre
Les logos et le texte peuvent disparaître lorsque les clients inversent les couleurs.
Pas de test avant l'envoi
Un e-mail cassé atteint tous les abonnés en même temps.
Questions fréquentes
Pour quelles plateformes d'e-mailing construisez-vous ?
Klaviyo, Mailchimp, HubSpot, Brevo, Customer.io, Postmark, SendGrid et d'autres qui acceptent du HTML sur mesure.
Notre équipe pourra-t-elle modifier les modèles ?
Oui. Nous construisons des zones et des modules modifiables pour que votre équipe puisse créer des e-mails dans l'éditeur de la plateforme sans toucher au code.
Testez-vous dans Outlook ?
Oui. Nous testons sur les principaux clients de bureau, web et mobiles, y compris les versions d'Outlook que vos abonnés utilisent.
Pouvez-vous concevoir des e-mails transactionnels ?
Oui : reçus, informations de commande et e-mails de compte pour votre plateforme ou service d'envoi.
Rédigez-vous aussi les textes des e-mails ?
Les modèles comprennent une structure provisoire. Les textes de campagnes et les flux relèvent de nos services d'e-mail marketing et de rédaction.
Comment gérez-vous le mode sombre ?
Nous concevons et testons pour les principaux comportements du mode sombre, avec des versions de logos et d'images qui restent visibles.
Pouvez-vous corriger nos modèles existants ?
Oui. Nous les auditons, listons les problèmes d'affichage et soit les corrigeons, soit les reconstruisons.
Combien de révisions sont incluses ?
Deux cycles de révision sur les designs et sur les modèles codés.
Comment le design de modèles d'e-mails est-il chiffré ?
Il est chiffré selon le nombre de modèles et de modules, la plateforme et tout contenu dynamique.
Pouvez-vous construire des modèles pour plusieurs langues ?
Oui. Nous planifions des mises en page adaptées aux langues plus longues et plus courtes et mettons en place des versions pour l'anglais, l'albanais, l'allemand et d'autres.
Vérifiez-vous la délivrabilité ?
Nous vérifions les bases techniques, comme les enregistrements SPF, DKIM et DMARC et le poids des modèles. La délivrabilité continue fait partie de notre service d'e-mail marketing.
Pouvez-vous ajouter notre flux de produits aux e-mails ?
Oui. Nous construisons des blocs produit qui récupèrent des articles depuis votre boutique ou votre flux de catalogue, testés avec de vrais produits.
Pouvez-vous migrer nos modèles vers une nouvelle plateforme ?
Oui. Nous reconstruisons les modèles et les modules dans le format de la nouvelle plateforme et les testons avant votre premier envoi.
Les modèles fonctionneront-ils sur téléphone ?
Oui. Les modèles sont responsives et testés sur les applications de messagerie mobiles courantes, où la plupart des e-mails sont désormais ouverts.
Pouvez-vous faire correspondre nos e-mails à notre site web ?
Oui. Nous reportons la typographie, les couleurs et les composants de votre site web dans l'e-mail, adaptés à ce que les clients de messagerie peuvent afficher.
Services associés
Design de templates d'e-mails par secteur
Envoyez des e-mails qui s'affichent correctement partout.
Dites-nous ce dont vous avez besoin. Vous recevez une évaluation honnête, un plan clair et un devis écrit. La première consultation est toujours gratuite.
- Et ensuite ?
- 1Vous nous dites ce dont vous avez besoin
- 2Nous nous efforçons de répondre sous 24 heures avec des questions
- 3Vous recevez un devis écrit pour votre projet