Perché più immagini su mobile vengono visualizzate una sotto l’altra o troppo larghe?

Ho inserito diverse immagini (ad es. 3 loghi di marchi o prodotti) una accanto all’altra in un’e-mail.
Il layout è corretto sul desktop, ma sullo smartphone le immagini vengono visualizzate una sotto l’altra oppure le colonne sono molto larghe, anche se le immagini stesse sono piccole. Qual è il motivo e come si può controllare? È importante capire le sfide associate a più immagini su mobile.

Spesso, più immagini non vengono visualizzate in modo ottimale sui dispositivi mobili. Questo comportamento corrisponde al comportamento responsive standard di MJML, poiché MJML è mobile-first:

• Le colonne (mj-column) vengono impilate al 100% della larghezza su mobile per impostazione predefinita
• Questo crea singole colonne molto larghe
• Se contemporaneamente è impostato «Fluid on mobile» su «Sì», l’immagine viene visualizzata a tutta larghezza

Cosa fa «Fluid on Mobile» e cosa no

Fluid on Mobile = No significa:

• L’immagine non viene automaticamente ridimensionata a tutta larghezza su mobile
• La larghezza dell’immagine definita (ad es. 120px) viene mantenuta

Ma:

• La colonna circostante rimane comunque larga al 100%
• Il layout (uno accanto all’altro o uno sotto l’altro) non ne risente

Soluzione: mj-group da utilizzare per colonne fisse su mobile

Affinché più immagini rimangano una accanto all’altra anche su mobile, le colonne devono essere raggruppate logicamente.

A tale scopo, in MJML viene utilizzato un mj-group:

• mj-group impedisce l’impilamento automatico delle colonne
• Le larghezze delle colonne percentuali (33.33 %, 50 %) vengono mantenute
• Le colonne all’interno di un gruppo devono necessariamente avere una larghezza in percentuale (non in pixel)

Come visualizzare più immagini affiancate in Aivie

1. Apri l’Aivie Email Builder
2. Seleziona il blocco «Serie di immagini» sul lato sinistro
3. Seleziona l’immagine desiderata con un doppio clic
4. Aggiungi altre immagini come blocco, se necessario, oppure rimuovi le immagini non necessarie

Avanzato: come visualizzare più immagini affiancate tramite codice

In alternativa, puoi risolverlo tramite il codice. Ecco un codice di esempio per un layout con tre immagini:

  <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>

Quando raggruppare le immagini

Usa mj-group sempre quando:

• Loghi, marchi o prodotti appartengono visivamente insieme
• Gli elementi devono rimanere uno accanto all’altro anche su mobile

In questo modo, i layout delle e-mail possono essere controllati con precisione.

Se vuoi controllare ulteriormente come vengono visualizzate le tue e-mail sui dispositivi mobili, questo articolo potrebbe interessarti: Come posso visualizzare immagini o pulsanti solo su desktop o solo su dispositivi mobili?

Per saperne di più sulla scrittura di codice con mj-group, consulta la documentazione MJML.