Conception d'e-mails adaptés aux mobiles dans l'éditeur Stripo

Ce manuel explique comment créer des e-mails adaptés aux mobiles dans l'éditeur Stripo. Il aborde la configuration pratique, la gestion de la mise en page et les problèmes courants rencontrés sur mobile, avec des instructions claires et détaillées et des exemples directement applicables dans l'éditeur.

Points clés à retenir

1. Vous pouvez modifier directement la version mobile, sans avoir à deviner le résultat : vous pouvez passer en mode mobile dans l’éditeur, définir les paramètres et les visualiser tels qu’ils apparaîtront sur les téléphones.
2. Vous pouvez d'abord définir des styles mobiles globaux, puis affiner chaque bloc individuellement si nécessaire : Stripo vous permet de définir des règles mobiles de base dans les styles généraux, puis de les remplacer pour chaque rayure, structure ou bloc en cas de besoin.
3. Vous pouvez contrôler ce qui apparaît sur mobile, et pas seulement son apparence : vous pouvez masquer des éléments sur mobile, modifier l’ordre d’empilement, ajuster les espacements et décider quelles mises en page restent alignées ou s’empilent verticalement.

Comprendre comment Stripo gère l'affichage mobile

Que signifie « compatible mobile » sur Stripo ?

Tous les modèles d'e-mails que vous créez avec Stripo sont réactifs par défaut, leur mise en page s'adapte donc aux écrans plus petits. Cependant, vous pouvez définir des paramètres mobiles supplémentaires afin que les e-mails s'affichent exactement comme vous le souhaitez sur les appareils mobiles. Ces paramètres comprennent : la taille des polices, la taille des boutons (y compris les boutons pleine largeur), l'espacement (marges et remplissage sur mobile), le comportement d'empilement des conteneurs dans les structures, et le masquage ou l'affichage de certains éléments supplémentaires sur mobile.

Veuillez noter que le résultat final dépend du client de messagerie : les paramètres spécifiques aux appareils mobiles reposent sur des requêtes multimédias, et certaines applications ne les prennent pas en charge. Dans ces clients, les paramètres mobiles peuvent être ignorés, et l'affichage mobile peut ressembler à la version pour ordinateur.

Quels changements s'appliquent uniquement sur mobile ?

Les paramètres spécifiques aux appareils mobiles affectent l'apparence de l'e-mail sur les smartphones, et non sur ordinateur. Ils comprennent la taille des polices, la taille des boutons (y compris les boutons pleine largeur), l'espacement (marges et remplissage sur mobile), le comportement d'empilement des conteneurs dans les structures et le masquage des éléments sur mobile.

Lorsque les paramètres mobiles ne fonctionnent pas

Si les commandes mobiles sont inactives ou si les modifications ne s'affichent pas, vérifiez le commutateur de conception réactive.

Conception réactive dans l'apparence

Utilisez ceci lorsque vous travaillez avec les paramètres de mise en forme mobile :

1. Accédez à Styles et mises en page globaux.

2. Activez la conception réactive.

Si la conception réactive est désactivée, l'e-mail sur les appareils mobiles ressemblera à la version pour ordinateur de bureau, et la section Formatage mobile peut être inactive.

Commencez avec une base propre en utilisant les styles généraux.

Basculez entre les modes de style pour ordinateur et mobile.

Les styles généraux vous permettent de définir des règles de conception par défaut distinctes pour les ordinateurs et les appareils mobiles. Utilisez le bouton de bascule du panneau Styles généraux pour choisir entre les modes Ordinateur et Mobile. Chaque mode conserve ses propres valeurs ; les modifications apportées dans le mode Mobile n’affectent donc que l’affichage mobile, et non la version pour ordinateur.

Définir la mise en page globale et les règles de base pour l'ensemble de l'e-mail

Utilisez Styles généraux → Styles et mise en page globaux pour définir le comportement global de l'e-mail avant de travailler sur les bandes, structures ou blocs individuels. Notez que certaines fonctionnalités de la version ordinateur ne sont pas disponibles sur mobile.

Toutefois, si vous développez à la fois pour des versions de bureau et mobiles, vous pouvez procéder comme suit :

Étape par étape : Configurer les styles et la mise en page globaux

Définir le contexte général :

1. Choisissez une couleur de fond générale pour la zone de texte du courriel.

2. Sur un ordinateur de bureau, la couleur de fond recouvre toute la zone de message.

3. Sur mobile, ce fond est masqué.

Ajouter une image d'arrière-plan (ordinateur de bureau uniquement) :

4. Sélectionnez une image de fond et définissez sa position.

5. Activez la répétition de l'image d'arrière-plan si l'image doit occuper toute la longueur du message.

6. Les images d'arrière-plan ne s'affichent que sur ordinateur et n'apparaissent pas sur mobile.

7. Certains clients de messagerie, notamment Outlook, peuvent ne pas afficher les images d'arrière-plan. Dans ce cas, définissez une couleur d'arrière-plan de secours proche de la couleur de l'image.

Définition de la largeur et de l'alignement du contenu du message :

8. La largeur et l'alignement ne sont possibles que sur un modèle de bureau.

9. Définissez la largeur du contenu du message. La valeur par défaut est de 600 px.

10. Vous pouvez définir n'importe quelle valeur entre 320px et 900px.

11. Choisissez l'alignement du message.

Souligner le lien de contrôle :

12. Activer ou désactiver le soulignement des liens pour l'ensemble du modèle d'e-mail.

Activer la direction de lecture de droite à gauche :

13. Activez l'option « Lecture de droite à gauche » pour les langues qui nécessitent un système d'écriture RTL, comme l'arabe ou l'ourdou.

Définir des styles de liste personnalisés :

14. Définissez les styles de listes à puces qui s'appliqueront à l'ensemble de l'e-mail.

Définir les valeurs par défaut d'espacement :

15. Définir le remplissage par défaut de la structure. Ce remplissage est appliqué automatiquement aux nouvelles structures.

16. Définissez les marges autour du message pour contrôler l'espacement entre le contenu de l'e-mail et les bords de la zone de message.

Ces paramètres créent une base cohérente entre les ordinateurs de bureau et les appareils mobiles, réduisant ainsi le besoin d'ajustements ultérieurs.

Contrôlez la typographie et l'espacement pour une lisibilité optimale sur mobile.

Typographie à rayures mondiales

Étape par étape : Définir la typographie à rayures par type et affiner les rayures

Définir la typographie à rayures globales :

1. Allez dans Styles généraux → Styles à rayures.

2. Sélectionnez un type de rayure.

3. Définissez la police, l'interligne et l'espacement des lettres pour les blocs de texte. Ces paramètres n'affectent pas les titres.

4. Vous pouvez également cliquer sur le bloc conteneur → Stripe.

Définir des arrière-plans à rayures :

5. Définissez la couleur de fond de la bande et de son contenu.

6. Ajoutez une image de fond si nécessaire.

7. Définissez une couleur d'arrière-plan de secours, car certains clients, notamment Outlook, peuvent ne pas afficher les images d'arrière-plan.

Ou, si vous ouvrez les paramètres Stripe en cliquant sur le bloc conteneur :

Définir la taille de la police par type de rayure :

8. Définissez la taille de police et la hauteur de ligne par défaut pour chaque type de rayure.

9. Utilisez des tailles de police plus petites pour la bande de pied de page, le cas échéant.

Ajuster l'espacement des rayures sur mobile :

10. Sélectionnez une rayure spécifique.

11. Définissez le remplissage sur mobile pour contrôler l'espacement autour de la bande dans la vue mobile.

Masquer une rayure sur mobile :

12. Activez l'option « Masquer l'élément sur mobile » lorsqu'une bande ne doit pas apparaître sur les petits écrans.

Typographie à rayures horizontales pour différentes zones de courriel

Les bandes délimitent de grandes sections d'un e-mail et déterminent l'apparence du texte dans les mises en page répétées. Chaque bande peut appartenir à un type spécifique, ce qui garantit un style cohérent.

Les types de bandes comprennent l'en-tête, le contenu, le pied de page et la zone d’informations. L'utilisation de ces types de bandes permet d'appliquer différentes tailles de police et règles d'espacement, comme un texte plus petit dans le pied de page.

Étape par étape : Appliquer une mise en forme personnalisée aux titres et définir les styles de titres

Appliquer la mise en forme des titres :

1. Sélectionnez du texte à l'intérieur d'un bloc de texte.

2. Choisissez H1, H2 ou H3 dans le menu de mise en forme du texte.

3. En mode mobile, configurez l'alignement du texte des titres lorsque l'alignement par défaut sur ordinateur ne s'affiche pas correctement sur les petits écrans.

Définissez des styles de titre personnalisés dans le conteneur :

4. Ouvrez les styles et basculez entre le mode Bureau et le mode Mobile à l'aide du bouton de sélection de l'appareil.

5. Choisissez le niveau de titre que vous souhaitez modifier.

6. Définissez la police de caractères, l'espacement des lettres, la taille de la police, l'interligne, le style du texte et la couleur de la police.

Créez des CTA adaptés aux mobiles et faciles à cliquer.

Paramètres par défaut des boutons qui fonctionnent sur l'ensemble du modèle

Sur mobile, les boutons doivent être faciles à lire et à utiliser. Un texte de moins de 18 px réduit la lisibilité et augmente le risque d'erreurs de frappe. Une taille de police de 18 px ou plus est recommandée pour les boutons mobiles.

Définir les styles de boutons globaux

Utilisez les styles généraux pour définir l'apparence des boutons une seule fois pour l'ensemble de l'e-mail, puis ajustez les valeurs pour appareils mobiles séparément.

Procédure étape par étape : Définir les styles de boutons globaux

Styles de boutons ouverts :

1. Accédez à Styles généraux → Styles de boutons.

2. Basculez entre le mode ordinateur et le mode mobile à l'aide du bouton de sélection de l'appareil.

Typographie définie :

3. Choisissez la famille de polices.

4. Définir la taille de la police et la couleur du texte.

5. Sélectionnez le style de texte et l'espacement des lettres.

Définir la forme et la couleur du bouton :

6. Définir la couleur d'arrière-plan du bouton.

7. Configurer les bordures, soit toutes les bordures, soit individuellement.

8. Définir la couleur et le rayon de la bordure.

9. Ajouter des rembourrages internes.

Largeur du bouton de commande :

10. Activer l'option « Ajuster au conteneur » pour que les boutons s'adaptent à la largeur du conteneur (option disponible uniquement sur ordinateur).

Amélioration du rendu d'Outlook :

11. Activez la prise en charge d'Outlook pour appliquer le rendu basé sur VML et obtenir un meilleur affichage des boutons dans les clients Outlook.

Définir les styles de survol pour ordinateur :

12. Configurer les couleurs d'arrière-plan et de texte au survol pour l'interaction sur ordinateur.

13. Ces styles s'appliquent lorsque le curseur est placé sur le bouton.

Travaillez directement en mode mobile dans l'éditeur

Basculez entre ordinateur et mobile pendant l'édition

Stripo vous permet de modifier la version mobile sans quitter l'éditeur.

Étape par étape : Basculer entre les vues

1. Utilisez le bouton de basculement de l'appareil dans la barre d'outils supérieure.

2. Sélectionnez Ordinateur ou Mobile pour prévisualiser et modifier la version correspondante.

3. Effectuez les modifications dans la vue active. Les versions de bureau et mobile stockent des valeurs distinctes lorsque cela est possible.

Maîtriser le comportement structurel sur mobile

Structure adaptative : Empiler ou rester en rangée

Comme vous le savez déjà, la structure adaptative détermine le comportement des conteneurs sur mobile. Lorsqu'elle est activée, les conteneurs s'empilent verticalement. Lorsqu'elle est désactivée, ils restent sur une seule ligne. La désactiver est utile pour afficher des mises en page côte à côte sur mobile, comme des fiches produits ou des visuels courts accompagnés de textes brefs.

Inversion des conteneurs : Contrôle de l’ordre du contenu

Dans les mises en page adaptatives, l'ordre des conteneurs est important. Si du texte se trouve à gauche et une image à droite, la superposition peut placer le texte au-dessus de l'image. Ceci est généralement à éviter pour la lecture sur mobile.

Étape par étape : Activer l’inversion des conteneurs

1. Sélectionnez une structure avec deux conteneurs (cliquez sur Structure dans les conteneurs).

2. Activer l'inversion des conteneurs sur mobile.

3. Veuillez prévisualiser la version mobile pour confirmer que la commande est correcte.

N'oubliez pas : l'inversion des conteneurs ne fonctionne que pour les structures comportant deux conteneurs.

Ajoutez de l'espace entre les conteneurs

Les mises en page mobiles nécessitent souvent plus d'espace entre les conteneurs pour éviter un contenu surchargé.

Tutoriel étape par étape : Utiliser Containers Gap sur mobile

1. Sélectionnez la structure.

2. Sur mobile, définissez l'espacement entre les conteneurs pour ajouter de l'espace entre eux.

Appliquer une structure et un remplissage de conteneur sur mobile

Utilisez le remplissage mobile pour ajuster l'espacement sans modifier la mise en page sur ordinateur.

Étape par étape : Définir le remplissage sur mobile pour une structure

1. Passer en mode mobile.

2. Sélectionnez la structure.

3. Définir le remplissage sur mobile.

Ces paramètres s'appliquent uniquement aux appareils mobiles et laissent l'espacement inchangé sur les ordinateurs de bureau.

Gestion des images mobiles évitant l'étirement, le défilement et le mauvais recadrage

Image réactive : Quand l'activer

Les images volumineuses peuvent entraîner un défilement horizontal ou apparaître surdimensionnées sur mobile. L'option « image réactive » ajuste la largeur de l'image à l'écran et évite ces problèmes. Cette fonctionnalité est compatible avec les appareils prenant en charge les requêtes média.

Petites images (logos) : Empêcher l’étirement indésirable

Les petites images, telles que les logos, ne doivent pas s'étirer sur toute la largeur de l'écran.

Étape par étape : Désactiver l'image réactive pour les petites images

1. Passer en mode mobile.

2. Sélectionnez l'image.

3. Désactivez l'option Image réactive.

4. Définissez manuellement la taille d'image souhaitée.

Normes d'images mobiles pour les modèles d'e-mails

Pour un rendu stable sur tous les appareils et clients :

• utilisez les formats JPEG, GIF ou PNG ;
• conserver la largeur de l'image entre 600 et 800 px ;
• images de test en prévisualisation mobile et chez de vrais clients.

Images de fond sur mobile : qu’est-ce qui est possible et qu’est-ce qui ne l’est pas ?

Les images d'arrière-plan ont des dimensions fixes et ne s'adaptent pas à la largeur de l'écran comme les images classiques. Vous pouvez ajuster leur position et leur taille pour améliorer l'apparence, mais le résultat varie selon le client.

Limites de rendu à prendre en compte :

• les images d'arrière-plan des conteneurs, des structures et des rayures ne s'affichent pas dans Outlook ;
• l'image d'arrière-plan globale s'affiche sur les ordinateurs de bureau mais n'apparaît pas sur les appareils mobiles.

Définissez toujours une couleur d'arrière-plan de secours lorsque vous utilisez des images d'arrière-plan.

Nettoyage mobile au niveau des blocs pour une meilleure lisibilité du texte

Corrigez les sauts de ligne intempestifs dans les blocs de texte

Sur mobile, le texte peut s'afficher de manière irrégulière sur plusieurs lignes. Il arrive fréquemment qu'un seul mot passe à la ligne suivante, ce qui nuit à la lisibilité.

Étape par étape : Corriger les sauts de ligne

Réduire la taille de la police sur mobile :

1. Passer en mode mobile.

2. Sélectionnez le bloc de texte.

3. Dans Styles, réduisez la taille de la police pour mobile jusqu'à ce que le texte tienne correctement sur une seule ligne.

Ajuster l'alignement et les rembourrages :

4. Vérifiez l'alignement du texte.

5. Réduisez les marges latérales gauche et droite, car des marges trop importantes peuvent provoquer des sauts de ligne indésirables.

Désactiver le retour à la ligne pour une ligne spécifique :

6. Sélectionnez la ligne de texte.

7. Activer Désactiver le retour à la ligne.

8. Utilisez cette option avec précaution. Les lignes longues dont le retour à la ligne est désactivé peuvent ne pas s'afficher correctement sur l'écran mobile et entraîner un défilement horizontal.

Dépannage : Si votre messagerie ne répond plus après l’envoi

Pourquoi un e-mail adaptatif peut ressembler à sa version de bureau sur mobile

Certaines applications de messagerie mobile ne prennent pas en charge les requêtes média. Lors de l'envoi ou de l'exportation, certains clients de messagerie suppriment le CSS adaptatif du code. Dans ce cas, les styles spécifiques aux mobiles sont supprimés et l'e-mail s'affiche comme une version pour ordinateur sur les appareils mobiles.

Cas Gmail : Les requêtes média ont été supprimées après leur envoi depuis Gmail.

Gmail supprime les styles CSS adaptatifs lorsque les e-mails sont envoyés directement depuis son application. Par conséquent, la version mobile peut sembler non réactive.

Étape par étape : Maintenir la réactivité de Gmail

1. Exportez l'e-mail vers un ESP qui prend en charge les requêtes multimédias.

2. Envoyez l'e-mail à Gmail depuis ce fournisseur de services de messagerie.

Dans ce flux, l'e-mail conserve son comportement réactif dans Gmail.

Cas Outlook : le comportement réactif diffère selon la version et l’application.

Toutes les versions d'Outlook ne prennent pas en charge la conception adaptative. Certaines suppriment automatiquement les styles adaptatifs, ce qui entraîne un affichage non adapté sur les appareils mobiles.

Différences à noter lors des tests :

• les e-mails de test envoyés depuis Stripo vers Outlook.com peuvent être adaptés aux appareils mobiles.

Liste de contrôle QA mobile avant l'exportation

Avant d'exporter ou d'envoyer un courriel, veuillez vérifier la version mobile dans l'éditeur.

Vérifiez les éléments suivants dans l'aperçu mobile :

• typographie : taille des titres, lisibilité du texte courant, sauts de ligne ;
• marges et rembourrages : espacement autour des rayures, des structures, des conteneurs et des blocs ;
• boutons : taille du texte, zone de clic et comportement pleine largeur si nécessaire ;
• comportement des conteneurs : ordre d’empilement, inversion et espaces entre les conteneurs ;
• éléments cachés : vérifier que les éléments cachés sur mobile n’apparaissent pas ;
• images : comportement adaptatif, dimensionnement du logo et images de fond de repli ;
• défilement horizontal : vérifiez la présence d’images larges, de polices de grande taille ou de structures non réactives.

Après avoir prévisualisé l'e-mail dans l'éditeur, testez-le sur différents appareils et clients de messagerie. Le comportement des clients varie, notamment sur mobile, et les tests sur appareils réels permettent de déceler les problèmes qui pourraient ne pas apparaître dans les prévisualisations.

Pour conclure

La conception des e-mails pour appareils mobiles dépend à la fois des paramètres de l'éditeur et du comportement du client de messagerie. En définissant une base solide dans les styles généraux, en utilisant la mise en forme mobile pour des ajustements rapides et en peaufinant les structures, les images et le texte directement dans l'aperçu mobile, vous pouvez contrôler l'affichage des e-mails sur les petits écrans. Vérifiez toujours l'aperçu mobile et effectuez des tests sur différents clients avant l'envoi, en particulier si vous utilisez Gmail ou Outlook.