In questa guida ti mostrerò come creare una semplice email responsive in HTML che funzionerà su ogni client email, includendo anche tutti i client e applicazioni per smartphone. Utilizza solo media query necessari e per assicurare la massima compatibilità, un approccio a larghezza fluida.
Media query: Solo metà della soluzione
C’era un tempo in cui le media query erano abbastanza per ottenere email responsive che funzionavano con le applicazioni email per iOS e Android, che supportano entrambi le media query.
Da allora, c’è stata una proliferazione di applicazioni di posta creati per le piattaforme iOS e Android con vari gradi di supporto per i metodi di sviluppo per le email responsive.
Degna di nota è l’ultimo aggiornamento per l’app Gmail per Android, che è due volte così popolare come l’applicazione di posta predefinita per gli utenti Android (che ora comprendono 11% del totale delle aperture).
Non ha mai supportato le media query in passato riducendo le email comprimendone la dimensione della tabella esterna per adattarsi all’interno dell’area visibile dello schermo. È difficile controllare quando la vostra intera email si basa sulle media query per essere visualizzate correttamente nel telefono, spesso vengono generati risultati molto sgradevoli.
Perché il fluido è il nuovo nero
La buona notizia è che puoi disegnare e costruire una email che si mostrerà perfetta in ogni applicazione per la posta, includendo anche quelle che non supportano le media query. Puoi fare tutto ciò usando un layout fluido.
Esistono, tuttavia, alcuni compromessi che si devono fare per il design. I layout con colonne uguali che si riducono poi ad una singola colonna, non funzionano molto bene con questo metodo. Se puoi imparare a vivere senza di loro, ci sono molte grafiche funzionali che possono funzionare molto bene.
