Creare email HTML che funzionino correttamente in tutti i client di posta elettronica è una delle sfide più frustranti dello sviluppo web. Se sul web possiamo contare su browser moderni che supportano standard condivisi, nel mondo delle email ci troviamo di fronte a un panorama frammentato dove Outlook utilizza il motore di rendering di Word, Gmail rimuove buona parte del CSS e ogni client mobile ha le proprie particolarità. In questa guida vedremo come creare newsletter HTML robuste e compatibili.
Email HTML vs Web HTML: Un Mondo Diverso
La prima cosa da comprendere è che l’HTML per email è radicalmente diverso dall’HTML per il web. Mentre sul web utilizziamo CSS Grid, Flexbox, font web e animazioni, nelle email dobbiamo spesso tornare a tecniche che ricordano il web degli anni 2000. Le ragioni sono molteplici e dipendono da come i client di posta elettronica processano il codice HTML.
Gmail (sia web che app) rimuove tutto il CSS contenuto nel tag <style> per le email non provenienti da Google, supportando solo CSS inline. Outlook (versioni desktop per Windows) utilizza il motore di rendering di Microsoft Word anziché un motore browser, il che significa che Flexbox, float, background-image e molte proprietà CSS moderne semplicemente non funzionano. Apple Mail e l’app Mail di iOS sono i client più moderni e supportano quasi tutto il CSS web, ma non possiamo progettare solo per loro.
Questa frammentazione impone un approccio di sviluppo basato sul minimo comune denominatore: ciò che funziona ovunque sono le tabelle HTML per il layout e il CSS inline per lo stile. Tutto il resto è un progressive enhancement che migliora l’esperienza nei client più capaci.
Layout a Tabelle: La Base di Ogni Email
Il layout a tabelle (<table>) è ancora il metodo più affidabile per strutturare un’email HTML. Ogni sezione dell’email viene costruita come una riga (<tr>) con celle (<td>) che contengono il contenuto. La struttura base è una tabella esterna centrata con larghezza fissa:
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 600px; width: 100%;">
<tr>
<td style="padding: 20px; background-color: #ffffff;">
<h1 style="margin: 0; font-size: 24px; color: #333333;">Titolo Newsletter</h1>
<p style="margin: 16px 0; font-size: 16px; line-height: 1.5; color: #555555;">
Contenuto del paragrafo...
</p>
</td>
</tr>
</table>L’attributo role="presentation" è essenziale per l’accessibilità: indica agli screen reader che la tabella è utilizzata per il layout e non per dati tabulari. Senza questo attributo, le tecnologie assistive annuncerebbero “tabella con X righe e Y colonne” prima del contenuto, confondendo l’utente.
Per creare layout a colonne, si usano tabelle annidate con <td> affiancati. Per un layout a due colonne:
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top" style="padding-right: 10px;">
Colonna sinistra
</td>
<td width="50%" valign="top" style="padding-left: 10px;">
Colonna destra
</td>
</tr>
</table>Ogni elemento di stile — colori, padding, margini, font — deve essere specificato tramite CSS inline con l’attributo style. Questo è il requisito più laborioso della creazione di email HTML, poiché ogni singolo elemento deve avere il proprio stile completo.
Immagini, Font e Pulsanti nelle Email
Le immagini nelle email devono essere sempre ospitate su un server web (non incorporate come allegato, a meno che non si usi l’embedding in base64 che ha un supporto limitato). Ogni tag <img> deve avere l’attributo alt descrittivo, poiché molti client bloccano le immagini per impostazione predefinita. L’attributo alt diventa il testo visibile finché l’utente non decide di caricare le immagini.
<img src="https://esempio.it/img/banner.jpg" alt="Offerta speciale: 20% di sconto" width="600" style="display: block; max-width: 100%; height: auto;">I font web (Google Fonts, ecc.) non sono supportati in modo affidabile nelle email. La best practice è utilizzare font web-safe come Arial, Helvetica, Georgia e Times New Roman, specificando sempre una lista di fallback completa: font-family: Arial, Helvetica, sans-serif;. Apple Mail e alcuni client iOS supportano @font-face, quindi è possibile includerlo come progressive enhancement.
I pulsanti CTA (Call to Action) sono elementi critici nelle email di marketing. Esistono diverse tecniche per crearli, ma la più robusta è il “bulletproof button” che utilizza un <td> con background-color e un <a> con padding:
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: #0066cc; border-radius: 4px; padding: 12px 24px;">
<a href="https://esempio.it" style="color: #ffffff; text-decoration: none; font-weight: bold; display: inline-block;">Scopri di più</a>
</td>
</tr>
</table>Email Responsive e Design Adattivo
Oltre il 60% delle email viene aperto su dispositivi mobili, rendendo il design responsive essenziale. Tuttavia, dato che molti client non supportano le media query CSS, l’approccio più affidabile è il fluid design: utilizzare percentuali e max-width anziché larghezze fisse, in modo che il layout si adatti naturalmente a schermi più piccoli.
Per i client che supportano le media query (Apple Mail, l’app nativa di Android, Outlook.com), è possibile aggiungere un blocco <style> nel <head> dell’email con regole responsive. La tecnica più comune è trasformare le colonne da orizzontali a verticali su schermi piccoli, impostando display: block e width: 100% sulle celle della tabella.
Un approccio ibrido efficace combina tabelle a larghezza fissa con max-width per il fluid design e media query per il responsive design avanzato. I client che non supportano le media query vedranno comunque un layout funzionale, anche se non perfettamente ottimizzato per il mobile.
Dark Mode e Testing
Il dark mode è una sfida relativamente recente per le email HTML. Client come Apple Mail, Outlook e Gmail possono invertire automaticamente i colori dell’email quando l’utente ha attivato il tema scuro. Questo può causare problemi con loghi su sfondo trasparente che diventano invisibili o combinazioni di colori illeggibili.
Per gestire il dark mode, si possono usare la media query @media (prefers-color-scheme: dark) nei client che la supportano e adottare alcune precauzioni generali: utilizzare immagini PNG con sfondo non trasparente per i loghi, evitare il nero puro (#000000) come colore del testo (usare #333333) e testare sempre l’email in modalità scura.
Il testing è cruciale per le email HTML. Strumenti come Litmus e Email on Acid permettono di visualizzare l’anteprima dell’email in decine di client diversi senza doverli installare tutti. Per un approccio più economico, è possibile testare manualmente nei client principali: Gmail (web e app), Outlook (desktop e web), Apple Mail e l’app Mail di Samsung. Framework come MJML e Foundation for Emails semplificano enormemente la creazione di email HTML responsive generando automaticamente il codice a tabelle e il CSS inline da una sintassi più moderna e leggibile.
Hai bisogno di aiuto con la creazione di newsletter HTML professionali? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.