L’espacement d’un email indique au lecteur quels éléments vont ensemble. Le titre, son explication et le bouton associé doivent être plus rapprochés que deux présentations de produits distinctes. Lorsque tous les espaces sont identiques, même une courte campagne Shopify peut sembler chargée ou décousue. Définissez une petite échelle d’espacement cohérente et vérifiez que les regroupements restent logiques une fois les blocs empilés sur mobile.
Regroupez les éléments par sens
Placez le nom d’un produit près de son image et de son prix. Gardez une explication à proximité de l’action qu’elle justifie. Prévoyez plus d’espace entre deux sections différentes qu’entre des éléments liés au sein d’une même section. Le lecteur repère ainsi la structure avant même d’avoir lu chaque phrase.
Reproduisez ce modèle dans un gabarit Sendvio réutilisable. Définissez quelques valeurs d’espacement et appliquez-les de façon cohérente, au lieu d’ajuster chaque bloc à l’œil. Le gabarit doit toutefois laisser le contenu grandir lorsqu’un titre passe sur deux lignes.
Préférez une petite échelle à des espaces sans logique
Choisissez quelques niveaux d’espacement et attribuez-leur chacun un rôle. À titre d’exemple, un petit espace peut rapprocher le nom d’un produit de son prix, un espace moyen peut séparer une explication de son bouton, et un espace plus grand peut annoncer une nouvelle section. Les valeurs exactes dépendent du gabarit : la cohérence des relations compte davantage qu’un chiffre précis.
Vous pouvez, par exemple, tester des espacements de 8, 16 et 32 pixels pour ces trois niveaux, puis ajuster après avoir examiné l’email envoyé. N’utilisez pas le plus grand espace entre chaque paragraphe. Si tout est séparé de la même façon, les détails qui vont ensemble ne semblent plus liés et l’email s’allonge inutilement.
L’interligne a une autre fonction : il sépare les lignes d’un paragraphe pour faciliter le suivi du regard. Les marges entre paragraphes, elles, distinguent des idées complètes. Une grande marge ne corrigera pas un interligne trop serré, et augmenter la hauteur des lignes ne séparera pas clairement deux sections sans rapport. Ajustez le bon niveau selon le problème observé.
Évitez les espaces vides sans utilité
De grands espaces peuvent donner une impression de rupture, surtout sur un téléphone. Vérifiez si un bloc à hauteur fixe ou un espaceur inutile repousse le bouton bien plus bas que l’explication. Corrigez la cause dans la structure au lieu de réduire la taille du texte pour remplir une zone mal proportionnée.
Conservez un interligne confortable et évitez les colonnes de texte trop larges. Un court paragraphe se lit plus facilement lorsque ses lignes restent proches sans se chevaucher. Avant de valider l’espacement, prévisualisez les noms de produits longs et les différentes versions linguistiques.
Examinez la zone vide avant de modifier la typographie
Si une grande zone vide apparaît sous un titre court, vérifiez les hauteurs fixes, les blocs espaceurs et les marges intérieures du titre comme du composant suivant. Deux réglages raisonnables séparément peuvent, une fois additionnés, créer un écart excessif. Supprimez le doublon au lieu de diminuer la police jusqu’à ce que la zone paraisse remplie.
Lorsque les colonnes passent les unes sous les autres sur mobile, vérifiez que les espaceurs prévus pour l’alignement sur ordinateur ne restent pas entre les blocs désormais verticaux. Un espaceur qui alignait les boutons de plusieurs cartes peut devenir un grand vide sous une courte description de produit. Préférez des composants qui s’adaptent au contenu et un ordre d’empilement qui garde chaque produit cohérent.
Vérifiez d’abord le balayage visuel, puis la lecture
Jetez un coup d’œil à l’email pendant quelques secondes et repérez sa promesse principale et son action. Si plusieurs blocs attirent autant l’attention, simplifiez la hiérarchie. Lisez ensuite le message en entier pour vérifier que les regroupements visuels correspondent bien au sens.
Examinez la version étroite une fois les colonnes empilées. Un espace adapté entre des cartes côte à côte peut devenir excessif à la verticale. Une bonne mise en page doit sembler intentionnelle dans les deux formats, sans dépendre de retours à la ligne forcés ni d’une quantité précise de texte.
Testez le système avec les contenus réalistes les plus courts et les plus longs. Un titre bref ne doit pas laisser un bouton sans lien apparent, et un titre long ne doit pas chevaucher le prix. Essayez aussi une traduction, l’absence d’une ligne facultative et un produit sans image. L’espacement doit s’adapter à ces variantes sans imposer une refonte manuelle de chaque campagne.
Terminez par deux vérifications : un balayage rapide pour repérer la promesse et l’action, puis une lecture complète pour contrôler l’enchaînement des idées. Si la mise en page est agréable mais que le bouton se trouve à plusieurs écrans de l’explication à laquelle il se rapporte, le regroupement doit encore être revu. Un bon espacement clarifie les relations avant même que le client décide de lire chaque phrase.