DEM con MJML

Guida completa per creare email marketing responsive con MJML, MailJet e Litmus

Le email dedicate al DEM (Direct Email Marketing) vengono realizzate con MJML, un framework responsive per email.

Setup MJML

Estensione VS Code

Installa l'estensione ufficiale MJML per Visual Studio Code:

Link: MJML Extension

Esportazione in HTML

Per compilare il file MJML in HTML:

1. Apri il file .mjml
2. Premi Cmd + Shift + P (Mac) o Ctrl + Shift + P (Windows/Linux)
3. Seleziona "MJML: Export HTML"

Il file HTML verrà generato nella stessa cartella del sorgente MJML.

---

Configurazione MailJet

MailJet viene usato per inviare e testare le email create.

Setup VS Code

Configura MailJet nelle impostazioni dell'estensione MJML:

Path: Code > Preferences > Settings > Extensions > MJML

Parametri da configurare:

• Mailer: mailjet
• Sender Name: Loud
• MailJet API Key: (recupera da 1Password)
• MailJet API Secret: (recupera da 1Password)
• Mail Recipients: [la_tua_email@loud-agency.info]
• Mail Sender: info@loud-agency.info

Invio Email di Test

Una volta configurato, puoi inviare email di test direttamente da VS Code:

1. Apri il file .mjml
2. Premi Cmd + Shift + P → "MJML: Send Email"
3. L'email verrà inviata al destinatario configurato

---

Testing con Litmus

Litmus permette di testare la resa dell'email su diversi client di posta (Gmail, Outlook, Apple Mail, etc.).

Credenziali: Account LOUD su 1Password

Procedura di Test

1. Crea nuovo test

   • Click su "Create New"
   • Inserisci un titolo descrittivo
   • Seleziona "Build"
   • Scegli template "Blank Email"

2. Carica HTML

   • Copia il codice HTML esportato da MJML
   • Incolla nel pannello "Code"

3. Aggiungi Immagini

   • Click su "Insert > Image"
   • Upload delle immagini necessarie

4. Fix Path Immagini

   • Rimuovi /images dai path con Find & Replace
   • Shortcut: Cmd + F nella finestra "Code"
   • Find: /images/
   • Replace: (vuoto)

5. Verifica Preview

   • Tab "Browser": Anteprima browser
   • Tab "Email Previews": Resa su vari client email

⚠️ Limiti Account

• Ogni click su "Update Previews & QA Tabs" genera 20 preview
• Account LOUD: 1000 preview/mese
• Verifica usage: [Account Name] > Settings > Usage

💡 Suggerimento: Genera preview solo quando necessario per non esaurire il limite mensile.

---

Preparazione File Photoshop

Il file PSD sorgente deve rispettare queste specifiche:

Impostazioni Documento

• Larghezza: 600px (standard email)
• Risoluzione: 72 ppi (pixel/pollice)

Export per Retina Display

Per ottenere immagini nitide su display retina:

1. Elimina sfondo bianco dai livelli
2. Aumenta risoluzione: Immagine > Dimensione immagine > Risoluzione → 144 ppi
3. Esporta PNG: Con sfondo trasparente
4. Taglia elementi: Usa strumento Taglierina
5. Rifila automatico: Immagine > Rifila (pixel trasparenti)

📐 Dimensioni finali: Gli elementi esportati da 144ppi sono doppi rispetto all'originale (per evitare sfocatura retina).

---

Workflow Creazione DEM

Step Operativi

1. ✅ Sviluppo - Crea file .mjml con struttura email
2. ✅ Compilazione - Esporta HTML con estensione VS Code
3. ✅ Test Interno - Invia email di test con MailJet
4. ✅ Test Multi-Client - Verifica resa su Litmus
5. ✅ Invio Cliente - Invia versione definitiva con MailJet
6. ✅ Archiviazione - Salva in ZIP senza file MJML

---

Struttura Documento MJML

Template Base

<mjml>
  <mj-head>
    <mj-title>Title Email</mj-title>
    <mj-preview>Testo anteprima visibile prima dell'apertura...</mj-preview>

    <mj-attributes>
      <!-- Attributi globali -->
    </mj-attributes>

    <mj-style inline="inline">
      /* Stili inline */
    </mj-style>

    <mj-style>
      /* Stili non inline */
    </mj-style>
  </mj-head>

  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Contenuto -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

---

Componenti MJML

mj-attributes

Definisce attributi globali validi in tutto il documento:

<mj-head>
  <mj-attributes>
    <mj-section padding="0" />
    <mj-text
      font-family="Helvetica"
      font-size="16px"
      font-weight="regular"
      align="center"
      color="#FFFFFF"
      padding="0"
    />
    <mj-image padding="0" />
  </mj-attributes>
</mj-head>

mj-body

Container principale dell'email:

<mj-body background-color="#F0F0F0" width="600px">
  <!-- Contenuto email -->
</mj-body>

mj-section

Definisce una riga (row):

<mj-section>
  <!-- Colonne -->
</mj-section>

mj-column

Colonne responsive in percentuale:

<mj-section>
  <mj-column width="50%">
    <mj-text align="left" font-size="16px" line-height="25px" padding-bottom="40px">
      Colonna sinistra
    </mj-text>
  </mj-column>

  <mj-column width="50%">
    <mj-text align="left" font-size="16px" line-height="25px" padding-bottom="40px">
      Colonna destra
    </mj-text>
  </mj-column>
</mj-section>

mj-table

Per visualizzare dati tabulari (non per layout):

<mj-table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</mj-table>

mj-image

Immagini responsive:

<mj-image
  src="images/logo.png"
  width="300px"
  height="150px"
  alt="Logo"
/>

⚠️ Importante: Immagini esportate da 144dpi:

• width e height vanno impostati al 50% delle dimensioni originali
• Per allineamenti: agisci sulla percentuale colonna, non sulle dimensioni immagine

---

Tipografia

Font Sicuri per Email

Usa solo font di sistema (no web font, no embedded font).

Font raccomandati:

• Arial
• Helvetica
• Times New Roman
• Georgia
• Verdana
• Courier

Riferimento: Best Email Fonts

---

Conversione RTE Sanofi → DEM

Per Havas > Sanofi può essere richiesta la conversione RTE in DEM per Salesforce.

Documento di riferimento: G:\Drive condivisi\Materiali\Guidelines\guidelines sanofi salesforce.docx

Parte 1: Link Visualizzazione

Testo: "Se non visualizzi correttamente il messaggio, clicca qui"

Posizionamento:

• Prima dell'header
• In una <mj-section> dedicata
• NON usare tag <p>

Testi e link: Pagina 1 del documento guidelines

Parte 2: Footer Standard

Contenuto:

• Link unsub
• Aggiornamento preferenze
• Dati Sanofi

Posizionamento:

• Dopo tutti gli elementi grafici
• In una <mj-section> dedicata
• NON usare tag <p>

Testi e link: Fine pagina 1 e inizio pagina 2 del documento guidelines

Parte 3: Anti-Spam

Inserire in uno o più <mj-text>:

%%[IF "0"=="1" THEN]%%
This email was sent by: %%Member_Busname%%
%%Member_Addr%% %%Member_City%%, %%Member_State%%, %%Member_PostalCode%%, %%Member_Country%%

<a href="%%profile_center_url%%" alias="Update Profile">Update Profile</a>
%%[ENDIF]%%

Posizionamento: Stessa section del footer standard

Stile tipico:

• font-size: 12px
• color: #000

File: index.mjml

Parte 4: Snippet Unsub

⚠️ Importante: Va inserito nell'index.html (NON nel .mjml)

Codice:

%%[
  SET @subscriberkey = _subscriberkey
  SET @email = emailaddr
  SET @language = "IT"
  SET @campaignCode = __AdditionalEmailAttribute1

  SET @unsubscriptionurl = CloudPagesURl(2344,'subscriberkey',@subscriberkey,'email',@email,'campaignCode',@campaignCode,'language',@language)
]%%

Posizionamento: Prima del tag <body> nell'HTML

⚠️ ATTENZIONE: Ogni volta che esporti da MJML a HTML, devi reinserire manualmente questo snippet perché l'HTML viene sovrascritto.

Parte 5: Personalizzazione Stringhe (Opzionale)

Se richiesto, va inserito dopo lo snippet unsub, sempre nell'index.html prima del <body>.

Testi: Pagina 3 del documento guidelines

---

Versione Consulcesi

Identica alla conversione standard, ma con testo legal aggiuntivo nel footer.

Legal Footer

Posizione: Tra "aggiornamento preferenze" e "informazioni Sanofi"

Testo:

Ai sensi dell'art.13 del Regolamento UE 2016/679 (GDPR), Sanofi S.r.l.,
in qualità di Titolare del trattamento dei dati, La informa che i Suoi dati
personali raccolti, saranno protetti ed oggetto di trattamento al fine di
poterLe effettuare attività di informazione medico scientifica (attività
svolta in base al D.Lgs.219/2006) e attività amministrativo-contabile.
Il trattamento dei Suoi dati svolto in forma automatizzata e manuale,
i Suoi dati non saranno diffusi. Per leggere l'informativa privacy completa,
dove trovare anche delle indicazioni per esercitare i Suoi diritti come
previsto dalla normativa privacy,
<a href="https://image.news.email.sanofi/lib/fe3311717564047e7d1374/m/2/c8740126-2f4e-4661-871c-54917bef0d55.pdf">clicca qui</a>.

Esempio di Riferimento

Path: G:\Drive condivisi\Progetti\Havas Life Italy\Sanofi\20250225-Sviluppo_1_RTE_Xatral

---

Best Practices

Performance

• ✅ Mantieni HTML sotto 102KB (limite Gmail)
• ✅ Usa immagini ottimizzate (max 1MB totale)
• ✅ Limita a 600px di larghezza
• ✅ Evita troppe immagini pesanti

Compatibilità

• ✅ Testa sempre su Outlook (versioni desktop e web)
• ✅ Verifica su Gmail (desktop, mobile, app)
• ✅ Controlla Apple Mail (iOS e macOS)
• ✅ Usa fallback per client che bloccano immagini

Accessibilità

• ✅ Usa sempre attributo alt nelle immagini
• ✅ Testo leggibile anche senza immagini
• ✅ Contrasto testo/sfondo adeguato
• ✅ Font size minimo 14px per body text

SEO & Deliverability

• ✅ Preview text chiaro e accattivante
• ✅ Subject line under 50 caratteri
• ✅ Evita spam words ("gratis", "offerta limitata")
• ✅ Bilancia testo/immagini (non solo immagini)

---

Troubleshooting

Email Non Ricevuta

Possibili cause:

• API Key/Secret MailJet errati
• Email destinatario non configurata
• Email finita in spam

Soluzione:

• Verifica credenziali in VS Code settings
• Controlla cartella spam
• Verifica log MailJet dashboard

Immagini Non Visualizzate

Possibili cause:

• Path immagini errato
• Immagini non caricate su Litmus
• Client email blocca immagini

Soluzione:

• Verifica path relativi/assoluti
• Carica tutte le immagini su Litmus
• Aggiungi testo alternativo (alt)

Layout Rotto su Outlook

Possibili cause:

• Outlook non supporta flexbox/grid
• Padding/margin non standard
• Colonne troppo complesse

Soluzione:

• Usa componenti MJML nativi
• Evita CSS custom complessi
• Testa sempre su Litmus preview Outlook

HTML Troppo Pesante

Possibili cause:

• Troppe immagini inline
• CSS non ottimizzato
• Codice MJML ridondante

Soluzione:

• Usa immagini esterne (hosted)
• Rimuovi stili inutilizzati
• Semplifica struttura MJML

---

Risorse Utili

• MJML Documentation
• MailJet Dashboard
• Litmus Login
• Email on Acid - Testing alternativo
• Can I Email - Compatibilità CSS/HTML per email

---

💡 Pro Tip: Salva sempre una copia del file .mjml sorgente in un repository separato prima di consegnare al cliente. Il cliente riceve solo HTML + immagini in ZIP.