Mandi email automatica con report. Sul tuo iPhone si vede bene. Il direttore la apre su Outlook desktop: tabelle scomposte, immagini non caricate, layout rotto. Il CFO la apre su Gmail mobile: testo minuscolo, scroll laterale. Email HTML aziendale è complicata. Vediamo cosa funziona.
I 5 problemi tipici
1. Outlook desktop fa il proprio
Outlook usa motore di rendering Word, non browser. Conseguenze:
- CSS moderno (flexbox, grid) NON supportato.
- Posizionamento non rispettato.
- Margini gestiti diversamente.
- Background images problematiche.
2. Gmail tagli automaticamente
Gmail clipping: email > 102KB vengono troncate con "Show entire message".
3. Mobile è la maggioranza
60-70% email aperte su mobile. Layout deve adattarsi.
4. Filtri anti-spam aggressivi
Email con troppi link, tracker pixel, immagini grandi → spam.
5. Dark mode
Molti client supportano dark mode. Email con sfondo bianco hard-coded diventano illeggibili.
Le 10 regole pratiche
1. Tabelle invece di div
Per layout email: usa <table> non <div>. Outlook e altri client supportano meglio le tabelle.
2. CSS inline
Niente <style> nel head. CSS inline su ogni elemento:
<td style="padding:10px; color:#333;">...</td>
3. Larghezza max 600px
Email leggibili su mobile e desktop. 600px è standard de facto.
4. Font web-safe
Font sicuri:
- Arial, Helvetica.
- Verdana.
- Georgia.
- Times New Roman.
Niente Google Fonts (non sempre caricati).
5. Immagini con fallback
Sempre attributo alt:
<img src="grafico.png" alt="Grafico fatturato mensile" width="500">
6. Larghezza/altezza esplicite
Sempre specifica width/height delle immagini. Outlook le rompe altrimenti.
7. Mobile responsive con media queries
CSS dentro <style> per media queries (Outlook ignora ma è ok):
@media (max-width: 600px) {
.responsive-img { width: 100% !important; }
.desktop-only { display: none !important; }
}
8. Pre-header text
Testo nascosto dopo <body> che appare in anteprima email:
<span style="display:none;font-size:0;"> Riepilogo settimanale: fatturato +12% vs settimana scorsa </span>
9. CTA visibili
Pulsanti grandi, contrasto alto, sopra "fold" (prima area visibile):
<a href="..." style="background:#0066ff;color:#fff;padding:12px 24px;..."> Vai alla Dashboard </a>
10. Test, test, test
Prima di inviare a tutti:
- Test su Outlook desktop.
- Test su Gmail web.
- Test su iPhone Mail.
- Test su Android Gmail.
- Eventualmente: tool come Litmus o Email on Acid.
Anti-spam best practice
SPF, DKIM, DMARC
Configurazione DNS del dominio mittente:
- SPF: record DNS che autorizza server SMTP.
- DKIM: firma crittografica delle email.
- DMARC: policy anti-phishing.
Configurati = email non finiscono in spam.
Server SMTP dedicato
Per volumi alti (1000+ email/giorno), usa server SMTP dedicato (Sendgrid, Mailgun, Amazon SES). Reputazione IP migliore.
Evita parole "spam"
- Soggetto: niente "GRATIS!!!" o "URGENTE".
- Subject professionale.
- Niente font con caratteri MAIUSCOLI lunghi.
Bilanciamento testo/immagine
Email con solo immagine = sospetta. Inserisci anche testo HTML reale.
Dark mode
CSS per gestire dark mode:
@media (prefers-color-scheme: dark) {
body { background-color: #1a1a1a !important; color: #e0e0e0 !important; }
}
O usa colori semantici (es. currentColor) per adattarsi.
Template ReportIA
Template di base per email aziendali:
<!DOCTYPE html>
<html>
<head><style>...</style></head>
<body style="font-family:Arial; background:#f5f5f5;">
<table cellpadding="0" cellspacing="0" width="600" align="center">
<tr><td style="background:#0a2540;color:#fff;padding:20px;">
<img src="logo.png" alt="Logo" width="120">
</td></tr>
<tr><td style="padding:30px; background:#fff;">
<h2>Report mensile</h2>
<p>Buongiorno,</p>
... contenuto ...
</td></tr>
<tr><td style="padding:20px; color:#666; font-size:12px;">
Footer
</td></tr>
</table>
</body>
</html>
Funziona ovunque. Mobile responsive. Anti-spam friendly.
I moduli ReportIA correlati
Scopri ReportIA con email professionali.
