Pulsanti mancanti e formattazione rotta nelle email: le cause più comuni (e come risolverle)

Apri una newsletter o un’email di conferma ordine e… qualcosa non torna: il pulsante “Verifica” non si vede, i blocchi sono tutti incolonnati in modo strano, i font cambiano a caso, le immagini sono sparite o il testo sembra “sbiadito” in modalità scura. È uno dei problemi più frustranti dell’email marketing e delle email transazionali: l’HTML delle email non è come l’HTML del web.

Ogni client (Gmail, Outlook, Apple Mail, app Android, webmail aziendali) interpreta il codice in modo diverso, applica filtri di sicurezza e spesso elimina o riscrive CSS e attributi. Il risultato? Un’email che in anteprima sembra perfetta, ma che in produzione perde pulsanti e impaginazione.

In questa guida vediamo le cause più comuni della resa “rotta” (con esempi pratici) e una checklist di soluzioni per rendere le email più robuste, leggibili e cliccabili su più dispositivi.

1) Il punto di partenza: ogni client email è un mondo a parte

Se c’è una regola d’oro, è questa: non esiste un “rendering unico”. Le email vengono aperte in ambienti con motori diversi:

Gmail: filtra e riscrive parte del CSS, soprattutto quello nel <head>.
Outlook desktop (Windows): spesso usa il motore di Word, con supporto limitato al CSS moderno.
Apple Mail / iOS Mail: di solito più permissivi, ma con dark mode aggressiva su certi colori.
Webmail aziendali: possono bloccare immagini, font e link “sospetti” per policy di sicurezza.

Per questo, un layout che si regge su tecniche tipiche del web (flexbox, grid, CSS complesso) rischia di saltare. Nelle email, spesso vince ancora il vecchio approccio: strutture a tabella, stili inline e fallback.

2) Pulsanti che spariscono: non è magia, è quasi sempre CSS o immagini

A) Pulsante fatto come immagine (e le immagini sono bloccate)

Uno degli errori più comuni è creare il bottone come immagine (una PNG con scritto “Clicca qui”). Se il client blocca le immagini per impostazione predefinita, quel pulsante diventa un “vuoto”. Anche quando l’utente abilita le immagini, a volte il caricamento è lento e nel frattempo l’email sembra incompleta.

Soluzione: costruisci i pulsanti come elementi HTML (testo cliccabile) con stili inline. Se proprio usi un’immagine, aggiungi sempre un link testuale di backup immediatamente vicino (o sotto).

B) Colori e dark mode: “il pulsante c’è, ma non lo vedi”

In modalità scura, alcuni client modificano i colori di sfondo e del testo in modo automatico. Se il tuo pulsante ha testo scuro su sfondo scuro (o testo chiaro su sfondo chiaro dopo l’inversione), l’utente percepisce che il bottone è “sparito”, anche se tecnicamente è presente.

Soluzione: usa contrasti forti e prevedi un comportamento stabile: colori solidi, bordi visibili, padding generoso. Evita grigi “a metà” che in dark mode diventano ambigui. Aggiungi un contorno (border) per mantenere la forma del pulsante anche se i colori vengono alterati.

C) CSS non supportato o rimosso: display/position che collassano

Se il pulsante dipende da display:inline-block, position particolari, pseudo-elementi, o classi definite nel <style> in testa, un client può ignorare quelle regole e il bottone perde forma, padding, background, oppure finisce “schiacciato” in una riga invisibile.

Soluzione: preferisci stili inline essenziali e testati, riduci le dipendenze da CSS nel head, usa un markup semplice. Nelle email è normale “ripetere” alcuni stili inline per robustezza.

3) Formattazione rotta: perché i blocchi si spostano e i testi impazziscono

A) CSS moderno (flexbox/grid) non affidabile

Flexbox e CSS Grid sono ottimi sul web, ma nelle email possono essere parzialmente supportati o disabilitati. Questo crea colonne che diventano righe, card che si allargano troppo, margini ignorati e allineamenti errati.

Soluzione: quando la compatibilità è prioritaria, struttura i layout con tabelle e celle (soprattutto per email transazionali). Se usi layout “a colonne”, prevedi sempre un comportamento degradato leggibile su mobile.

B) Margin e padding interpretati in modo diverso

Alcuni client ignorano certi margin, altri li “normalizzano”. Il risultato è un’email che sembra troppo compressa o troppo “spaziata”. In casi peggiori, i blocchi si sovrappongono.

Soluzione: usa padding in cella/tabella e spaziatori semplici. Evita margin complessi, specialmente su elementi inline o su componenti annidati.

C) Font personalizzati non caricati

I font web (Google Fonts o font self-hosted) spesso non vengono caricati per policy o limitazioni del client. Il testo cambia aspetto e la spaziatura può cambiare, facendo saltare righe e allineamenti.

Soluzione: definisci sempre una “stack” di fallback: un font principale e alternative di sistema (es. sans-serif standard). Evita layout che dipendono in modo critico da un font specifico.

D) Immagini con dimensioni non fissate

Se inserisci immagini senza width/height coerenti, alcuni client ridimensionano male o non riservano spazio. Questo può far “saltare” i blocchi e spostare il testo.

Soluzione: imposta sempre dimensioni e usa immagini responsive con regole semplici. E soprattutto: non basare l’intero layout su un’immagine.

4) Link e tracciamenti: quando i pulsanti diventano sospetti

Alcuni provider e client (specie in ambienti aziendali) applicano filtri antiphishing aggressivi: riscrivono i link, inseriscono redirect, o bloccano pulsanti che sembrano “camuffati”. A volte il pulsante non sparisce, ma diventa non cliccabile, o viene trasformato in testo semplice.

Cause tipiche: dominio di tracciamento poco affidabile, URL troppo lunghi con molti parametri, mismatch tra testo del link e destinazione, o CTA “troppo aggressiva”.

Soluzione: usa domini puliti e coerenti, riduci parametri inutili, preferisci link leggibili, e assicurati che il testo del pulsante corrisponda alla pagina di destinazione (es. “Conferma email” → pagina di conferma). Inserisci anche un link testuale “Se il pulsante non funziona, copia e incolla questo URL”.

5) Immagini bloccate: impatto su brand, gerarchia e CTA

Molti utenti aprono le email con immagini disattivate, almeno al primo invio, soprattutto su reti aziendali. Se la tua email “vive” di immagini (hero, pulsanti, separatori, icone), il contenuto appare vuoto, poco credibile, o difficile da navigare.

Soluzione pratica:

Metti un titolo testuale chiaro e visibile anche senza immagini.
Usa CTA testuali reali (non immagini con testo).
Aggiungi alt text sensato alle immagini importanti.
Evita immagini “giganti” come unico contenuto della prima schermata.

Una buona email deve “reggere” anche in modalità testo. Le immagini sono un potenziatore, non l’ossatura.

6) Media query e responsive: perché su mobile si rompe tutto

Il responsive nelle email è un compromesso. Alcuni client supportano media query, altri no. Se la tua email si basa su media query per passare da due colonne a una colonna, e quel supporto manca, potresti ritrovarti con due colonne strettissime su mobile e un pulsante minuscolo.

Soluzione: progetta “mobile-first” e usa layout che rimangono leggibili anche senza media query. Se usi colonne, assicurati che ogni colonna abbia contenuti brevi e che le CTA siano grandi e cliccabili. Mantieni line-height generosa e padding reali, non affidarti solo a margin.

7) Outlook e il “fattore Word”: il motivo per cui le email sembrano anni 2000

Outlook desktop su Windows è spesso il “caso limite” più famoso: supporta poco CSS moderno e gestisce HTML con logiche che ricordano l’impaginazione di un documento. Per questo, email perfette su Gmail possono apparire spezzate su Outlook: bordi che spariscono, background che non riempiono, pulsanti deformati, spaziature incoerenti.

Soluzione: usa componenti compatibili e fallback. Se il pubblico include molto Outlook, conviene adottare un template “email-safe”: tabelle, background solidi, stili inline, immagini con dimensioni fisse, e CTA costruite in modo semplice.

8) Checklist rapida per diagnosticare (senza impazzire)

Il pulsante è un’immagine? Se sì, aggiungi CTA testuale e riduci dipendenza dalle immagini.
Il CSS è nel head? Porta gli stili critici inline.
Stai usando flex/grid? Prevedi fallback a tabella o layout semplificato.
Dark mode: controlla contrasto, bordi e testo del pulsante in tema scuro.
Font custom: aggiungi fallback di sistema e verifica spaziature.
Immagini: imposta dimensioni, alt text e non basare la CTA su un banner.
Link: riduci parametri, usa domini coerenti, aggiungi un URL testuale alternativo.
Test multipiattaforma: almeno Gmail, iOS Mail e Outlook (se rilevante per il target).

9) Buone pratiche per pulsanti “a prova di client”

Un pulsante email efficace deve essere grande, leggibile e stabile. In termini pratici:

Padding generoso (il dito su mobile ringrazia).
Contrasto alto tra testo e sfondo.
Border visibile come fallback in dark mode o su client che alterano i colori.
Testo breve e coerente con la destinazione (evita ambiguità).
Link alternativo in testo, per casi in cui il pulsante non sia cliccabile.

In più, non mettere tutto il valore su una sola CTA: se l’email è critica (accesso, reset password, conferma), inserisci anche una seconda via “manuale” (URL testuale, istruzioni concise).

10) Esempi di scenari tipici (e il rimedio più efficace)

Email di verifica account

Problema: il pulsante “Verifica” non si vede o non è cliccabile.
Rimedio: CTA HTML con stili inline + link testuale alternativo + contrasti solidi per dark mode.

Email promozionale con hero grande

Problema: immagini bloccate e l’email sembra vuota.
Rimedio: titolo testuale forte in alto, riassunto in testo, CTA reale (non immagine), alt text curato.

Newsletter a due colonne

Problema: su mobile le colonne diventano microscopiche.
Rimedio: layout che rimane leggibile anche senza media query; card impilate e testo non troppo largo.

Template “moderno” che su Outlook collassa

Problema: bordi, background o allineamenti non rispettati.
Rimedio: fallback più semplice; struttura a tabella per i blocchi principali; stili inline essenziali.

Conclusione: l’email perfetta è quella che regge anche quando tutto va storto

Quando un’email perde pulsanti o formattazione, raramente è colpa di “un bug misterioso”. Nella maggior parte dei casi, è una combinazione di: CSS non supportato, immagini bloccate, dark mode, font non disponibili e client che riscrivono il codice.

La strategia migliore è progettare con mentalità “robusta”: contenuto chiaro anche senza immagini, CTA testuali reali, stili inline per ciò che conta, layout semplificati e fallback sensati. Così, anche quando un client “fa di testa sua”, l’utente riesce comunque a leggere, capire e cliccare.

Se ti capita spesso di vedere pulsanti mancanti o layout rotti, non serve riscrivere tutto ogni volta: basta adottare un set di regole e una checklist di test. Una volta fatto, la qualità percepita delle tue email sale subito — e cala drasticamente il numero di “non vedo il pulsante” nei messaggi di assistenza.