Progettazione Email Responsive: Una Guida Tecnica

Oltre il 60% delle email viene aperto su dispositivi mobili. Il design responsive non è opzionale. Ma l’email responsive è più difficile del web responsive. Il supporto per le media query varia. Flexbox non funziona. Sei bloccato con le tabelle.

Questa guida copre tecniche che funzionano realmente tra i client email. Se vuoi saltare la complessità, tool come Sequenzy gestiscono il comportamento responsive automaticamente nel loro builder visivo.

La Realtà dell’Email Mobile

I client email su mobile gestiscono il design responsive in modo diverso:

• Apple Mail (iOS): Supporto completo per media query, funziona come un browser
• Gmail App: Supporta media query dal 2016, ma con stranezze
• Outlook App: Supporto limitato per media query
• Samsung Mail: Supporto generalmente buono

La sfida è progettare per tutti loro. Alcuni supportano media query, altri no. Il tuo layout ha bisogno di fallback.

Layout Fluidi: La Base

Inizia con larghezze fluide. Invece di larghezze fisse in pixel, usa percentuali con vincoli max-width:

<table role="presentation" width="100%" style="max-width: 600px;">
  <tr>
    <td style="padding: 20px;">
      Content flows to fill available width
    </td>
  </tr>
</table>

Questo funziona ovunque. Su desktop, l’email è larga 600px. Su mobile, si restringe per adattarsi allo schermo. Nessuna media query richiesta.

Media Query per Miglioramenti

Le media query ti permettono di personalizzare l’esperienza mobile nei client che le supportano:

<style>
  @media screen and (max-width: 600px) {
    .column {
      width: 100% !important;
      display: block !important;
    }
    .stack-on-mobile {
      display: block !important;
      width: 100% !important;
    }
    .hide-on-mobile {
      display: none !important;
    }
    .mobile-padding {
      padding: 10px !important;
    }
  }
</style>

Tecniche chiave:

• Impila colonne: Converti colonne side-by-side in blocchi impilati
• Regola padding: Riduci padding su schermi più piccoli
• Nascondi elementi: Rimuovi contenuto secondario su mobile
• Ridimensiona immagini: Rendi le immagini a larghezza intera

Le dichiarazioni !important sono necessarie perché gli stili inline hanno alta specificità.

Il Metodo Hybrid/Spongy

Questa tecnica usa commenti condizionali e CSS per creare layout responsive senza media query:

<!--[if mso]>
<table role="presentation" width="600">
<tr>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px;">
  Column 1 content
</div>

<!--[if mso]>
</td>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px;">
  Column 2 content
</div>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Questo crea colonne side-by-side in Outlook (che legge i commenti condizionali) e colonne impilate ovunque altro (che usa gli elementi div). Nessuna media query necessaria.

Immagini Responsive

Le immagini dovrebbero scalare con i loro contenitori:

<img src="image.jpg"
     width="600"
     style="display: block; max-width: 100%; height: auto;"
     alt="Description">

L’attributo width imposta la dimensione intesa. max-width: 100% previene l’overflow. height: auto mantiene il rapporto d’aspetto.

Pulsanti Amichevoli al Touch

Gli utenti mobile toccano, non cliccano. I pulsanti hanno bisogno di dimensioni adeguate:

<table role="presentation">
  <tr>
    <td style="background-color: #007bff; border-radius: 4px; padding: 12px 24px;">
      <a href="https://example.com"
         style="color: #ffffff; text-decoration: none; font-weight: bold; display: block;">
        Click Here
      </a>
    </td>
  </tr>
</table>

Target touch minimo: 44x44 pixel (linea guida Apple). Più padding è meglio che meno.

Test del Comportamento Responsive

Testa su dispositivi reali quando possibile. Emulatori e preview non catturano tutto:

• Invia email di test ai tuoi dispositivi
• Usa Litmus o Email on Acid per preview automatizzate
• Testa entrambe le orientazioni portrait e landscape
• Controlla con immagini disabilitate

Usare Framework per Responsive

Framework come MJML gestiscono il design responsive automaticamente:

<mj-section>
  <mj-column>
    <mj-text>Column 1</mj-text>
  </mj-column>
  <mj-column>
    <mj-text>Column 2</mj-text>
  </mj-column>
</mj-section>

Questo MJML compila in HTML responsive. Le colonne si impilano su mobile automaticamente. Nessuna media query manuale.

Builder visivi come Sequenzy funzionano similmente. I blocchi sono pre-configurati per comportamento responsive. Trascina componenti, personalizza contenuto, la gestione responsive è integrata.

Pattern Responsive Comuni

Colonna Singola (Mobile-First)

Inizia con un layout a colonna singola. Funziona ovunque e richiede minime regolazioni responsive.

Due Colonne a Impilate

Side-by-side su desktop, impilate su mobile. Il pattern responsive più comune. Usa il metodo ibrido o media query.

Immagine Hero con CTA

Immagine a larghezza intera seguita da testo centrato e pulsante. Funziona bene a qualsiasi dimensione. L’immagine scala, il testo rimane leggibile.

In Conclusione

L’email responsive è realizzabile ma richiede comprensione dei vincoli. Inizia con layout fluidi, migliora con media query dove supportate, e testa accuratamente.

Se la complessità tecnica è scoraggiante, framework come MJML o piattaforme come Sequenzy la gestiscono per te. L’output è testato tra i client, e il comportamento responsive è integrato nei componenti.