Bonnes pratiques de design d’emails dans Klaviyo

Un e-mail bien conçu n'a pas juste l'air bon — il conduit à l'action. Pour les magasins Shopify utilisant Klaviyo, la différence entre un taux de clic de 1 % et un taux de clic de 4 % revient souvent aux décisions de conception : où vous placez le CTA, comment vous structurez la hiérarchie visuelle, si vous avez optimisé pour mobile, et comment utiliser efficacement la personnalisation.

Le présent guide couvre les principes de conception qui déplacent réellement l'aiguille sur la performance de Klaviyo par e-mail — avec des données, pas des avis.

Hiérarchie visuelle : guidez l'œil, conduisez le clic

La personne moyenne dépense environ 9 secondes de lecture d'un email. Dans ces 9 secondes, votre conception doit communiquer le message clé et rendre la prochaine action évidente.

Le carton F

Des études de suivi des yeux montrent que les gens scannent les courriels dans un modèle F : horizontalement en haut, puis en bas du côté gauche, avec des scans horizontaux occasionnels. Emails structurés autour de ce modèle voir Taux de clic plus élevés de 10 à 20 %.

Application pratique : placez votre contenu le plus important (en tête, image de héros, offre primaire) dans la bande horizontale supérieure. Placez votre CTA le long du sentier gauche-centre où l'œil repose naturellement.

La pyramide inversée

Pour les e-mails promotionnels, la structure pyramidale inversée fonctionne de façon puissante : commencer large avec un titre ou une image attirant l'attention, se limiter aux détails clés, et entonnoir à un seul bouton CTA. Cette structure guide naturellement les abonnés de la sensibilisation à l'action.

Whitespace est votre ami

Cramper plus de contenu dans un courriel n'augmente pas l'engagement — il diminue. L'espacement généreux entre les sections rend chaque élément plus impacté et facilite l'analyse de l'email sur mobile. Utilisez 24-48px entre les sections principales.

CTA Bouton Design qui convertit

Le bouton CTA est l'élément de conception le plus important dans tout courriel de marketing. Tout autre élément existe pour que l'abonné le clique.

Taille et cibles du robinet

Avec 60%+ d'emails ouverts sur mobile, vos boutons doivent être faciles à taper avec un pouce. Taille minimale: 44x44px (Directive d'Apple) ou 48x48px (Recommandation de Google). Les boutons les plus efficaces sont 48-56px haut avec généreux rembourrage horizontal.

Couleur et contraste

Les boutons CTA les plus efficaces ont un contraste élevé avec l'arrière-plan du courriel. La couleur spécifique compte moins que le rapport de contraste. Cela dit, la psychologie des couleurs joue un rôle :

• Rouge/Orange: Crée urgence et énergie. Meilleur pour les offres à temps limité, les ventes flash, et l'autorisation. Une étude a révélé que le passage du vert au rouge a augmenté les conversions de 21 %.
• Bleu: Communique la confiance et la fiabilité. Meilleur pour les offres d'abonnement, les actions de compte et les marques premium.
• Vert: Associé à « aller » et au progrès. Efficace pour « ajouter au panier », « acheter complètement » et les actions positives.

Copie CTA

Une copie spécifique, orientée vers l'action, surpasse le texte générique. "Shop the Sale" bat "Cliquez ici." "Get 20% Off" bat "En savoir plus". Le texte du CTA devrait indiquer à l'abonné exactement ce qui se passe quand ils cliquent.

Placement

Placez votre CTA primaire au-dessus du pli — visible sans défiler sur le bureau et mobile. Pour des courriels plus longs, répétez le CTA en bas. Entourez-le de 30-50px d'espace blanc afin qu'il ne se perde pas dans le contenu environnant.

Mobile-First Design (non négociable)

À 60% de tous les courriels sont ouverts sur des appareils mobiles. Si votre email n'est pas optimisé pour mobile, vous concevez pour la minorité de votre public.

• Schéma à une colonne: L'approche la plus sûre. Un e-mail de 600px monocolonne s'échelle parfaitement à mobile sans code responsive complexe.
• Longueur de la ligne objet: Gardez-le sous 30 caractères pour une visibilité complète sur mobile. Ce qui est coupé ne se lit pas.
• Taille de la police & #160;: Au moins 14px pour le texte du corps, 22px+ pour les titres. Tout petit est illisible sur les écrans de téléphone sans zoom.
• Largeur de l'image : Design à 600px, export à 1200px (2x pour les écrans rétine). L'image s'affiche à 600px sur le bureau et baisse sur mobile. Voir notre guide de taille complète.

Personnalisation qui entraîne des résultats

Générer des courriels personnalisés 6x taux de transaction plus élevés que les envois génériques. Klaviyo rend la personnalisation simple avec trois niveaux :

Niveau 1: Fusionner les étiquettes

Les bases — insérer le prénom de l'abonné dans la ligne d'objet ou l'accueil. Simple, mais efficace : les lignes de sujets personnalisées voient 23 % de taux d'ouverture plus élevés et 32 % de clics supplémentaires.

Niveau 2: Blocs de contenu dynamique

Afficher différents contenus à différents segments dans le même courriel. Par exemple, montrez aux clients VIP une offre exclusive d'accès précoce tandis que les abonnés réguliers voient la promotion standard. Les blocs conditionnels de Klaviyo le rendent possible sans créer de campagnes séparées.

Niveau 3: Recommandations concernant les produits

Les blocs d'alimentation produits de Klaviyo se peuplent automatiquement avec des produits basés sur l'historique de navigation et d'achat de chaque abonné. Ce niveau de personnalisation conduit à l'engagement le plus élevé car chaque abonné voit des produits pertinents à ses intérêts.

La réalité du rapport image-texte

Vous avez probablement entendu que les emails ont besoin d'un rapport texte/image 60/40 ou 80/20 pour éviter les filtres de spam. Ce conseil est largement dépassé.

Les filtres de spam modernes (Gmail, Yahoo, Microsoft) utilisent la réputation de l'expéditeur, l'authentification (SPF, DKIM, DMARC) et les signaux d'engagement pour déterminer le placement de la boîte de réception — et non les ratios d'image. La preuve : chaque grande marque de mode et de commerce électronique envoie des e-mails et atterrit dans des boîtes de réception primaires.

Cela dit, il y a des raisons pratiques d'inclure le texte en direct:

• Accessibilité : Les lecteurs d'écran peuvent seulement analyser le texte en direct, pas le texte dans les images
• Le rendu d'automne : Lorsque les images sont bloquées, le texte en direct s'affiche toujours
• Rechercher : Gmail index texte en direct pour la recherche de boîte de réception

Inclure au moins 400 caractères de texte en direct (votre zone de désabonnement et votre nombre de pied de page) et toujours ajouter un texte descriptif alternatif à chaque image. Pour plus de détails sur le moment où les courriels basés sur l'image ont un sens, lire notre comparaison image vs HTML.

Essai A/B : quoi tester en premier

Ne devinez pas ce qui fonctionne — testez - le. Mais testez stratégiquement. Voici l'ordre d'impact pour les éléments de conception des e-mails de test A/B :

1. Rubriques (impact le plus élevé sur les taux ouverts) — Longueur des tests, tonalité, personnalisation, emojis vs. pas d'emojis.
2. Boutons CTA — Tester la couleur, la copie, la taille et le placement. Même les petits changements peuvent déplacer les taux de clic de 20 à 40%.
3. Heure d'envoi — Tester des jours et des temps différents. La plupart des courriels de e-commerce sont les meilleurs du mardi au jeudi de 10h à 14h dans le fuseau horaire du destinataire.
4. Hero image vs. texte-première — Certains publics préfèrent les mises en page visuelles d'abord; d'autres répondent mieux aux dessins animés par des copies.
5. Longueur du courriel — Court et poinçonné vs. détaillé et informatif. Test qui entraîne plus de revenus, pas seulement plus de clics.

Règles d'essai: Modifier une seule variable par test. Utiliser au moins 1 000 receveurs par variation. Exécuter des tests pendant 3-7 jours pour tenir compte des comportements quotidiens. Mesurer les revenus (pas seulement les ouvertures) comme la mesure gagnante.

Questions fréquentes

Quelle est la meilleure largeur d'email pour Klaviyo?

600px. C'est la norme universelle pour tous les clients de messagerie. Les modèles par défaut de Klaviyo utilisent cette largeur. Gardez votre zone de contenu dans 540-560px pour laisser un rembourrage confortable.

Combien de CTA dois-je inclure?

1-3 CTA pour les courriels promotionnels. Un CTA primaire (l'action principale) et 1-2 CTA secondaires. Plus de 3 créent une paralysie de décision et réduisent les taux de clics globaux.

La personnalisation améliore-t-elle vraiment la performance?

Oui. Les lignes de sujets personnalisées stimulent les taux d'ouverture de 23 % et les clics de 32 %. Module de recommandations de produit dynamique 6x taux de transaction plus élevés.

Et le rapport image-texte ?

L'ancienne règle 60/40 est dépassée. Les filtres de spam modernes se concentrent sur la réputation de l'expéditeur, et non sur les ratios d'image. Inclure au moins 400 caractères de texte en direct pour l'accessibilité et toujours ajouter du texte alternatif aux images.

Combien de fois dois-je effectuer un test A/B?

Testez un élément par campagne. Privilégier les lignes d'objet, puis les boutons CTA, puis envoyer le temps. Utilisez plus de 1000 receveurs par variation et exécutez pendant 3-7 jours pour obtenir des résultats fiables.