Un email adapté aux mobiles est un email qui s’adapte et s’affiche correctement sur différentes tailles d’écran, notamment les smartphones et les tablettes. Les emails non adaptés peuvent ne pas s’afficher correctement, ce qui peut entraîner une confusion pour l’utilisateur. Il est essentiel de s’assurer que le design de votre email est adapté aux mobiles, car environ la moitié des emails sont ouverts sur des appareils mobiles. Cela garantit la lisibilité sur différents appareils, évitant aux utilisateurs de zoomer ou de dézoomer pour afficher le contenu. 

Pour vous simplifier la tâche, nous adaptons automatiquement vos conceptions d'email aux appareils mobiles : les éléments tels que les images, le texte et les boutons sont automatiquement redimensionnés et réorganisés pour s’adapter aux écrans mobiles. Cependant, vous pouvez toujours optimiser ce design d'email par défaut pour les mobiles en utilisant les différentes options de notre aperçu Mode mobile et en suivant nos conseils pour offrir à vos destinataires l’expérience la plus optimale. 

Bon à savoir

• Veillez à comprendre la différence entre les blocs de section et de contenu.
• Découvrez comment concevoir efficacement votre email pour le paramètre mode sombre, car il est souvent activé sur les appareils mobiles pour prévenir la fatigue oculaire et économiser la batterie. Pour en savoir plus, consultez notre article dédié Concevoir des emails adaptés au mode sombre.

💡 Conseils pour des emails adaptés aux mobiles

• Simplifiez-vous la vie avec une mise en page à une seule colonne
  Modifiez la mise en page de votre contenu pour éviter de surcharger la mise en page de votre email. Les écrans des appareils mobiles ont un espace limité et il peut être inefficace d'avoir trop de contenu.
• Utilisez une image carrée ou au format paysage
  Pour vos images, il est recommandé d’utiliser des formats carrés ou paysage, car ils sont plus petits que les formats portrait. Assurez-vous également que la taille en pixels de votre image ne dépasse pas la taille de l’écran mobile.
• Évitez les contenus volumineux
  Redimensionnez votre contenu, en particulier si vous avez de grandes images ou des logos lorsque vous les affichez sur mobile. Conservez une largeur d'image entre 400 et 650 pixels ; Une image de 400 pixels de large est la plus petite taille requise pour un affichage en pleine largeur sur un appareil mobile. Vous pouvez également augmenter la taille de vos boutons pour améliorer la cliquabilité. Nous vous recommandons de tester vos emails avant de les envoyer à vos destinataires afin de vérifier la taille de votre contenu et de vous assurer qu’il est adapté aux appareils mobiles.
• Ajoutez un texte alternatif dans l’image ou le logo
  Pour votre image, il est recommandé d’ajouter un texte alternatif, c’est-à-dire la description textuelle qui apparaît lorsqu’une image ou un logo ne s’affiche pas dans un email ou lorsque le destinataire a bloqué l’image. Il est également fortement recommandé car il améliore l’accessibilité de votre contenu pour les personnes utilisant des lecteurs d’écran.
  ➡️ Pour en savoir plus, consultez notre section dédiée dans l’article Utiliser les blocs de contenu (Texte et Liens, Image, Bouton, etc.).

📱 Optimisation de vos emails pour les appareils mobiles

Lors de la conception de votre email à partir de l’éditeur Drag & Drop, vous pouvez afficher et modifier le design d'email par défaut pour les appareils mobiles en cliquant sur l’icône de mobile en haut à droite de votre écran :

Nous offrons différentes possibilités pour modifier la version mobile par défaut de votre design d'email et choisir comment vous souhaitez que votre contenu s’affiche sur les appareils mobiles :

• Adapter votre email en pleine largeur,
• Modifier la mise en page de votre contenu,
• Masquer votre contenu pour les ordinateurs ou les appareils mobiles, ou
• Redimensionner le contenu. 

Adapter votre email en pleine largeur

Utilisez l’option Pleine largeur sur mobile pour agrandir la taille du corps de votre email à la largeur complète des appareils mobiles. Cela est recommandé pour améliorer la lisibilité de votre email :

1. Cliquez sur l’icône de mobile en haut de votre écran pour accéder au mode mobile.
2. Cliquez sur Style à gauche de votre écran.
3. Dans la section Template du panneau de gauche, activez l’option Pleine largeur sur mobile.

Modifier la mise en page de votre contenu

Pour chaque section, vous pouvez choisir l’alignement et l’orientation de votre contenu. Alignez-le verticalement pour améliorer la lisibilité ou horizontalement pour économiser de l’espace. L’orientation que vous choisissez dépend du type de contenu que vous souhaitez afficher. Pour vous aider à choisir comment afficher votre contenu sur les appareils mobiles, voici quelques exemples de choses à faire et à ne pas faire :

	✅ À faire	❌ À ne pas faire
Alignement vertical
Alignement horizontal

Si l’orientation de votre contenu dans la version mobile par défaut de notre éditeur ne vous convient pas, vous pouvez la modifier :

1. Cliquez sur l’icône de mobile en haut de votre écran pour accéder au mode mobile.
2. Sélectionnez la section dont vous souhaitez modifier l’orientation.
3. Dans le panneau de gauche, sélectionnez l’orientation du contenu souhaitée :
   1. Alignement vertical, cliquez sur la flèche pointant vers le bas.
   2. Alignement horizontal, cliquez sur la flèche pointant vers la droite.
4. Si vous choisissez d’aligner votre contenu verticalement, vous pouvez également le permuter pour inverser l’ordre du contenu de votre section. Cela affichera votre texte avant l’image, ou inversement, par exemple.
   Pour ce faire, activez l’option Permuter le contenu depuis le panneau de gauche :
   

Masquer une section ou un bloc de contenu

Masquer une section ou un bloc de contenu sur les appareils mobiles permet de réduire le contenu long, de créer un design minimaliste et d’éviter les surcharges d'email sur appareil mobile. Vous pouvez choisir de transférer ce que vous trouvez le plus utile et le plus important vers le mode mobile et de masquer le contenu non essentiel. Pour savoir comment masquer une section ou un bloc de contenu sur les appareils mobiles, consultez notre article dédié Afficher ou masquer du contenu en fonction de l'appareil utilisé.

Redimensionner votre contenu

La vitesse de chargement sur les appareils mobiles est plus lente que sur les ordinateurs. Redimensionnez vos boutons ou vos images pour permettre à vos emails de se charger plus rapidement sur les appareils mobiles :

1. Cliquez sur l’icône de mobile en haut de votre écran pour accéder au mode mobile.
2. Sélectionnez le bouton ou l’image que vous souhaitez redimensionner.
   
3. Dans la section Largeur du panneau de gauche, entrez la largeur souhaitée pour votre contenu. Vous pouvez modifier la taille en pourcentage ou en pixels en cliquant sur la liste déroulante à côté de %.
   Nous vous recommandons de maintenir la largeur de votre image entre 400 et 650 pixels.

⏭ Et après ?

• Concevoir des emails adaptés au mode sombre
• Envoyer des emails de test

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec un Partenaire Brevo certifié.