Optimisez les e-mails marketing pour les appareils mobiles

Lorsque vous ébauchez un e-mail marketing, vous pouvez masquer certaines sections sur les clients de messagerie mobiles ou sur ordinateur de bureau. Vous pouvez également modifier la configuration et la disposition globale des colonnes pour améliorer l’expérience des destinataires lisant votre e-mail sur des appareils plus petits.

Adapter votre e-mail à différents appareils peut contribuer à stimuler l'engagement et à améliorer l'expérience utilisateur globale de vos e-mails.

Comprendre les limites et les considérations

• La définition de modules et de styles distincts sur ordinateur et mobile ne peut être faite que dans l’éditeur glisser-déposer. Pour les e-mails créés à l’aide de modèles de gestionnaire de conception, les développeurs devront ajouter manuellement toute personnalisation d’appareil. 
• Les clients de messagerie suivants ne prennent pas en charge les e-mails optimisés pour les appareils mobiles : Yahoo ! Mail sur Android, AOL Mail sur Android, Gmail IMAP et certaines versions de Samsung Mail. Dans ces clients, les modules masqués seront visibles et les configurations réservées aux mobiles seront ignorées.
• Les paramètres du module, tels que la taille de police ou le remplissage, ne peuvent pas être définis sur des valeurs différentes pour mobile et ordinateur. Pour utiliser des valeurs différentes pour ces paramètres, il est recommandé de créer des modules mobiles et de bureau distincts avec le même contenu.

Masquer les modules et les sections sur les ordinateurs de bureau ou les téléphones portables

Pour personnaliser les modules ou les sections qui apparaissent pour les destinataires de bureau ou mobiles :

1. Depuis votre compte HubSpot, accédez à Marketing > E-mail.
2. Cliquez sur le nom d'un e-mail provisoire ou cliquez sur Créer un e-mail.
3. Cliquez sur l’icône du bureau oumobile sur l’icône desktop mobile en haut de l’éditeur d’e-mails pour configurer les paramètres de chaque type d’appareil.

4. Passez le curseur sur un module ou une section et cliquez sur l’icône hide Masquer pour masquer ce module dans la version de l’e-mail que vous modifiez.

5. Pour afficher tous les modules masqués pour une version que vous modifiez, cliquez sur le menu déroulant Options d’affichage en haut de l’éditeur, puis activez l’option Afficher les éléments masqués . 
6. Pour que le module masqué soit à nouveau visible pour cette version de l’e-mail, cliquez sur l’icône d’affichage view à l’emplacement où se trouverait l’icône masquée. 

Personnalisation de l’empilement des modules sur les appareils mobiles

Vous pouvez personnaliser l’empilement des modules d’une section lorsqu’ils sont affichés sur un appareil mobile. 

1. Depuis votre compte HubSpot, accédez à Marketing > E-mail.
2. Cliquez sur le nom d'un e-mail provisoire ou cliquez sur Créer un e-mail.
3. Dans l’éditeur d’e-mails, cliquez sur une section. 
4. Dans l’éditeur de barre latérale de gauche, sélectionnez une option dans la section Empilage : 
   • Conserver les mêmes colonnes : l’e-mail affichera le même nombre de colonnes sur mobile que sur ordinateur. 
   • À gauche en haut de la droite : les modules situés à gauche de la section apparaissent en premier sur mobile. 
   • À droite en haut de la gauche : les modules situés à droite de la section apparaîtront en premier sur mobile. 

Personnaliser le style sur ordinateur ou mobile

Vous pouvez configurer un style de bureau et mobile distincts pour une seule section ou pour l’ensemble de l’e-mail marketing. 

1. Depuis votre compte HubSpot, accédez à Marketing > E-mail.
2. Cliquez sur le nom d'un e-mail provisoire ou cliquez sur Créer un e-mail.
3. Dans l’éditeur d’e-mails, cliquez sur une section pour modifier son style ou cliquez sur l’icône styles de conception de modèle à gauche pour modifier le style de l’e-mail dans son ensemble. 
4. Dans l’éditeur de barre latérale de gauche, désactivez l’option Tous les appareils à côté d’une section pour afficher des paramètres distincts pour ordinateur de bureau et mobile. 

5. Modifier les paramètres de style pour ordinateur et mobile. 

Lorsque vous avez modifié les paramètres de visibilité et de mise en page de votre e-mail, vous pouvez prévisualiser son apparence sur différents clients de messagerie.

Optimisez les e-mails pour les appareils mobiles

Pour améliorer l’apparence de vos e-mails marketing sur les appareils mobiles, il est recommandé de suivre ces bonnes pratiques : 

• Utilisez un modèle d’e-mail adaptatif : le contenu adaptatif s’adapte à l’écran sur lequel il est affiché. Les modèles de glisser-déposer de HubSpot sont adaptatifs par défaut, mais les développeurs créant des modèles codés devront utiliser le balisage des modèles d’e-mails adaptatifs.
• Réduisez la taille des fichiers image. Les fichiers image plus petits entraînent une taille d’e-mail plus petite et des temps de chargement plus rapides. Alors que HubSpot redimensionne automatiquement toute image avec une largeur définie, ce qui réduit la taille du fichier, vous pouvez également utiliser un service comme FastStone Photo Resizer.
• Créez des liens et des boutons lisibles : tous les liens de texte et les boutons doivent avoir une largeur et une hauteur d’au moins 57 pixels. 
• Texte d’aperçu de l’e-mail de test : le texte alternatif des images placées au début d’un e-mail marketing peut être intégré au texte d’aperçu de l’e-mail. Vous pouvez supprimer le texte alternatif de l’image devrait résoudre ce problème. Il est recommandé d’envoyer un e-mail test pour vérifier que le texte d’aperçu apparaît comme prévu. 
• Éviter les éléments Javascript et iframe : les éléments Javascript et iframe intégrés ne seront pas rendus par la plupart des clients de messagerie. Il est recommandé d’éviter de les ajouter aux modèles codés. 
• Réduisez la taille des e-mails pour éviter qu’ils ne soient coupés. Le contenu des e-mails de plus de 102 Ko peut être caché derrière une option Afficher l’intégralité du lien vers le message dans Gmail. Découvrez-en davantage sur le calcul et la diminution de la taille d’un e-mail.