Newsletter mobile-first: design responsive

Oltre il 60% delle email viene aperto su smartphone. Una newsletter mobile-first non e un'opzione ma una necessità: design e contenuti devono essere ottimizzati per piccoli schermi prima che per desktop. Vediamo le best practice.

Principi mobile-first

Single column layout: due colonne su mobile diventano stack e perdono allineamento. Larghezza max 600 px: standard accettato da tutti i client. Font minimo 14 px per body, 22 px per titoli. Padding generoso per evitare click accidentali. CTA bottoni alti almeno 44x44 px (linea guida Apple/Google touch target).

Immagini

Specifica width e height per evitare salti di layout. Usa immagini ottimizzate (compresse JPG/WebP). Alt text descrittivo per accessibilità e quando le immagini sono bloccate. Niente immagini fondamentali per il messaggio: testo in HTML, mai dentro l'immagine.

Copy

Frasi brevi, paragrafi corti. Subject line max 40 caratteri (mobile tronca dopo). Preheader chiaro come continuazione dell'oggetto. Bullet point e numeri funzionano meglio di paragrafi compatti.

Procedura passo-passo

1. Apri il tuo editor email e seleziona un template mobile-first.
2. Imposta larghezza max contenuto a 600 px.
3. Usa una sola colonna per il contenuto principale.
4. Aumenta font base a minimo 14 px.
5. Aumenta padding interno tra blocchi a 20-30 px.
6. Inserisci CTA bottone con padding interno 12 px verticale, 24 px orizzontale.
7. Comprimi immagini con TinyPNG o Squoosh.
8. Aggiungi alt text a ogni immagine.
9. Test su smartphone reale prima di inviare.
10. Usa Litmus o Email on Acid per test cross-client.

Test cross-device

Visualizza la email su almeno: Gmail iOS, Gmail Android, Mail iOS, Outlook desktop, Outlook web. Ogni client renderizza diversamente. Tool come Litmus mostrano 90+ ambienti.

Errori comuni e come risolverli

• Layout 2 colonne: si rompe su mobile, usa stack.
• Font sotto 12 px: illeggibile su smartphone.
• CTA testuale piccola: nessuno clicca un link 10 px su mobile.
• Immagini pesanti: caricamento lento o bloccato.
• No alt text: con immagini bloccate scompare tutto il messaggio.
• Test solo desktop: il 60% del pubblico non vede mai la desktop view.

Domande frequenti

D: Posso usare media query mobile?
R: Si, ma alcuni client (Gmail) le ignorano. Usa hybrid layout con padding fluido.

D: Dark mode supportato?
R: Si, aggiungi prefers-color-scheme: dark CSS e testa con Apple Mail e Outlook dark.

D: GIF in email mobile?
R: Si ma pesanti. Usa max 1 MB e fallback al primo frame su Outlook.

Hai bisogno di aiuto?

Se vuoi delegare l'email marketing al team di G Tech Group, scrivici tramite il modulo di contatto. Ti aiutiamo con configurazione SMTP, migrazioni, automation e reportistica.