Définissez différents styles de police pour les appareils mobiles afin de garantir la lisibilité et l'attrait visuel :

• Utilisez une taille de police plus petite pour adapter le contenu aux écrans plus petits,
• utilisez une famille de polices sûre pour une meilleure lisibilité, et
• ajustez la couleur de la police pour assurer un bon contraste dans diverses conditions d'éclairage ou pour les paramètres mode sombre.

Email sur les ordinateurs de bureau	Email sur les appareils mobiles

Pour modifier la taille, la couleur ou la famille de vos polices pour les appareils mobiles, vous devez définir les styles de police pour les appareils mobiles et les ordinateurs de bureau : 

1. Concevez votre email. 
2. Accédez au mode développeur. 
3. Recherchez le contenu pour lequel vous souhaitez modifier les styles de police. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
4. Copiez les codes correspondant au type de style que vous souhaitez modifier sur les appareils mobiles : 
   • Police du texte : font-family: 'font family name'
   • Taille du texte : font-size: SIZEpx
   • Couleur du texte : color: 'HEX' 
5. Sous la chaîne de layout et la valeur 320px, collez les codes que vous avez copiés ci-dessus pour modifier les styles de police pour appareil mobile et remplacez leur valeur par celle dont vous avez besoin :
   
   • font-family: 'font family name' où font family name est le nom de la police tel qu'il apparaît dans la liste des polices disponibles dans l'éditeur. 
   • font-size: SIZEpx où SIZE est la taille que vous souhaitez donner à votre contenu en px. 
   • color: 'HEX' où HEX est le code HEX correspondant à la couleur que vous souhaitez donner à votre contenu. 
     
6. Depuis la chaîne de contenu, dans notre exemple 3 conseils pour pratiquer le yoga en toute sécurité, supprimez tous les attributs de style, span ou class entre les '' pour ne conserver que votre contenu.
   ➡️  Par exemple

   Si votre chaîne de contenu est : 

   content: '<h2 class="default-heading2"><span style="color:#116b6b;">Nos 3 conseils pour pratiquer le yoga en toute sécurité 🧘</span></h2>'

   Supprimez tous les attributs de style ou de classe pour ne conserver que votre contenu, par exemple : 

   content: 'Nos 3 conseils pour pratiquer le yoga en toute sécurité 🧘'
7. Passez du mode bureau  (⇧ + D) au mode mobile (⇧ + M) en utilisant les icônes correspondantes en haut à droite de votre éditeur d'email. Cela vous permettra de vous assurer que vos styles de police changent en fonction du type d'appareil sur lequel ils sont lus :
   
8. Effectuez d'autres modifications en mode développeur si nécessaire.  
9. Cliquez sur l'icône en forme de croix  pour fermer le mode développeur.

Félicitations ! Vos styles de police changent désormais en fonction de l'appareil sur lequel ils sont lus. 

Les annotations Gmail permettent aux utilisateurs de Gmail de visualiser vos promotions et d'y participer directement depuis leur boîte de réception en cliquant sur l'image ou le texte annoté sans ouvrir l'email. Ces annotations permettent aux messages reçus dans l'onglet Promotions de Gmail de se démarquer en ajoutant des fonctionnalités telles que les suivantes :

Pour afficher les annotations Gmail à vos destinataires : 

1. Concevez votre email. 
2. Accédez au mode développeur. 
3. Copiez le code de l'onglet ci-dessous correspondant au type d'annotation que vous souhaitez afficher pour vos destinataires Gmail : 
   
   Annotations de l'opportunité Carrousels de produits Aperçu d'une seule image

   Code à copier

   Valeurs à remplacer

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Facultatif) DESCRIPTION est le texte qui s'affiche avec le badge d'opportunité, par exemple 20 % de réduction.  (Facultatif) DISCOUNT_CODE est le code de réduction ou de promotion de l'offre, par exemple 20AUJOURDHUI.  (Facultatif) START_DATE_TIME est la date et l'heure de début de l'offre au format ISO 8601, par exemple 2023-09-25T18:44:37-07:00. (Facultatif) END_DATE_TIME est la date et l'heure de fin de la promotion au format ISO 8601, par exemple 2023-09-25T18:44:37-07:00.

   ❗️Important

   Pour chaque image de votre carrousel de produits, ajoutez un type PromotionCard. 

   Code à copier

   Valeurs à remplacer

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL est l'URL de votre image au format PNG ou JPEG, par exemple https://www.exemple.com/image.png. Les formats d'image pris en charge sont 4:5, 1:1, 1,91:1. Pour les carrousels de produits, chaque image doit avoir une URL unique et utiliser le même format d'image. PROMO_URL est l'URL de la promotion. Lorsque les utilisateurs cliquent sur l'image dans l'onglet Promotions, ils se rendent à cette URL. (Facultatif) HEADLINE est une description de une à deux lignes de la promotion qui s'affiche sous l'image de l'aperçu. (Facultatif) PRICE est le prix de la promotion. (Facultatif) PRICE_CURRENCY est la devise du prix au format ISO 4217 à trois lettres, par exemple USD. Cela détermine le symbole de la devise affiché avec le prix. (Facultatif) DISCOUNT_VALUE est le montant soustrait du prix pour afficher un prix ajusté. Le prix ajusté est affiché à côté du prix d'origine. Par exemple, si discountValue est égal à 25, si le prix est de 100 et si priceCurrency est USD, le prix ajusté s'affiche comme ceci : 75 $. (Facultatif) POSITION est la position de la carte dans le carrousel.

   Code à copier

   Valeurs à remplacer

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL est l'URL de votre image au format PNG ou JPEG, par exemple https://www.exemple.com/image.png. Les formats d'image pris en charge sont 4:5, 1:1, 1,91:1. Pour les carrousels de produits, chaque image doit avoir une URL unique et utiliser le même format d'image. PROMO_URL est l'URL de la promotion. Lorsque les utilisateurs cliquent sur l'image dans l'onglet Promotions, ils se rendent à cette URL. (Facultatif) HEADLINE est une description de une à deux lignes de la promotion qui s'affiche sous l'image de l'aperçu. (Facultatif) PRICE est le prix de la promotion. (Facultatif) PRICE_CURRENCY est la devise du prix au format ISO 4217 à trois lettres, par exemple USD. Cela détermine le symbole de la devise affiché avec le prix. (Facultatif) DISCOUNT_VALUE est le montant soustrait du prix pour afficher un prix ajusté. Le prix ajusté est affiché à côté du prix d'origine. Par exemple, si discountValue est égal à 25, si le prix est de 100 et si priceCurrency est USD, le prix ajusté s'affiche comme ceci : 75 $.

4. En haut du mode développeur, sous la valeur fonts et au premier niveau, collez le code que vous avez copié dans l'un des onglets ci-dessus.
5. Effectuez d'autres modifications en mode développeur si nécessaire.
6. Cliquez sur l'icône en forme de croix pour fermer le mode développeur.
7. (Facultatif) Envoyez un email de test à une adresse email de test utilisant Gmail et avec l'onglet Promotions actif, pour vous assurer que l'annotation Gmail s'affiche correctement.

Vous pouvez également utiliser notre éditeur HTML pour afficher les annotations Gmail. Pour en savoir plus, consultez la documentation officielle de Google. 

Il peut être utile de modifier la couleur de vos puces ou de vos numéros pour mettre l'accent sur des points clés, regrouper des idées ou correspondre à votre image de marque. Vous trouverez ci-dessous un exemple de liste à puces colorée : 

Pour modifier la couleur de vos listes à puces et numérotées :

1. Créez une liste d'éléments avec des puces ou des numéros. 
2. Accédez au mode développeur. 
3. Recherchez la liste que vous venez de créer dans le mode développeur et repérez la valeur content qui lui correspond. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
4. Sous la valeur default, collez le code suivant, où HEX est le code HEX correspondant à la couleur que vous voulez donner à votre liste : color: '#HEX'.
   
5. Vérifiez le design de votre email à droite de votre écran pour voir si votre liste d'éléments a changé de couleur. Vos puces ou numéros et le texte associé doivent apparaître dans la couleur qui correspond au code HEX que vous avez entré dans le mode développeur. 
6. Effectuez d'autres modifications en mode développeur si nécessaire. 
7. Cliquez sur l'icône en forme de croix pour fermer le mode développeur.
8. Pour changer la couleur de votre texte tout en conservant la couleur de vos puces ou de vos numéros :
   1. Sélectionnez le texte dont vous souhaitez modifier la couleur. 
   2. Dans la barre d'outils au-dessus de votre texte, cliquez sur l'icône Couleur de police.
      
   3. Dans le champ HEX, collez le code couleur HEX que vous souhaitez donner à votre texte. Dans notre exemple, #
      3B3F44. 

Félicitations ! Vous avez changé la couleur de vos puces ou de vos numéros. 

Les espaces et les traits d'union insécables garantissent une mise en forme correcte des emails en évitant les sauts de ligne indésirables, comme le fractionnement d'un nom composé ou du prix d'un article, et en préservant la lisibilité sur tous les appareils. Consultez l'exemple ci-dessous pour comprendre l'importance des espaces et des traits d'union insécables :

Sans caractères insécables	Avec des caractères insécables

Pour insérer des espaces et des traits d'union insécables dans le design de votre email : 

1. Concevez votre email. 
2. Accédez au mode développeur. 
3. Recherchez le contenu auquel vous souhaitez ajouter un espace ou un trait d'union insécable. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
4. Copiez le code correspondant au type de caractère insécable que vous souhaitez inclure :
   • Espace insécable :  
   • Trait d'union insécable : -
5. Collez le code copié ci-dessus à la place de l'espace ou du trait d'union que vous souhaitez rendre insécable.
   
6. Vérifiez le design de votre email à droite de votre écran pour voir si votre liste d'éléments a changé de couleur. 
7. Effectuez d'autres modifications en mode développeur si nécessaire. 
8. Cliquez sur l'icône en forme de croix pour fermer le mode développeur.

Félicitations ! Vous avez ajouté des caractères insécables au design de votre email. 

Les versions de bureau d'Outlook utilisant le moteur de rendu de Microsoft Word ont une prise en charge limitée du CSS (par exemple, Outlook 2007, 2010, 2013, 2016, et les versions de bureau d'Office 365). Les images d'arrière-plan et la mise en forme du texte s'affichent souvent de manière incorrecte, avec des arrière-plans blancs au lieu des images et du texte mal aligné en raison d'une mauvaise gestion de propriétés telles que background-image et line-height.

Pour vous assurer que les images d'arrière-plan et les blocs de texte s'affichent correctement dans Outlook, utilisez la solution de contournement suivante :

1. Concevez votre email. 
2. Récupérez la hauteur en px de votre image d'arrière-plan. Dans notre exemple, 265px. 
3. Accédez au mode développeur. 
4. Cliquez sur l'onglet correspondant au problème de rendu que vous souhaitez résoudre :
   
   Image d'arrière-plan Bloc de texte

   ❗️Important

   Cette solution fonctionne uniquement pour les images d'arrière-plan appliquées à la largeur du corps, et non à la pleine largeur, et sous une valeur grid-row. Notez qu'une valeur grid-row ne doit pas contenir de bouton.

   1. Recherchez la valeur grid-row correspondant à l'endroit où votre image d'arrière-plan est affichée.
   2. Sous la valeur background-image, entrez height: suivi de la hauteur en px de votre image d'arrière-plan. Dans notre exemple, nous allons entrer height: 265px.
      

   1. Recherchez le contenu pour lequel vous souhaitez résoudre les problèmes d'affichage. Recherchez la valeur line-height correspondant à l'endroit où votre texte est affiché. S'il n'y a pas de valeur line-height pour ce contenu, ajoutez-en une.
   2. Remplacez la taille par défaut de votre valeur line-height ou entrez une taille en px, car ce sont les seules valeurs prises en charge par les clients email Outlook. Dans notre exemple, nous allons entrer 30px.
      
5. Effectuez d'autres modifications en mode développeur si nécessaire. 
6. Cliquez sur l'icône en forme de croix pour fermer le mode développeur.
7. (Facultatif) Envoyez un email de test à une adresse email de test utilisant l'une des versions d'Outlook qui ne prend pas en charge les images d'arrière-plan pour vous assurer qu'elle s'affiche correctement.

Ajoutez un texte alternatif à vos icônes de médias sociaux dans le design de vos emails afin d'améliorer l'accessibilité pour les personnes malvoyantes utilisant des lecteurs d'écran, d'améliorer l'expérience de l'utilisateur et de garantir un contexte clair si les images ne se chargent pas.

Pour ajouter du texte alternatif au design de votre email : 

1. Concevez votre email et incluez vos icônes de médias sociaux.
2. Accédez au mode développeur. 
3. Recherchez les valeurs type: social-media. Il doit y en avoir une pour chaque icône de média social. Les paramètres de votre contenu se trouvent juste au-dessus de celui-ci dans le code. 
4. Sous chaque valeur type: social-media, recherchez la valeur alt: null.
5. Remplacez null par votre texte alternatif. Dans notre exemple, le texte alternatif de l'icône de notre site web sera Site web de The Green Yoga et celui de notre icône Instagram sera Compte Instagram. 
   
6. Effectuez d'autres modifications en mode développeur si nécessaire.  
7. Cliquez sur l'icône en forme de croix pour fermer le mode développeur.
8. (Facultatif) Envoyez un email de test pour vérifier que votre texte alternatif s'affiche correctement pour chacune de vos icônes de média.

Contrairement à ce que vous auriez pu penser, vous ne pouvez pas taper directement du code HTML en mode développeur. Au lieu de cela, vous devez utiliser YAML qui est une représentation facile pour une structure arborescente similaire à JSON.

Ce langage vous permet d'utiliser des définitions abstraites créées par notre équipe pour faciliter le développement de templates et pour vous assurer que le code HTML généré et envoyé au client est géré par nos outils. Cela permet d’obtenir la meilleure qualité et une assistance étendue pour les clients email.

Comme vous le savez peut-être, les clients email ne sont pas tous les mêmes et il peut être difficile de créer des newsletters d’aspect professionnel qui fonctionnent partout, y compris sur les téléphones mobiles et dans Outlook.

Il s’agit également d’un travail standard en cours, car de nouveaux clients email arrivent et les anciens clients modifient la façon dont ils affichent les emails.

C’est pourquoi nous travaillons dur pour nous assurer que vos emails fonctionneront comme prévu partout, avec un minimum d’effort de votre part. Nous avons créé un moyen abstrait de haut niveau vous permettant de définir votre code HTML ; nous nous occupons de faire opérer la magie en coulisses. 

Pour 99 % des cas d’utilisation, vous trouverez rarement des limitations avec notre langage de template, car nous travaillons constamment à sa mise à jour, mais bien sûr, nous avons pu manquer quelques bizarreries ou fonctionnalités spécifiques au client. Cela ouvre un nouveau monde de possibilités au-delà de ce que nous proposons dans l’interface. Découvrez nos cas d'utilisation les plus fréquents en mode développeur pour une personnalisation avancée des emails !