Come funzionano i fallback
Il motore di fallback è il cuore di MailInApp. Esiste perché i client email non sono d'accordo su nulla: alcuni renderizzano il CSS moderno, alcuni eliminano i tag <style>, e il classico Outlook renderizza le email con il motore di Microsoft Word. Invece di progettare per il minimo comune denominatore, progetti una sola volta — ed è il motore a compilare ogni blocco in tre livelli.
I tre livelli
Livello 1 — Cinetico
Interattività CSS completa: caroselli che scorrono, fisarmoniche che si espandono, rivelazioni che si animano. Il markup cinetico è costruito su macchine a stati CSS — caselle di controllo e pulsanti di opzione nascosti il cui stato :checked determina cosa è visibile — perché è questa l'interattività che i client email supportano davvero. Non viene mai usato JavaScript; ogni client email lo elimina.
Il rendering cinetico raggiunge Gmail (app web e mobile), Apple Mail, Yahoo Mail e Samsung Mail — la grande maggioranza delle caselle di posta dei consumatori.
Livello 2 — Statico
Alcuni client eliminano completamente i blocchi <style> (e Gmail li rimuove dai messaggi troncati). Per loro, ogni blocco si riduce a contenuto pulito e impilato con un link di call-to-action — per votare, per aprire la galleria, per inviare il modulo — che punta alla vista live ospitata. I link semplici funzionano nel 100% dei client email, il che rende questo livello universale.
Livello 3 — Outlook
Il classico Outlook per Windows renderizza con Word, che non supporta né il CSS cinetico né la maggior parte dei layout moderni. Il motore genera una versione dedicata basata su tabelle di ogni blocco all'interno di commenti condizionali di Outlook — markup che solo il motore di Word vede. I destinatari sul classico Outlook ottengono un'email pulita e intenzionale, mai un'email rotta.
Un'unica email, ogni casella di posta
Tutti e tre i livelli vengono spediti all'interno dello stesso file HTML. Quale livello un destinatario vede è deciso dalle regole di rendering proprie del suo client, non da un fragile rilevamento del client:
- i client che supportano il CSS cinetico renderizzano il Livello 1 e nascondono la variante statica;
- i client che eliminano gli stili renderizzano naturalmente il Livello 2;
- il motore di Word vede solo il Livello 3, tramite commenti condizionali.
L'interazione segue la stessa filosofia
I blocchi che raccolgono dati (sondaggi, valutazioni, moduli) usano per impostazione predefinita l'interazione basata su link — ogni opzione è un link semplice che registra la risposta — perché i link sono l'unico elemento primitivo che funziona ovunque. L'invio di moduli all'interno dell'email si aggiunge sopra come miglioramento progressivo nei client che lo supportano. Dettagli in Interazioni e analisi.
Cosa il motore si rifiuta di fare
Parte del compito del motore è dire di no. Le tecniche con supporto scarso o incoerente da parte dei client — JavaScript, video incorporati, elementi <details>, variabili CSS — non vengono mai usate, per quanto allettante possa sembrare la demo. Se una tecnica non può degradare in modo elegante, non viene distribuita. Il quadro completo del supporto è in Supporto dei client email.
AMP for Email riceve una menzione esplicita tutta sua, non solo una citazione in quell'elenco: è un compromesso deliberato, non una funzionalità mancante. Vedi Perché non AMP for Email?