Si adatta al mobile · Gratuito · Senza registrazione
Editor Email Responsive
La maggior parte delle persone apre prima l'email sul telefono. Costruisci il layout una volta, lascia che le colonne si impilino e le immagini si adattino, e controlla la larghezza ridotta prima di esportare anche una sola riga di HTML.
Come funziona davvero il responsive
Niente di tutto questo dipende dal fatto che tu scriva una media query. Il layout è costruito con tabelle a larghezza fluida, che è ciò che sopravvive in una casella di posta, e il comportamento su mobile è un'impostazione sui blocchi che ne hanno bisogno.
- Un blocco a colonne può impilarsi su mobile, così una riga a tre colonne diventa tre righe a larghezza intera su un telefono.
- Il testo può avere una dimensione del carattere diversa per mobile, per i titoli che risultano troppo grandi quando la larghezza si riduce a metà.
- Le immagini si adattano alla larghezza del loro contenitore invece di forzare uno scorrimento orizzontale.
- Il padding e la larghezza del contenitore si impostano blocco per blocco, così la lettura resta comoda a entrambi gli estremi.
Controlla la larghezza mobile prima di inviare
L'editor alterna tra una larghezza desktop e una mobile mentre lavori, che è il momento in cui un problema di impilamento costa poco da correggere. La modalità anteprima rimuove tutta l'interfaccia di modifica, così stai guardando l'email e non lo strumento.
Perché tabelle e stili inline, non CSS moderno
I client di posta non sono browser. Diversi rimuovono del tutto il blocco <style>, alcuni ignorano flexbox e grid, e uno dei client desktop più usati renderizza l'HTML tramite il motore di un elaboratore di testi. Un'email responsive deve quindi degradare bene quando le viene tolto il CSS — una pila di tabelle fluide lo fa; una riga con flexbox no.
Ecco perché l'export ha questo aspetto. Non è un'uscita superata per trascuratezza; è la forma che continua a funzionare quando un client rifiuta il tuo foglio di stile.
Invia comunque una prova
Un editor responsive ti toglie i calcoli del layout, non il bisogno di controllare. Prima di una campagna vera, invia a te stesso l'HTML esportato e apri l'email nei client che usa davvero il tuo pubblico — è il solo modo onesto per sapere se un'email si vede bene, e nessuno può garantirti che si vedrà perfetta ovunque.
Dove si rompe di solito un layout a colonne
Il punto dove si nota più facilmente se un'email è davvero responsive è una riga di tre o quattro colonne: su desktop appare ordinata, ma se non si impila su mobile ogni colonna resta con una larghezza minima e il testo si comprime o viene tagliato. Impostare l'impilamento su quel blocco è ciò che evita questo risultato, e conviene controllarlo soprattutto nelle righe con immagine e testo insieme, perché sono quelle che richiedono più spazio quando passano a una sola colonna.
La stessa logica vale per un bottone dentro una colonna: se il blocco genitore si impila ma il bottone mantiene una larghezza fissa pensata per il desktop, può finire più largo della colonna che lo contiene. Controllarlo nella vista mobile prima di esportare individua questo genere di dettaglio in pochi secondi.
I titoli grandi sono l'altro punto critico frequente: una dimensione del carattere che sta bene in una colonna larga da desktop può occupare due o tre righe quando quella stessa colonna passa a piena larghezza su mobile. Dare a quel blocco di testo una dimensione del carattere diversa per mobile di solito basta a far tornare il titolo su una sola riga senza perdere leggibilità.
Le immagini raramente creano problemi perché si adattano di default alla larghezza del loro contenitore, ma conviene controllare la loro altezza relativa quando il contenitore passa da una colonna desktop a una larghezza piena su mobile: una foto pensata come accompagnamento laterale può finire per occupare metà schermo se non le viene impostata una larghezza massima ragionevole.
Anche lo spazio tra i blocchi merita lo stesso tipo di controllo: un margine che appare equilibrato accanto a una colonna stretta può sembrare eccessivo quando quella colonna occupa tutta la larghezza dello schermo, quindi conviene rivedere divisori e spaziatori nella vista mobile, non solo i blocchi di testo e immagine.
Controllare questi dettagli prima di ogni invio importante è ciò che distingue un'email che semplicemente non si rompe da una che si vede davvero bene sullo schermo dove la leggerà la maggior parte del tuo pubblico.
Questi controlli richiedono pochi minuti la prima volta e diventano un'abitudine rapida non appena si conoscono i punti dove un layout a colonne tende a rompersi.
Modelli con layout che si impilano
Righe multi-colonna che diventano una sola colonna su mobile — aprine una e prova la larghezza ridotta.
Domande frequenti su questo
Devo scrivere media query?
No. L'impilamento delle colonne e la dimensione del carattere su mobile sono impostazioni dei blocchi, e la tabella sottostante è fluida, quindi l'email si adatta anche dove un client rimuove il CSS.
Posso impostare una dimensione del carattere diversa per mobile?
Sì. I blocchi di testo accettano una dimensione del carattere specifica per mobile, oltre a quella desktop.
Con quali client di posta funziona bene?
L'esportazione punta al markup con tabelle e stili inline che i client più diffusi, come Gmail, Outlook e Apple Mail, interpretano in modo più prevedibile. Le differenze di rendering tra client sono un dato di fatto della posta elettronica, quindi testa sempre il tuo invio finale.