Miksi useat kuvat näkyvät matkapuhelimessa toistensa alapuolella tai liian leveinä?

Olen sijoittanut useita kuvia (esim. 3 tuotemerkin tai tuotteen logoa) vierekkäin sähköpostiin.
Asettelu on oikea työpöydällä, mutta älypuhelimessa kuvat näkyvät yksi toisensa alla tai sarakkeet ovat hyvin leveät, vaikka itse kuvat ovat pieniä. Miksi näin on – ja miten sitä voi hallita? On tärkeää ymmärtää haasteet, jotka liittyvät useisiin kuviin mobiilissa.

Useat kuvat eivät useinkaan näy optimaalisesti mobiilissa. Tämä käyttäytyminen vastaa MJML:n tavallista responsiivista käyttäytymistä. Koska MJML on mobiililaitteet ensin:

• Sarakkeet (mj-column) pinotaan oletusarvoisesti 100 %:n leveyteen mobiililaitteissa.
• Tämä luo yksittäisiä, hyvin leveitä pylväitä
• Jos ”Fluid on mobile” on samalla asetettu ”Kyllä”, kuva näytetään koko leveydeltä.

Mitä ”Fluid on Mobile” tekee – ja mitä se ei tee?

Fluid on Mobile = Ei keinoja:

• Kuva ei skaalautu automaattisesti koko leveydelle mobiililaitteessa.
• Määritelty kuvan leveys (esim. 120px) säilytetään.

Mutta:

• Ympäröivä pylväs pysyy 100 % leveänä
• Tämä ei vaikuta asetteluun (vierekkäin vs. toistensa alla).

Ratkaisu: Käytä mj-group kiinteitä sarakkeita varten mobiililaitteissa.

Sarakkeet on ryhmiteltävä loogisesti siten, että useat kuvat pysyvät vierekkäin mobiilissa.

Tätä tarkoitusta varten MJML käyttää mj-group käytetään:

• mj-group Estää pylväiden automaattisen pinoamisen
• Prosenttiset sarakeleveydet (33.33 %, 50 %) säilytetään.
• Ryhmän sisällä olevien sarakkeiden leveyden on oltava prosentteina (ei pikseleinä).

Kuinka näyttää useita kuvia vierekkäin Aivie-ohjelmassa?

1. Avaa Aivie email builder
2. Valitse vasemmalla puolella oleva ”Kuvasarja”-lohko.
3. Valitse sopiva kuva kaksoisnapsauttamalla
4. Lisää tarvittaessa lisää kuvia lohkona tai poista kuvia, joita ei tarvita.

Edistyneempi: Näytä useita kuvia vierekkäin koodin avulla.

Vaihtoehtoisesti voit ratkaista sen myös koodin avulla. Tässä on esimerkkikoodi kolmella kuvalla varustetulle ulkoasulle:

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

Milloin kuvat kannattaa ryhmitellä

Käytä aina mj-group kun:

• Logot, tuotemerkit tai tuotteet kuuluvat visuaalisesti yhteen.
• elementtien tulisi myös pysyä vierekkäin mobiililaitteissa.

Näin sähköpostin ulkoasuja voidaan hallita tarkasti.

Jos haluat hallita tarkemmin sitä, miten sähköpostisi näytetään mobiililaitteissa, tämä artikkeli voi olla mielenkiintoinen: Miten voin näyttää kuvia tai painikkeita vain työpöydällä tai vain mobiilissa?

Lisätietoja koodin kirjoittamisesta mj-group -ohjelmalla on MJML-dokumentaatiossa.