Outlook è uno dei client email più utilizzati, ma le sue diverse versioni renderizzano le email in modo diverso. Le versioni precedenti, come Outlook 2000–2003, utilizzavano Internet Explorer come motore di rendering. Con il rilascio di Outlook 2007, il motore di rendering è passato a Microsoft Word, che non supporta molte proprietà HTML e CSS standard e presenta bug propri.

Sia Internet Explorer sia Microsoft Word presentano limitazioni specifiche, che possono causare una visualizzazione errata o distorta delle email.

Problemi comuni di rendering in Outlook e relative soluzioni

Quando progetti le tue email, tieni presenti i seguenti problemi comuni:

Immagini di sfondo e stile dei pulsanti in Outlook

• ⚠️Problema: Molte versioni di Outlook — in particolare le versioni desktop classiche che utilizzano Microsoft Word come motore di rendering — supportano in modo limitato le immagini di sfondo basate su CSS e gli stili moderni dei pulsanti, come gli angoli arrotondati. Per visualizzare correttamente questi elementi, Outlook classico si basa su VML (Vector Markup Language). Senza VML, le immagini di sfondo potrebbero non essere renderizzate e i pulsanti potrebbero apparire piatti o non corretti.

  Sebbene le versioni web più recenti di Outlook, come Outlook.com e la webmail di Microsoft 365, supportino gli sfondi CSS, le versioni desktop classiche richiedono ancora soluzioni di fallback.

• 📉Impatto:
  • Le immagini di sfondo potrebbero non essere visualizzate.
  • I pulsanti potrebbero perdere lo stile e apparire come semplici rettangoli.
  • Le email possono sembrare incomplete o visivamente incoerenti tra le diverse versioni di Outlook.
• 🛠️Soluzione:
  • Utilizza un colore di sfondo pieno come fallback.
  • Per una compatibilità completa, utilizza VML per renderizzare pulsanti e immagini di sfondo in Outlook desktop classico.
  • In alternativa, utilizza un’immagine statica del pulsante collegata a un URL, oppure inserisci gli elementi visivi di sfondo come normali blocchi <img>.

• Esempi di immagini di sfondo:

  • ❌ CSS standard, funziona nei client moderni ma non in Outlook desktop classico:

  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Questa è un’immagine di sfondo (metodo CSS).
      </td>
    </tr>
  </table>

  • ✅ Fallback VML, funziona in Outlook desktop classico:

  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
      <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/>
      <v:textbox inset="0,0,0,0">
  <![endif]-->
  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Questa è un’immagine di sfondo (VML per Outlook).
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
  <![endif]-->

• Esempi di pulsanti arrotondati:

  • ❌ Pulsante CSS standard, non supportato in Outlook desktop classico:

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;">
          Pulsante arrotondato
        </a>
      </td>
    </tr>
  </table>

  • ✅ Pulsante VML per Outlook desktop classico:

  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Pulsante arrotondato
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-- -->
  <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;">
    Pulsante arrotondato
  </a>
  <!--<![endif]-->

Blocco predefinito delle immagini

• ⚠️Problema: Outlook può bloccare le immagini a meno che il mittente non sia considerato attendibile.
• 📉Impatto: Le email possono apparire vuote o non corrette alla prima visualizzazione.
• 🛠️Soluzione: Aggiungi sempre un testo alternativo descrittivo e valuta l’uso di colori di sfondo o contenuti HTML di fallback.

Ridimensionamento delle immagini in Outlook

• ⚠️Problema: Outlook classico può renderizzare le immagini nella loro dimensione nativa originale, ignorando le larghezze definite tramite CSS. Questo è particolarmente problematico quando si tenta di ridurre immagini grandi e ad alta risoluzione usando solo CSS, una pratica comune per supportare schermi ad alta densità di pixel.
• 📉Impatto:
  • Le immagini possono apparire troppo grandi in Outlook classico.
  • I layout possono rompersi o diventare incoerenti tra i diversi client email.
• 🛠️Soluzione: Per garantire dimensioni coerenti delle immagini in Outlook, utilizza sempre l’attributo HTML width direttamente nel tag <img>. Outlook rispetta questo attributo e adatterà automaticamente l’altezza per mantenere le proporzioni.

✅ Corretto, si ridimensiona in Outlook classico:

<img src="image.jpg" width="300" style="width:300px;">

❌ Errato, Outlook classico potrebbe ignorarlo:

<img src="image.jpg" style="width:300px;">

Supporto limitato per le GIF animate

• ⚠️Problema: Le versioni 2007–2016 di Outlook classico per Windows mostrano solo il primo fotogramma di una GIF.

  L’animazione GIF è supportata nelle versioni più recenti di Outlook per Microsoft 365, nelle app mobili di Outlook e in Outlook.com. In Outlook per Microsoft 365, la riproduzione può dipendere anche dalle impostazioni di animazione di Windows dell’utente.
• 📉Impatto: Se le informazioni chiave compaiono nei fotogrammi successivi, gli utenti non le vedranno.
• 🛠️Soluzione: Assicurati che il primo fotogramma includa il tuo CTA o il messaggio più importante.

Rendering incoerente dei font

• ⚠️Problema: In molte versioni desktop di Outlook, i font personalizzati non sono supportati. Quando inserisci un font personalizzato per primo nel tuo stack di font, Outlook potrebbe ignorare l’intero stack e usare Times New Roman come impostazione predefinita, anche se hai definito font di fallback sicuri.
• 📉Impatto: Questo causa una tipografia incoerente e può compromettere il branding, il layout e la leggibilità della tua email quando viene visualizzata in Outlook.
• 🛠️Soluzioni:

  • ✅ Usa i selettori di attributo per sovrascrivere i font personalizzati:
    Scrivi il tuo stack di font come di consueto, ma posiziona il font personalizzato alla fine dell’elenco. Poi aggiungi questo CSS:

    [style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }

    Questo codice assicura che i client email che supportano i selettori di attributo, come Gmail, Apple Mail e la maggior parte dei servizi webmail, utilizzino il tuo font personalizzato se disponibile. Outlook classico ignora i selettori di attributo come [style*="..."], quindi utilizzerà i font di fallback che hai specificato.

    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
        <style>
          div {font-family: Helvetica, sans-serif, 'Tangerine';}
    
          [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
        </style>
      </head>
      <body>
        <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Esempio di font personalizzato</div>
      </body>
    </html>

  • ✅ Applica CSS condizionale solo per Outlook usando commenti MSO:

    In alternativa, puoi definire il tuo stack di font personalizzato nel CSS e usare un’istruzione condizionale MSO per sovrascriverlo con font di sistema standard specificamente per Outlook.

    <style>
      div { font-family: 'CustomFont', Helvetica, sans-serif; }
    </style>
    
    <!--[if gte mso 9]>
      <style type="text/css">
        div { font-family: Helvetica, Arial, sans-serif !important; }
      </style>
    <![endif]-->

  • ✅ Oppure usa semplicemente font di sistema standard, come Arial, Calibri, Times New Roman o Verdana, che sono pienamente supportati nelle varie versioni di Outlook.

Problemi di stile degli elenchi in Outlook

• ⚠️Problema: I punti elenco e i numeri potrebbero non essere visualizzati come previsto. Outlook classico non mantiene sempre lo stile predefinito degli elenchi, soprattutto quando gli elenchi sono annidati all’interno di tabelle o div.
• 📉Impatto: Gli elenchi possono apparire come testo normale, senza punti elenco o numeri.
• 🛠️Soluzione: Usa stili inline o contenuti di fallback. Puoi anche aggiungere manualmente simboli, come •, oppure utilizzare celle <td> per creare un falso stile elenco.

❌ HTML problematico, potrebbe non essere visualizzato correttamente in Outlook classico:

<table>
  <tr>
    <td>
      <ul>
        <li>Primo punto</li>
        <li>Secondo punto</li>
      </ul>
    </td>
  </tr>
</table>

✅ HTML migliorato, falso elenco compatibile con Outlook:

<table>
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 14px;">
      • Primo punto<br>
      • Secondo punto
    </td>
  </tr>
</table>

Colonne fantasma: correggere l’allineamento delle colonne in Outlook

• ⚠️Problema: Outlook desktop classico spesso gestisce male le larghezze esatte delle colonne nei layout affiancati. Anche le email responsive create con due colonne, come layout a due colonne che sommano 600 px, possono apparire disallineate o impilate in modo errato.
• 📉Impatto:
  • Le colonne possono spostarsi, impilarsi in modo errato o mostrare spazi.
  • I layout che vengono visualizzati correttamente in webmail o su dispositivi mobili possono rompersi in Outlook desktop classico.
• 🛠️Soluzione: Avvolgi le tabelle delle colonne all’interno di una tabella “fantasma” a larghezza fissa visibile solo in Outlook, usando commenti condizionali MSO. Outlook vede questa tabella fantasma e renderizza le colonne, mentre gli altri client email la ignorano, preservando il comportamento responsive altrove.

🎯 Esempio HTML

<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="main_container">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center"><tr>
          <td width="450">
      <![endif]-->

      <table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Contenuto della colonna sinistra</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
          </td><td width="150">
      <![endif]-->

      <table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Contenuto della colonna destra</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
      <![endif]-->

    </td>
  </tr>
</table>

Riepilogo: Usa colonne fantasma avvolte in commenti MSO per forzare le larghezze delle colonne in Outlook desktop classico senza influire sul layout altrove. È una soluzione leggera specifica per Outlook che mantiene un design pulito e responsive in tutti gli altri client.

Linee bianche nelle email di Outlook

• ⚠️Problema: Outlook desktop classico può occasionalmente inserire linee orizzontali bianche indesiderate tra i blocchi di contenuto a causa di errori di arrotondamento nelle conversioni da pixel a punti e di una gestione incoerente delle altezze delle tabelle.
• 📉Impatto:
  • Compaiono spazi indesiderati nei layout.
  • Interrompe il flusso visivo e la coerenza del brand.
  • Difficile da prevedere: può apparire in modo casuale.
• 🛠️Soluzioni, provane una o più:

1. Usa valori di pixel pari, preferibilmente multipli di 4
   Imposta font-size, line-height, padding e height su numeri pari, preferibilmente divisibili per 4, per ridurre gli errori di arrotondamento.

2. Inserisci interruzioni fantasma specifiche per Outlook
   Evita gli spazi con un’interruzione di riga solo per MSO:

   <!--[if gte mso 12]><br /><![endif]-->

3. Usa codice specifico per Microsoft
   Questo snippet può aiutare a ridurre gli spazi indesiderati comprimendo esplicitamente bordi e spaziatura delle tabelle in Outlook:

   <!--[if gte mso 9]>
   <style type="text/css">
     table {
       border-collapse: collapse;
       border-spacing: 0;
     }
   </style>
   <![endif]-->

   Aggiungi questo codice alla sezione <head> della tua email e testalo accuratamente. A seconda del layout, potrebbe influire su altri elementi, quindi assicurati sempre di visualizzare in anteprima la tua email in Outlook prima di finalizzarla.

4. Aggiungi uno spazio unificatore come buffer
   Una soluzione alternativa comune consiste nell’aggiungere uno spazio unificatore ( ) appena prima della chiusura del tag <td>:

   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td>
         La tua offerta esclusiva ti aspetta — clicca qui sotto per ottenere il tuo sconto!<br>&nbsp;
       </td>
     </tr>
   </table>

   Questo può aggiungere una piccola quantità di spazio extra sotto il contenuto, quindi assicurati di visualizzare l’anteprima e regolare il layout se necessario.

5. Abbina i colori di sfondo
   Nascondi le linee impostando lo stesso sfondo per il body e per le righe della tabella problematiche:

   <!--[if gte mso 9]>
     <style>body { background-color: #123456 !important; }</style>
   <![endif]-->

🎯 Esempio combinato

<!--[if (gte mso 9)|(IE)]>
  <style>
    table { border-collapse: collapse !important; border-spacing: 0 !important; }
  </style>
<![endif]-->

<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
  <tr>
    <td style="font-size:16px; line-height:16px; padding:0;">
      Contenuto sopra la linea
      <!--[if gte mso 12]><br /><![endif]-->
      &nbsp;
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Contenuto sotto la linea</td></tr>
      </table>
    </td>
  </tr>
</table>

🛠 Scheda rapida delle soluzioni