Approccio al layout basato sulle tabelle

I client di posta elettronica, in particolare Outlook su Windows, che utilizza il motore di rendering di Microsoft Word, non supportano flexbox, grid e nemmeno un layout affidabile a livello di blocco. Le tabelle sono l'unico elemento strutturale che viene visualizzato in modo coerente in tutti i principali client di posta.

Ogni email responsive inizia con una <table> esterna larga il 100%, che funge da corpo dell'email, seguita da una tabella interna a larghezza fissa, comunemente di 600px, che contiene il contenuto effettivo. Questo schema a due livelli è la base di quasi ogni template di produzione.

Includa sempre cellpadding="0" cellspacing="0" border="0" in ogni tabella. Senza questi attributi, Outlook inserisce spazi imprevisti. Aggiungere role="presentation" indica ai lettori di schermo di ignorare la semantica della tabella, cosa corretta perché le tabelle di layout non sono tabelle di dati.

Per creare più colonne, annidi una tabella con due celle <td> nella riga del contenuto. Ogni cella contiene una colonna. Eviti div+float: Outlook ignora float e impila comunque le colonne in verticale, rovinando il design.

L'area di anteprima desktop de facto è larga circa 600px. Progettare per questa larghezza mantiene l'email comodamente visibile senza scorrimento orizzontale contemporaneamente in Outlook, Gmail desktop, Apple Mail, Yahoo e Thunderbird.

Per gli schermi piccoli, selezioni le celle della tabella interna con una media query che imposta width su 100% e display su block, facendo impilare verticalmente le colonne. iOS Mail e Gmail Android rispettano le media query; Outlook 365 desktop le ignora, ma mantiene il layout desktop da 600px.

I colori e le immagini di sfondo devono essere applicati alle celle <td>, non ai div. Outlook supporta in modo affidabile l'attributo bgcolor su td, mentre CSS background-color su un div potrebbe essere rimosso o completamente ignorato, a seconda del client.

Outlook ha bisogno di Vector Markup Language (VML) per le immagini di sfondo. Racchiuda CSS background-image moderno in commenti condizionali <!--[if mso]>...<![endif]--> con un fallback inline v:rect, così Outlook visualizza l'immagine mentre tutti gli altri client usano il CSS.

Eviti flexbox, grid, proprietà personalizzate (supportate solo parzialmente) e la maggior parte del posizionamento. Si attenga a display: block/inline, larghezze fisse tramite attributi e stili inline. Il risultato appare datato secondo gli standard web, ma viene visualizzato in modo identico in ogni casella di posta.

Usi cellpadding (attributo) e una singola cella <td> con padding per lo spazio interno. I margini sulle celle delle tabelle non sono affidabili in Outlook; il padding su td è universale. Combini bgcolor e padding sullo stesso td per creare componenti «card» senza div.

Aggiunga role="presentation" a ogni tabella di layout, così i lettori di schermo non annunciano «riga, colonna 1 di 2». Includa inoltre un testo alt per ogni immagine, testo reale per qualsiasi contenuto (non immagini di testo) e un ordine chiaro e gerarchico delle intestazioni.

Perché per strutturare le email si usano le tabelle, invece dei div con CSS flexbox?

Il layout delle email HTML usa tabelle annidate con cellpadding/cellspacing/border impostati su zero e role="presentation". Una tabella esterna larga il 100% centra una tabella interna da 600px; le celle td annidate formano colonne che le media query possono impilare sui dispositivi mobili. Eviti flexbox e grid, usi bgcolor su td e aggiunga fallback VML per gli sfondi di Outlook.