Pourquoi plusieurs images s’affichent-elles les unes en dessous des autres ou trop larges sur mobile ?

J’ai placé plusieurs images (par exemple, 3 logos de marque ou de produit) côte à côte dans un e-mail.
La mise en page est correcte sur l’ordinateur, mais sur le smartphone, les images s’affichent les unes en dessous des autres ou les colonnes sont très larges, bien que les images elles-mêmes soient petites. Quelle en est la raison et comment puis-je contrôler cela ? Il est important de comprendre les défis liés à l’utilisation de plusieurs images sur mobile.

Plusieurs images ne s’affichent souvent pas de manière optimale sur mobile. Ce comportement correspond au comportement réactif standard de MJML, car MJML est conçu pour le mobile :

• Les colonnes (mj-column) sont empilées sur 100 % de la largeur par défaut sur mobile
• Cela crée des colonnes individuelles très larges
• Si, en même temps, l’option « Fluid on mobile » est réglée sur « Oui », l’image s’affiche sur toute la largeur

Ce que fait « Fluid on Mobile » – et ce qu’il ne fait pas

Fluid on Mobile = No signifie :

• L’image n’est pas automatiquement mise à l’échelle sur toute la largeur sur mobile
• La largeur d’image définie (par exemple, 120px) est conservée

Mais :

• La colonne environnante reste à 100 % de la largeur
• La mise en page (côte à côte ou les uns en dessous des autres) n’est pas affectée par cela

Solution : utiliser mj-group pour les colonnes fixes sur mobile

Pour que plusieurs images restent côte à côte sur mobile, les colonnes doivent être regroupées logiquement.

Pour ce faire, un mj-group est utilisé dans MJML :

• mj-group empêche l’empilement automatique des colonnes
• Les largeurs de colonne en pourcentage (33.33 %, 50 %) sont conservées
• Les colonnes à l’intérieur d’un groupe doivent impérativement avoir une largeur en pourcentage (pas en pixels)

Comment afficher plusieurs images côte à côte dans Aivie

1. Ouvrez l’Aivie E-mail-Builder
2. Sélectionnez le bloc « Série d’images » sur le côté gauche
3. Sélectionnez l’image appropriée en double-cliquant dessus
4. Ajoutez d’autres images comme bloc si nécessaire, ou supprimez les images inutiles

Avancé : Afficher plusieurs images côte à côte via le code

Vous pouvez également résoudre ce problème via le code. Voici un exemple de code pour une mise en page avec trois images :

  <mj-group>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
  </mj-group>

Quand regrouper vos images

Utiliser mj-group toujours lorsque :

• Les logos, les marques ou les produits sont visuellement liés
• Les éléments doivent rester côte à côte sur mobile

Cela permet de contrôler précisément les mises en page d’e-mails.

Si vous souhaitez contrôler davantage la façon dont vos e-mails s’affichent sur mobile, cet article pourrait vous intéresser : Comment afficher des images ou des boutons uniquement sur ordinateur ou uniquement sur mobile ?

Pour en savoir plus sur l’écriture de code avec mj-group, consultez la documentation MJML.