← Tutti gli Articoli
· 14 min di lettura

Compatibilità con i Client di Email: Cosa Funziona Dove

Sapere quali funzionalità CSS e HTML funzionano in quali client di email.

La compatibilità con i client di email è la sfida principale dello sviluppo di email HTML. A differenza dei browser web, che si sono in gran parte uniformati sugli standard, i client di email rendono HTML e CSS in modo incoerente. Questa guida documenta cosa funziona dove.

Se vuoi evitare di gestire direttamente la compatibilità, i builder di email come Sequenzy e framework come MJML gestiscono questi problemi per te. Ma comprendere il panorama ti aiuta a prendere decisioni informate.

I Principali Client di Email

Outlook (Windows)

Il client più sfidante. Outlook 2007-2019 utilizza il motore di rendering di Microsoft Word, non un motore di browser. Questo significa:

  • Nessun float CSS
  • Nessuna immagine di sfondo sui div (funziona sulle celle tabella)
  • Supporto limitato per margin/padding
  • Nessun posizionamento CSS
  • Le tabelle sono richieste per il layout

Outlook 365 (nuovo Outlook) è leggermente migliore ma ha ancora limitazioni significative.

Gmail

Gmail rimuove i tag style a meno che non siano nell'head (per alcuni client). Rimuove anche molte proprietà CSS. Limitazioni principali:

  • Rimuove alcuni selettori CSS
  • Nessun supporto per @media query incorporate in alcuni contesti
  • Richiede stili inline per affidabilità
  • Blocca le immagini esterne per impostazione predefinita

Gmail App (mobile) ha un supporto CSS migliore rispetto a Gmail web in alcune aree.

Apple Mail (macOS/iOS)

Il client di email più capace. Utilizza WebKit, simile a Safari. Supporta:

  • Media query
  • Animazione CSS (casi d'uso limitati)
  • Immagini di sfondo
  • Proprietà CSS moderne

Se il tuo pubblico è principalmente utenti Apple, hai maggiore flessibilità di design.

Yahoo Mail

Supporto CSS moderato. Rimuove alcuni stili ma meno aggressivamente di Gmail. Supporta immagini di sfondo con fallback.

Outlook.com (Hotmail)

Diverso da Outlook desktop. Utilizza un renderer basato su browser. Migliore supporto CSS rispetto a Outlook desktop ma ha ancora stranezze.

Supporto delle Proprietà CSS

Sicuro da Usare Ovunque

/* Queste funzionano in tutti i principali client */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* sulle celle tabella */
width: 100%;
max-width: 600px;

Supporto Parziale (Test Richiesto)

/* Funzionano nella maggior parte dei client, problemi in Outlook */
border-radius: 4px; /* Nessun supporto Outlook */
background-image: url(...); /* Usa VML per Outlook */
box-shadow: ...; /* Supporto limitato */
margin: 10px; /* Incoerente in Outlook */

Evitare o Usare con Cura

/* Queste causano problemi */
display: flex; /* Nessun supporto email */
display: grid; /* Nessun supporto email */
position: absolute/relative; /* Molto limitato */
float: left/right; /* Problemi Outlook */
transform: ...; /* Supporto limitato */
animation: ...; /* Solo Apple Mail */

Tecniche di Layout

Tabelle per la Struttura

Le tabelle rimangono il metodo di layout affidabile:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Contenuto qui</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Commenti Condizionali Outlook

Target specifico per Outlook:

<!--[if mso]>
  <!-- Codice solo per Outlook -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Contenuto per tutti i client
  </div>

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

VML per Immagini di Sfondo Outlook

Le immagini di sfondo sulle sezioni richiedono VML per Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Contenuto qui
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Immagini

Codice Immagine Base

<img
  src="https://example.com/image.jpg"
  alt="Descrizione"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Attributi chiave:

  • width/height: Imposta le dimensioni (Outlook ne ha bisogno)
  • display: block: Rimuove il gap sotto l'immagine
  • max-width: 100%: Ridimensionamento responsive
  • border: 0: Rimuove il bordo dell'immagine linkata

Formati Immagine

  • JPG: Foto, immagini complesse
  • PNG: Trasparenza, grafici semplici
  • GIF: Animazione (con cura)
  • SVG: Supporto limitato, evitare nelle email
  • WebP: Non supportato in Outlook

Font

Stack di Font Web-Safe

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Font Personalizzati

I web font funzionano in alcuni client (Apple Mail, iOS, alcuni Android). Usali con fallback:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Testo con font personalizzato
</p>

Outlook e Gmail useranno il fallback. Apple Mail userà il font personalizzato.

Media Query

Il supporto varia significativamente:

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

Supporto media query:

  • Apple Mail: Supporto completo
  • iOS Mail: Supporto completo
  • Gmail App (iOS): Supporto
  • Gmail App (Android): Supporto
  • Gmail (web): Limitato
  • Outlook: Nessun supporto

Usare Builder di Email per la Compatibilità

I builder di email astraggono le preoccupazioni di compatibilità. Sequenzy genera HTML che funziona tra i client. Progetti visivamente, lo strumento gestisce l'output tecnico.

Framework come MJML compilano markup semantico in HTML compatibile. Scrivi codice pulito, il framework genera le tabelle annidate e gli stili inline.

Strumenti di test come Litmus mostrano il rendering tra oltre 90 client. Vedi i problemi prima dell'invio.

Strategia di Test

  1. Testa prima in Outlook. Se funziona lì, probabilmente funziona ovunque.
  2. Controlla Gmail. La rimozione CSS può causare problemi.
  3. Verifica su mobile. Oltre il 60% delle aperture è su mobile.
  4. Testa con immagini disattivate. Assicurati che il messaggio sia chiaro senza immagini.

Il Riassunto

La compatibilità con i client di email è complessa ma gestibile. Attieniti a tecniche collaudate: tabelle per il layout, stili inline, font web-safe con fallback. Testa tra i client prima dell'invio.

Per i team che vogliono evitare la complessità, strumenti come Sequenzy e MJML gestiscono la compatibilità automaticamente. L'output è testato e ti concentri sul contenuto piuttosto che sulle stranezze di rendering.