Questo manuale spiega come creare email ottimizzate per i dispositivi mobili nell’editor Stripo. Si concentra sulla configurazione pratica, sul controllo del layout e sui problemi più comuni sui dispositivi mobili, con istruzioni dettagliate passo dopo passo ed esempi che puoi applicare direttamente mentre lavori nell’editor.
Punti chiave
- Puoi modificare direttamente la versione per dispositivi mobili, senza dover indovinare il risultato: puoi passare alla visualizzazione per dispositivi mobili nell’editor, impostare qualsiasi configurazione e vedere l’email esattamente come apparirà sui telefoni.
- Puoi impostare prima gli stili globali per dispositivi mobili, poi perfezionare ogni blocco individualmente se necessario: Stripo ti permette di definire le regole base per i dispositivi mobili nelle Impostazioni Generali e di sovrascriverle per qualsiasi stripe, struttura o blocco quando serve.
- Puoi controllare cosa viene mostrato sui dispositivi mobili, non solo il suo aspetto: puoi nascondere elementi sui dispositivi mobili, cambiare l’ordine di impilamento, regolare gli spazi e decidere quali layout restano in riga o si impilano verticalmente.
Comprendere come Stripo gestisce la visualizzazione per dispositivi mobili
Cosa significa “ottimizzate per dispositivi mobili” in Stripo
Tutti i modelli email che crei con Stripo sono adattabili per impostazione predefinita, quindi i loro layout si regolano automaticamente agli schermi più piccoli. Tuttavia, puoi configurare impostazioni aggiuntive per i dispositivi mobili, così che le email risultino esattamente come desideri. Queste impostazioni includono: dimensioni del testo, dimensioni dei pulsanti (inclusi quelli a larghezza piena), spaziature (margini e padding), comportamento di impilamento dei contenitori nelle strutture e possibilità di mostrare o nascondere elementi aggiuntivi.
Tieni presente che il risultato finale dipende dal client email: le impostazioni specifiche per i dispositivi mobili si basano sulle media query e alcune app non le supportano. In questi client, le impostazioni dedicate ai dispositivi mobili possono essere ignorate e la visualizzazione può risultare identica a quella desktop.
Quali modifiche si applicano solo sui dispositivi mobili
Le impostazioni valide solo per i dispositivi mobili influenzano l’aspetto dell’email sugli smartphone, non sulla versione desktop. Includono le dimensioni del testo, le dimensioni dei pulsanti (compresi quelli a larghezza piena), le spaziature (margini e padding), il comportamento di impilamento dei contenitori nelle strutture e la possibilità di nascondere elementi nella visualizzazione per dispositivi mobili.
Quando le impostazioni per i dispositivi mobili non hanno effetto
Se i controlli per i dispositivi mobili sono inattivi o le modifiche non vengono visualizzate, verifica l’interruttore “Design adattabile”.
Design adattabile in Aspetto
Usalo quando lavori con le impostazioni di Formattazione per i dispositivi mobili:
1. Vai su Stili e Layout Globali.
2. Attiva il Design adattabile.
Se il Design adattabile è disattivato, l’email sui dispositivi mobili apparirà come nella versione desktop e la sezione Formattazione dispositivi mobili potrebbe risultare inattiva.
Iniziare da una base pulita utilizzando gli Stili Generali
Cambiare modalità di stile tra desktop e dispositivi mobili
Gli Stili Generali ti permettono di definire regole di design predefinite separatamente per desktop e dispositivi mobili. Utilizza il selettore del dispositivo nel pannello Stili Generali per passare da Desktop a dispositivi mobili. Ogni modalità conserva i propri valori, quindi le modifiche effettuate nella modalità per dispositivi mobili influenzano solo la visualizzazione su dispositivi mobili e non la versione desktop.
Impostare il layout globale e le regole di base per l’intera email
Utilizza Stili Generali → Stili e Layout Globali per definire il comportamento complessivo dell’email prima di intervenire su sezioni, strutture o blocchi specifici. Tieni presente che alcune funzionalità disponibili nella versione desktop non sono supportate sui dispositivi mobili.
Tuttavia, se stai sviluppando sia la versione desktop sia quella per dispositivi mobili, puoi procedere in questo modo:
Procedura passo per passo: configurare Stili e Layout Globali.
Imposta lo sfondo generale:
1. Scegli un colore di sfondo generale per l’area del messaggio email.
2. Su desktop, il colore di sfondo copre l’intera area del messaggio.
3. Sui dispositivi mobili, questo sfondo è nascosto.
Aggiungi un’immagine di sfondo (solo desktop):
4. Seleziona un’immagine di sfondo e definiscine la posizione.
5. Attiva la ripetizione dell’immagine di sfondo se deve coprire l’intera lunghezza del messaggio.
6. Le immagini di sfondo vengono visualizzate solo su desktop e non compaiono sui dispositivi mobili.
7. Alcuni client email, tra cui Outlook, potrebbero non visualizzare le immagini di sfondo; imposta quindi un colore di sfondo di fallback simile a quello dell’immagine.
Imposta la larghezza e l’allineamento del contenuto del messaggio:
8. La larghezza e l’allineamento sono disponibili esclusivamente nella versione desktop del design.
9. Definisci la larghezza del contenuto del messaggio. Il valore predefinito è 600px.
10. Puoi impostare qualsiasi valore compreso tra 320px e 900px.
11. Scegli l’allineamento del contenuto del messaggio.
Controlla la sottolineatura dei link:
12. Attiva o disattiva la sottolineatura dei link in tutta l’email.
Abilita la direzione del testo da destra a sinistra:
13. Attiva la direzione del testo da destra a sinistra per le lingue che richiedono sistemi di scrittura RTL, come l’arabo o l’urdu.
Imposta stili personalizzati per gli elenchi:
14. Definisci gli stili dei punti elenco da applicare all’intera email.
Definisci i valori predefiniti delle spaziature:
15. Imposta il padding predefinito delle strutture. Questo valore viene applicato automaticamente alle nuove strutture.
16. Imposta i margini attorno al messaggio per controllare lo spazio tra il contenuto dell’email e i bordi dell’area del messaggio.
Queste impostazioni creano una base uniforme tra desktop e dispositivi mobili, riducendo la necessità di interventi successivi.
Controlla tipografia e spaziature per migliorare la leggibilità sui dispositivi mobili
Tipografia globale delle stripe
Procedura passo per passo: imposta la tipografia delle stripe per tipologia e perfeziona le singole stripe
Imposta la tipografia globale delle stripe:
1. Vai su Stili Generali → Stili delle stripe.
2. Seleziona una tipologia di stripe.
3. Imposta la famiglia di caratteri, l’interlinea e la spaziatura delle lettere per i blocchi di testo. Queste impostazioni non influiscono sui titoli.
4. Puoi anche cliccare sul blocco contenitore → Stripe.
Imposta gli sfondi delle stripe:
5. Definisci il colore di sfondo della stripe e del suo contenuto.
6. Aggiungi un’immagine di sfondo se necessario.
7. Imposta un colore di sfondo di fallback, poiché alcuni client — incluso Outlook — potrebbero non visualizzare le immagini di sfondo.
Oppure, se apri le impostazioni della stripe cliccando sul blocco contenitore:
Definisci la dimensione dei caratteri per ciascun tipo di stripe:
8. Imposta la dimensione predefinita dei caratteri e l’interlinea per ciascun tipo di stripe.
9. Usa dimensioni dei caratteri più piccole per la stripe Footer quando appropriato.
Regola la spaziatura delle stripe su dispositivi mobili:
10. Seleziona una stripe specifica.
11. Imposta il Padding su dispositivi mobili per controllare la spaziatura attorno alla stripe nella visualizzazione per dispositivi mobili.
Nascondi una stripe sui dispositivi mobili:
12. Abilita l’opzione Nascondi elemento su dispositivi mobili quando una stripe non deve essere visualizzata sugli schermi di piccole dimensioni.
Impostazioni tipografiche della stripe per differenti aree dell’email
Le stripe definiscono le sezioni principali di un’email e determinano l’aspetto del testo nei layout ripetuti. Ogni stripe può appartenere a un tipo specifico, consentendo di applicare uno stile coerente in modo uniforme.
I tipi di stripe includono Intestazione, Contenuto, Footer e Area Informazioni. L’uso dei tipi di stripe permette di applicare dimensioni dei caratteri e regole di spaziatura differenti, ad esempio utilizzando un testo più piccolo nel footer.
Procedura passo per passo: applicare una formattazione personalizzata ai blocchi per i titoli e definire gli stili dei titoli.
Applica la formattazione per i titoli:
1. Seleziona il testo all’interno di un blocco di testo.
2. Scegli H1, H2 o H3 nel menu di formattazione del testo.
3. In modalità per dispositivi mobili, imposta l’allineamento dei titoli quando quello della versione desktop non risulta adatto agli schermi di piccole dimensioni.
Imposta stili di titolo personalizzati all’interno del contenitore:
4. Apri la sezione Stili e passa tra Desktop e dispositivi mobili usando il selettore del dispositivo.
5. Scegli il livello di titolo che desideri modificare.
6. Imposta famiglia di caratteri, spaziatura tra le lettere, dimensione del carattere, altezza della linea, stile del testo e colore del carattere.
Crea CTA ottimizzate per dispositivi mobili che restino facilmente selezionabili
Impostazioni predefinite dei pulsanti valide per l’intero modello
I pulsanti sui dispositivi mobili devono essere facili da leggere e da toccare. Testi più piccoli di 18px riducono la leggibilità e aumentano il rischio di tocchi errati. Per i pulsanti sui dispositivi mobili è consigliata una dimensione del carattere pari o superiore a 18px.
Imposta gli stili globali dei pulsanti
Usa gli Stili Generali per definire l’aspetto dei pulsanti una sola volta per l’intera email, quindi regola separatamente i valori per i dispositivi mobili.
Procedura passo per passo: imposta gli stili globali dei pulsanti
Apri gli Stili dei Pulsanti:
1. Vai su Stili Generali → Stili dei Pulsanti.
2. Passa tra Desktop e dispositivi mobili usando il selettore del dispositivo.
Imposta la tipografia:
3. Scegli la famiglia di caratteri.
4. Imposta la dimensione del carattere e il colore del testo.
5. Seleziona lo stile del testo e la spaziatura delle lettere.
Definisci la forma e il colore del pulsante:
6. Imposta il colore di sfondo del pulsante.
7. Configura i bordi, su tutti i lati o singolarmente.
8. Imposta il colore del bordo e il raggio del bordo.
9. Aggiungi i padding interni.
Controlla la larghezza del pulsante:
10. Abilita Fit to Container così i pulsanti si adattano alla larghezza del contenitore (opzione solo per desktop).
Migliora il rendering in Outlook:
11. Attiva il Supporto per Outlook per applicare il rendering basato su VML e migliorare la visualizzazione dei pulsanti nei client Outlook.
Imposta gli stili hover per desktop:
12. Configura i colori di sfondo e del testo per l’hover nelle interazioni da desktop.
13. Questi stili si applicano quando il cursore passa sopra il pulsante.
Lavora direttamente nella visualizzazione per dispositivi mobili all’interno dell’editor
Passa tra visualizzazione desktop e visualizzazione per dispositivi mobili durante la modifica
Stripo ti permette di modificare la versione per dispositivi mobili senza uscire dall’editor.
Procedura passo per passo: salta da una visualizzazione all’altra
1. Usa il selettore del dispositivo nella barra degli strumenti superiore.
2. Seleziona Desktop o Dispositivo mobile per visualizzare e modificare quella corrispondente.
3. Apporta le modifiche nella visualizzazione attiva. Desktop e Dispositivo mobile conservano valori separati quando supportato.
Gestisci al meglio il comportamento delle strutture sui dispositivi mobili
Struttura responsive: impilamento vs. mantenimento in linea
Come già sai, la Struttura Responsive controlla il comportamento dei contenitori sui dispositivi mobili. Quando è attiva, i contenitori si impilano verticalmente. Quando è disattivata, i contenitori restano su un’unica riga. Disattivarla è utile quando desideri layout affiancati sui dispositivi mobili, ad esempio per schede prodotto o piccoli elementi visivi con testo breve.
Inversione dei contenitori: controllo dell’ordine dei contenuti
Nei layout responsive, l’ordine dei contenitori è fondamentale. Se il testo si trova a sinistra e l’immagine a destra, l’impilamento potrebbe posizionare il testo sopra l’immagine. Questo risultato è spesso indesiderato per la lettura sui dispositivi mobili.
Procedura passo per passo: attiva l’inversione dei contenitori
1. Seleziona una struttura con due contenitori (clicca su Struttura sopra i contenitori).
2. Attiva l’inversione dei contenitori nella versione per dispositivi mobili.
3. Visualizza l’anteprima della versione per dispositivi mobili per verificare che l’ordine sia corretto.
Ricorda: l’inversione dei contenitori funziona solo per le strutture con due contenitori.
Aggiungi spaziatura tra i contenitori
Nei layout per dispositivi mobili è spesso necessario aggiungere spazio extra tra i contenitori per evitare che i contenuti risultino troppo affollati.
Procedura passo per passo: utilizza la spaziatura tra i contenitori su dispositivi mobili
1. Seleziona la struttura.
2. Imposta la spaziatura tra i contenitori nella versione per dispositivi mobili per aggiungere spazio tra un contenitore e l’altro.
Applica il padding della struttura e dei contenitori su dispositivi mobili
Utilizza il padding su dispositivi mobili per perfezionare la spaziatura senza modificare il layout del desktop.
Procedura passo per passo: imposta il padding su dispositivi mobili per una struttura
1. Passa alla visualizzazione per dispositivi mobili.
2. Seleziona la struttura.
3. Imposta il padding su dispositivi mobili.
Queste impostazioni si applicano solo ai dispositivi mobili e non modificano la spaziatura della versione desktop.
Gestione delle immagini su dispositivi mobili che evita stiramenti, scrolling e ritagli indesiderati
Immagine responsive: quando attivarla
Le immagini di grandi dimensioni possono causare uno scorrimento orizzontale o apparire sovradimensionate sui dispositivi mobili. L’opzione Immagine responsive adatta la larghezza dell’immagine allo schermo del dispositivo, evitando questi problemi. Questo controllo funziona sui dispositivi che supportano le media query.
Immagini piccole (loghi): evita l’allungamento indesiderato
Le immagini di piccole dimensioni, come i loghi, non dovrebbero estendersi fino alla larghezza completa dello schermo.
Procedura passo per passo: disattiva Immagine responsive per le immagini di piccole dimensioni
1. Passa alla visualizzazione per dispositivi mobili.
2. Seleziona l’immagine.
3. Disattiva l’opzione Immagine responsive.
4. Imposta manualmente le dimensioni desiderate dell’immagine.
Standard per le immagini su dispositivi mobili nei modelli email.
Per garantire una resa stabile su tutti i dispositivi e client:
- usa formati JPEG, GIF o PNG;
- mantieni la larghezza dell’immagine tra 600–800px;
- verifica le immagini nella visualizzazione su dispositivi mobili e nei client reali.
Immagini di sfondo su dispositivi mobili: cosa è possibile e cosa no?
Le immagini di sfondo hanno dimensioni fisse e non si adattano alla larghezza dello schermo come le immagini standard. È possibile regolare posizione e dimensioni per migliorarne la resa, ma i risultati variano a seconda del client.
Limiti di rendering da tenere presenti:
- le immagini di sfondo applicate a container, strutture e stripe non vengono visualizzate in Outlook;
- l’immagine di sfondo globale viene visualizzata su desktop ma non compare su dispositivi mobili.
Imposta sempre un colore di sfondo di fallback quando utilizzi immagini di sfondo.
Ottimizzazione dei blocchi per migliorare la leggibilità del testo su dispositivi mobili
Correggi le interruzioni di riga innaturali nei blocchi di testo
Su dispositivi mobili il testo può spezzarsi in modo irregolare. Un caso frequente è quando una singola parola finisce da sola su una nuova riga, riducendo la leggibilità.
Procedura passo per passo: correggi le interruzioni di riga
Riduci la dimensione del testo sui dispositivi mobili:
1. Passa alla visualizzazione per dispositivi mobili.
2. Seleziona il blocco di testo.
3. Nelle impostazioni di stile, riduci la dimensione del testo finché rientra su una sola riga.
Regola allineamento e padding:
4. Controlla l’allineamento del testo.
5. Riduci i padding a sinistra e a destra, perché valori troppo ampi possono causare interruzioni di riga indesiderate.
Disattiva l’andata a capo automatica per una riga specifica:
6. Seleziona la riga di testo.
7. Abilita Disabilita andare a capo.
8. Usa questa opzione con attenzione. Le righe lunghe con l’andata a capo disattivata potrebbero non rientrare nello schermo dei dispositivi mobili e causare uno scorrimento orizzontale.
Risoluzione dei problemi: quando l’email diventa non‑responsive dopo l’invio
Perché un’email responsive può apparire come la versione desktop sui dispositivi mobili
Alcune app di posta per dispositivi mobili non supportano le media query. Durante l’invio o l’esportazione, alcuni client di posta rimuovono il CSS responsive dal codice. Quando questo accade, gli stili specifici per i dispositivi mobili vengono eliminati e l’email viene visualizzata come una versione desktop sui dispositivi mobili.
Caso Gmail: media query rimosse dopo l’invio da Gmail
Gmail rimuove gli stili CSS responsive quando le email vengono inviate direttamente dalla sua interfaccia. Di conseguenza, la versione per dispositivi mobili può risultare non responsive.
Procedura passo per passo: mantenere l’email responsive in Gmail
1. Esporta l’email in un ESP che supporta le media query.
2. Invia l’email a Gmail tramite quell’ESP.
In questo flusso, l’email mantiene il suo comportamento responsive in Gmail.
Caso Outlook: il comportamento responsive varia in base alla versione e all’app
Non tutte le versioni di Outlook supportano il design responsive. Alcune rimuovono automaticamente gli stili responsive, con il risultato che l’email viene visualizzata in modo non responsive sui dispositivi mobili.
Differenze da considerare durante le prove:
- le email di prova inviate da Stripo a Outlook.com possono risultare responsive sui dispositivi mobili.
Checklist di controllo qualità per dispositivi mobili prima dell’esportazione
Prima di esportare o inviare un’email, verifica la versione per dispositivi mobili direttamente nell’editor.
Controlla i seguenti elementi nell’anteprima per dispositivi mobili:
- tipografia: dimensioni dei titoli, leggibilità del testo principale, gestione delle interruzioni di riga;
- margini e padding: spaziatura attorno a stripe, strutture, contenitori e blocchi;
- pulsanti: dimensione del testo, area di clic e comportamento a larghezza piena quando necessario;
- comportamento dei contenitori: ordine di impilamento, inversione e spazi tra i contenitori;
- elementi nascosti: verifica che gli elementi impostati come nascosti sui dispositivi mobili non vengano visualizzati;
- immagini: comportamento responsive, dimensionamento del logo e fallback per le immagini di sfondo;
- scorrimento orizzontale: verifica la presenza di immagini troppo larghe, caratteri troppo grandi o strutture non responsive.
Dopo aver effettuato l’anteprima nell’editor, testa l’email su diversi dispositivi e client di posta. Poiché il comportamento del client può variare, le verifiche su dispositivi reali aiutano a individuare problemi che l’anteprima potrebbe non mostrare.
Concludendo
La progettazione delle email per dispositivi mobili dipende sia dalle impostazioni dell’editor sia dal comportamento dei client di posta. Impostando una base solida negli Stili Generali, utilizzando la Formattazione per dispositivi mobili per regolazioni rapide e perfezionando strutture, immagini e testi direttamente nella visualizzazione per dispositivi mobili, puoi controllare come le email si comportano sui piccoli schermi. Controlla sempre l'anteprima sui dispositivi mobili e testa su diversi client prima dell'invio, specialmente quando Gmail o Outlook fanno parte del tuo flusso di lavoro.
0 commenti