Utiliser des points de rupture

Lorsque vous créez un email, son affichage peut varier en fonction des dimensions de l'écran des appareils utilisés.

Pour garantir une mise en page toujours optimale, l’Email Builder intègre des points de rupture qui permettent d’adapter automatiquement le contenu selon l’appareil utilisé.

Le point de rupture correspond au moment où l’affichage bascule d’un format à un autre :

• De la version desktop à la version tablette : 640 px (modifiable via l’onglet “Styles” du corps)
• De la version tablette à la version mobile : 450 px

Les points de rupture sont définis par des valeurs de largeur d’écran. Une fois ces transitions dépassées, la mise en page s’ajuste pour offrir une meilleure lisibilité.

Voici les valeurs des largeurs utilisées dans le Designer pour chaque vue :

• Desktop : 640 px (modifiable via l’onglet “Styles” du corps)
• Tablette : 500 px
• Mobile : 320 px

Une bonne gestion des points de rupture va permettre une lecture fluide et un design adapté sur tous les écrans.

Vous pouvez gérer les styles des éléments de votre email de manière indépendante en fonction des différents points de rupture. Cela vous permet d’optimiser l’affichage sur desktop, tablette et mobile.

Pour en savoir plus sur la liste détaillée des éléments que vous pouvez ajuster en fonction de chaque vue, vous pouvez vous référer à l’article : Les éléments modifiables entre le desktop et le mobile

Lors de la création de vos emails, il est intéressant de prendre en compte la manière dont les styles des éléments s’adaptent aux différentes tailles d’écran.

• Commencer par la version desktop
  Nous vous conseillons de créer vos blocs et de définir vos styles en priorité pour la version desktop, car ils servent de référence pour les autres formats.

• Héritage des styles sur les vues tablette et mobile
  Les valeurs définies en version desktop pour les largeurs, couleurs, tailles de police sont automatiquement appliquées aux versions tablette et mobile.

• Modification indépendante des styles sur les vues tablette et mobile
  Sur les vues tablette et mobile, ces valeurs apparaissent en gris et en italique, ce qui indique qu'elles sont héritées des styles définis sur la version desktop. Cependant, vous pouvez toujours les modifier sans impacter les autres versions.

Le lien miroir vous permet de prévisualiser votre email sur différentes résolutions d’écran, garantissant ainsi un affichage optimal sur plusieurs appareils :

• Vue mobile : de 320 px à 428 px
• Vue tablette : de 480 px à 768 px
• Vue desktop : à partir de 640 px et plus

Tester votre email sur ces différentes résolutions vous permet d’anticiper d’éventuels problèmes de mise en page et d’assurer une expérience utilisateur fluide, quel que soit le l’environnement utilisé par vos lecteurs.