Le design d’email sur mobile commence par l’ordre de lecture : sans zoom, le client doit comprendre l’offre, ses conditions importantes et l’action à effectuer. Une grille de produits Shopify qui paraît aérée sur ordinateur peut se transformer en une pile de minuscules images sur un téléphone. Commencez par concevoir pour le petit écran, puis vérifiez ce qui se passe lorsque le texte s’allonge, que des images ne s’affichent pas ou que les colonnes s’empilent.
Établissez un ordre de lecture clair
Utilisez une structure simple à une colonne pour le message principal. Placez la promesse, l’explication qui l’accompagne et l’action principale dans un ordre qui reste logique même si les images ne s’affichent pas. Les autres blocs produits doivent appuyer cette action, pas lui faire concurrence.
Gardez les textes importants sous forme de texte réel. Les lecteurs ne devraient pas avoir à zoomer dans une image promotionnelle pour découvrir l’offre ou ses conditions. Choisissez une police compatible avec les logiciels de messagerie et une taille de corps confortable ; 16 pixels environ constitue un bon point de départ, à vérifier ensuite sur le rendu réel. Une traduction longue demande davantage d’espace vertical, pas des lettres plus petites.
Organisez le premier écran autour d’une décision
Esquissez d’abord la version étroite, avant de placer les produits dans une grille pour ordinateur. Pour le lancement d’un produit, l’ordre peut être : nom du produit, phrase expliquant son utilité, image, contexte de prix et bouton. Le lecteur doit comprendre l’offre même si seule cette première partie est visible. Une grande bannière décorative ne devrait pas reléguer toutes les informations utiles à plusieurs écrans de défilement.
Commencez avec un corps de texte proche de 16 pixels et un interligne suffisant pour séparer confortablement les lignes, puis examinez l’email envoyé. Ce sont des points de départ, pas une consigne qui impose la même taille à toutes les étiquettes et à tous les titres. Faites ressortir les titres du corps de texte et gardez un espace confortable autour de l’action principale. Réduire l’ensemble du modèle pour faire rentrer son contenu est généralement une mauvaise solution à une mise en page trop serrée.
Pour deux fiches produit, gardez l’image, le titre, le prix et le lien dans le même composant. Lorsque les fiches s’empilent, le client doit voir un produit complet avant le suivant. Évitez de placer d’abord les deux images, puis les deux descriptions : le lecteur devrait reconstituer quels détails correspondent à quel article.
Laissez les composants s’adapter à leur contenu
Évitez les zones de texte à hauteur fixe et les retours à la ligne manuels qui servent uniquement à équilibrer un titre sur ordinateur. Prévoyez assez de marge intérieure pour un bouton dont le libellé est plus long et rendez toute sa zone cliquable confortable au toucher. Séparez les liens proches pour qu’un doigt ne sélectionne pas la mauvaise destination.
Rédigez un texte alternatif descriptif pour les images informatives et évitez que les images décoratives ajoutent du bruit inutile. Vérifiez le contraste du texte sur son véritable arrière-plan, y compris les changements éventuels du mode sombre. Une étiquette pâle qui semble élégante sur votre écran peut être difficile à lire au soleil sur un téléphone.
Utilisez une matrice d’aperçus qui révèle les composants fragiles
Une matrice utile comprend un affichage étroit, adapté à un téléphone, un affichage plus large, un cas où les images sont indisponibles, le mode sombre s’il est pris en charge et de vraies données client. Pour les traductions, incluez la version la plus longue au lieu de ne tester que la plus courte. Examinez le message dans son ensemble, puis les zones les plus susceptibles de poser problème : titres des produits, prix, boutons et liens de pied de page.
- Si le texte d’un bouton passe à la ligne, laissez sa hauteur augmenter et vérifiez sa marge intérieure ; ne coupez pas le mot qui indique l’action.
- Si un nom de produit touche le bloc suivant, supprimez la hauteur fixe et laissez le texte revenir à la ligne.
- Si une information essentielle disparaît avec les images, placez-la dans le texte réel et utilisez l’image comme complément.
- Si des liens proches sont difficiles à toucher séparément, espacez-les davantage ou réduisez le nombre d’actions concurrentes.
Mettez volontairement les cas de défaillance à l’épreuve
Dans Sendvio, prévisualisez le modèle avec de vraies données client et examinez-le sur un écran étroit. Essayez un nom long, un champ de personnalisation manquant, un prix plus long et un produit dont le titre est inhabituellement long. Envoyez ensuite des tests aux applications email que vos clients utilisent le plus souvent.
Pour une promotion de deux produits, vérifiez leur ordre une fois les blocs empilés : image, nom, prix et action doivent rester ensemble. S’ils se séparent, simplifiez le bloc. Le but n’est pas de reproduire à tout prix la disposition sur ordinateur, mais de préserver le sens et de rendre l’action évidente sans zoom, doute ni défilement horizontal.
Vérifiez le contraste entre les couleurs réelles du texte et de l’arrière-plan. Pour un texte courant, un rapport de contraste d’au moins 4,5:1 constitue un repère d’accessibilité utile ; pour un texte suffisamment grand, le minimum peut être inférieur, à 3:1. Ces valeurs ne remplacent pas une évaluation complète de l’accessibilité, mais elles permettent de choisir les couleurs de façon moins subjective. Vérifiez les petites étiquettes grises avec autant d’attention que le grand titre.
Enregistrez le composant corrigé dans le modèle réutilisable, puis testez-le de nouveau après toute modification importante. Un bon modèle mobile ne se contente pas d’éviter le défilement horizontal : il préserve l’ordre de lecture, aide le client à comprendre l’offre et rend l’action suivante claire et facile dans les environnements email que vous prenez réellement en charge.