Template Newsletter

Struttura base

Doctype e head

Il doctype standard per le email HTML è XHTML 1.0 Transitional — garantisce il comportamento più consistente tra i client. L'attributo xmlns su <html> abilita il namespace per i commenti condizionali Outlook.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>Oggetto email</title>
  <style type="text/css">
    /* regole globali e media query qui */
  </style>
</head>

format-detection=telephone=no — impedisce a iOS di linkare automaticamente i numeri di telefono nel testo
Il <title> viene mostrato nel pannello di anteprima di alcuni client (es. Apple Mail)

Preheader

Il preheader è il testo di anteprima visibile nelle inbox prima di aprire l'email, subito dopo l'oggetto. Va inserito come primissimo elemento del body, nascosto visivamente con CSS.

<body>
  <!-- Preheader: visibile nell'anteprima inbox, nascosto nell'email -->
  <span style="display:none; font-size:0; line-height:0; max-height:0; max-width:0;
    opacity:0; overflow:hidden; mso-hide:all;">
    Testo preheader, idealmente 85-100 caratteri.
  </span>

  <!-- wrapper principale -->
</body>

Lunghezza ideale: 85–100 caratteri (oltre viene troncato)
Se non specificato, i client mostrano le prime parole del body — spesso testo non desiderato (es. “Visualizza online”, “Aggiungici ai contatti”)

Layout e larghezza

Larghezza massima consigliata: 600px per desktop, 320–480px per mobile
Struttura: tabella wrapper centrata con width="100%" + tabella interna a 600px fissa
Attributi obbligatori su ogni tabella: cellpadding="0" cellspacing="0" border="0"
Usare role="presentation" sulle tabelle layout (accessibilità)

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td align="center" bgcolor="#f4f4f4">
      <!-- Tabella contenuto, max 600px -->
      <table width="600" cellpadding="0" cellspacing="0" border="0" role="presentation"
        style="max-width:600px;">
        ...
      </table>
    </td>
  </tr>
</table>

CSS e stili

CSS inline

La maggior parte dei client email rimuove o ignora il blocco <style>. Tutti gli stili critici devono essere inline direttamente sull’elemento.

Usare apici doppi nell’attributo style — gli apici singoli causano problemi in alcuni parser
Preferire regole CSS condensed: font: bold 16px/1.5 Arial, sans-serif invece di 4 dichiarazioni separate
Il blocco <style> nel <head> si usa per media query e reset globali — non per stili di layout
Evitare !important nel CSS inline: alcuni client lo ignorano

Colori

Sempre esadecimale 6 cifre: #ffffff — evitare shorthand #fff, rgba(), hsla()
Specificare sempre sia il colore del testo (color) sia lo sfondo (bgcolor su td + background-color inline)
bgcolor sull’attributo HTML ha supporto più ampio di background-color CSS in Outlook

Tipografia

Font-family: stack sicuro — Arial, Helvetica, sans-serif oppure Georgia, 'Times New Roman', serif
Google Fonts supportati solo in Apple Mail, iOS Mail e Thunderbird — definire sempre un fallback nel font-stack
Dimensione minima: 14px per il corpo, 11px assoluto (iOS ridimensiona automaticamente i testi sotto 13px)
line-height sempre in px, non in unità relative o percentuali
Evitare text-decoration: none inline sui link — preferire la regola nel blocco <style>

Spaziature

Usare margin per elementi generici; il padding funziona in modo affidabile solo sulle celle td
Evitare div vuoti come spacer — preferire <br> o celle td con altezza fissa
Sui pulsanti, simulare il padding con border dello stesso colore del background: evita il rendering inconsistente in Outlook

Dark mode

I client moderni (Apple Mail, Outlook su iOS/macOS, Gmail su Android) invertono o modificano i colori in dark mode. Alcune casistiche sono gestibili con CSS.

@media (prefers-color-scheme: dark) {
  .email-body { background-color: #1a1a1a !important; }
  .email-container { background-color: #2d2d2d !important; }
  .email-text { color: #f0f0f0 !important; }
}

/* Outlook 2019+ dark mode */
[data-ogsc] .email-body { background-color: #1a1a1a !important; }

Le classi nel <style> head funzionano per Apple Mail, iOS mail, Outlook app
Gmail ignora quasi tutto il CSS non inline — dark mode non controllabile iniettato da Google
Aggiungere color-scheme: light dark nel meta per indicare il supporto esplicito

Componenti

Immagini

Specificare sempre width e height come attributi HTML (non solo CSS)
display:block su ogni <img> — rimuove il gap verticale che i client aggiungono sotto le immagini inline
alt sempre compilato: molti client bloccano le immagini per default e mostrano solo l’alt
Evitare email composte solo da immagini — vengono filtrate come spam e non sono accessibili
Usare URL assolute per le immagini (https://dominio.it/img/logo.png)

<img src="https://dominio.it/img/banner.jpg"
     width="600" height="200"
     alt="Descrizione immagine"
     style="display:block; border:0;">

Pulsanti CTA

Il metodo più compatibile usa una tabella con la cella td come sfondo e un <a> con border per simulare il padding.

<!-- Metodo border (compatibile con Outlook) -->
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td align="center" bgcolor="#0066cc" style="border-radius:4px;">
      <a href="https://dominio.it/link"
         style="display:inline-block;
                border:12px solid #0066cc;
                font:bold 16px/1 Arial,sans-serif;
                color:#ffffff;
                text-decoration:none;
                white-space:nowrap;">
        Scopri di più
      </a>
    </td>
  </tr>
</table>

Il border dello stesso colore del background simula il padding in Outlook (che ignora il padding sui link)
white-space:nowrap evita che il testo del pulsante vada a capo

Sfondo immagine (background-image)

background-image CSS non è supportato in Outlook su Windows. Usare la soluzione ibrida con VML (Vector Markup Language) nei commenti condizionali.

<!--[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://dominio.it/img/bg.jpg" color="#cccccc"/>
  <v:textbox inset="0,0,0,0">
<![endif]-->
  <!-- contenuto sovrapposto allo sfondo -->
<!--[if gte mso 9]>
  </v:textbox>
</v:rect>
<![endif]-->

Per i client che non supportano né CSS né VML, specificare sempre un bgcolor di fallback sulla cella td.

Compatibilità Outlook

Commenti condizionali

Outlook su Windows (2007–2019) usa il motore di rendering Word — il più problematico. I commenti condizionali HTML permettono di servire markup specifico solo a Outlook.

<!--[if mso]> Solo Outlook <![endif]-->
<!--[if !mso]><!--> Non Outlook <!--<![endif]-->
<!--[if gte mso 9]> Outlook 2007 e superiori <![endif]-->

Problemi frequenti in Outlook

Gap sotto le immagini — aggiungere display:block sull’img
Padding ignorato sui link — usare il metodo border per i pulsanti
Larghezze non rispettate — specificare width sia come attributo che in CSS
Line-height inconsistente — sempre in px, mai em/rem/percentuale
Font non applicato — Outlook usa i font installati su Windows; il web font viene ignorato. Verificare sempre il fallback
Border-radius ignorato — su table e td non funziona; alternativa: usare VML o immagini

<!-- reset margin Outlook su paragrafi -->
<style>
  p { margin: 0; Margin: 0; }
</style>

Accessibilità

Buone pratiche

Attributo lang sull’<html> per screen reader e client di traduzione automatica
role="presentation" su tutte le tabelle usate solo per layout (non per dati)
Alt compilato su ogni immagine — compreso il logo
Rapporto contrasto colore testo/sfondo: minimo 4.5:1 (WCAG AA)
Non trasmettere informazioni solo tramite colore (es. “il pulsante verde”)
Dimensione minima area cliccabile: 44x44px per i dispositivi touch

Testing

Tool di test

Litmus — preview su oltre 90 client email e dispositivi
Email on Acid — alternativa a Litmus con analisi spam
Mailtrap — sandbox per testare l’invio senza raggiungere indirizzi reali
Mail Tester — punteggio spam, verifica SPF/DKIM/DMARC
HTML Email CSS Inliner — converte CSS a blocco in CSS inline

Da verificare prima dell’invio

Rendering in almeno: Gmail web, Apple Mail, Outlook 2019, iOS Mail, Android Gmail
Immagini bloccate — l’email deve essere comprensibile anche senza immagini
Link e CTA funzionanti
Preheader corretto nell’anteprima inbox
Visualizzazione da mobile (larghezza < 480px)