Rendi il tuo design email responsivo e ottimizzato per i dispositivi mobili in 5 semplici passaggi
Pubblicato: 2024-01-17Vuoi che le tue newsletter via email e le tue campagne di marketing abbiano un aspetto straordinario su qualsiasi dispositivo? Certo che lo fai. Nessuno vuole che il proprio duro lavoro diventi illeggibile nella casella di posta di qualcuno. Fortunatamente, in soli cinque passaggi, puoi assicurarti che le tue e-mail siano reattive e pronte a stupire gli abbonati. Quindi prendi qualcosa da bere, la tua playlist preferita o un drink e iniziamo ad assicurarci che appaiano al meglio su qualsiasi schermo.
Imposta la larghezza delle colonne in percentuale, non in pixel
Per rendere reattivo il design della tua email, imposta la larghezza delle colonne utilizzando percentuali anziché valori di pixel fissi. Ciò consente alle colonne di adattarsi in modo flessibile alle diverse larghezze dello schermo.
Utilizzare una griglia fluida
L'approccio a griglia fluida utilizza percentuali per la larghezza delle colonne in modo che possano espandersi e contrarsi secondo necessità in base alle dimensioni dello schermo. Per un layout semplice a due colonne, allarga la colonna sinistra al 60-70% e quella destra al 30-40%. Per esempio:
<tabella>
<tr>
<td width="65%">Contenuto della colonna 1 qui</td>
<td width="35%">Contenuto della colonna 2 qui</td>
</tr>
</tabella>
Ciò consentirà alla Colonna 1 di occupare il 65% dello spazio disponibile e alla Colonna 2 il restante 35%. Su uno schermo desktop di grandi dimensioni, la colonna 1 potrebbe avere una larghezza di 650 px, mentre su uno schermo mobile piccolo potrebbe essere larga solo 200 px. Ma le proporzioni relative rimarranno le stesse.
Aggiungi query multimediali per punti di interruzione reattivi
Le query multimediali consentono di applicare regole di stile diverse in base alla larghezza dello schermo. Puoi usarli per apportare ulteriori modifiche alla griglia fluida in diversi punti di interruzione. Per esempio:
/* Per i cellulari: */
Schermata solo @media e (larghezza massima: 600 px) {
tavolo, td {
larghezza: 100% !importante;
}
}
/* Per tablet: */
Schermata solo @media e (larghezza minima: 601 px) e (larghezza massima: 900 px) {
tavolo, td {
larghezza: 80% !importante;
}
}
Ciò farà sì che la tabella e le colonne si espandano per riempire il 100% della larghezza dello schermo sui telefoni piccoli e l'80% sui tablet, rendendo il design completamente reattivo.
Utilizza immagini fluide e contenuti multimediali ridimensionabili
Per rendere il design della tua email ottimizzato per i dispositivi mobili, le immagini e gli altri media devono essere ridimensionati in modo fluido per adattarsi a qualsiasi dimensione dello schermo. Segui questi suggerimenti:
Utilizza dimensioni immagine reattive
Quando aggiungi immagini alla tua email, utilizza il dimensionamento delle immagini reattivo. Ciò significa fornire più dimensioni dell'immagine in modo che il client di posta elettronica possa scegliere la dimensione giusta per lo schermo su cui viene visualizzata.
Ad esempio, invece di includere solo un'immagine grande da 1000 px, includi anche:
- Una dimensione media (circa 600px)
- Una dimensione piccola per colonne strette (circa 400 px)
- Dimensioni ridotte per schermi mobili di piccole dimensioni (circa 200 px)
Il client di posta sceglierà automaticamente la dimensione migliore per lo schermo e la larghezza di banda. Per specificare più dimensioni di immagine nella tua email, utilizza l'attributo <img srcset>.
Rendi i media ottimizzati per i dispositivi mobili
Per altri media come video o GIF, fornisci anche più opzioni di dimensione. I video dovrebbero avere sorgenti MP4 in diverse risoluzioni. GIF e iframe (come gli incorporamenti di YouTube) dovrebbero avere vincoli di larghezza che si ridimensionano per adattarsi a qualsiasi schermo.
Tieni a mente questi suggerimenti e le immagini, i video e gli altri contenuti multimediali delle tue email verranno visualizzati magnificamente su qualsiasi dispositivo. I tuoi abbonati apprezzeranno un'e-mail dall'aspetto gradevole e facile da leggere ovunque la aprano.
Dimensioni del carattere in ems, non in pixel
Per rendere il design della tua email ottimizzato per i dispositivi mobili, ti consigliamo di ridimensionare il carattere in em anziché in pixel. I pixel sono unità fisse, quindi se qualcuno ha ingrandito il browser, il testo può risultare distorto. Gli Em, d'altra parte, sono unità relative che si adattano alle impostazioni dell'utente.
Utilizza un framework di posta elettronica reattivo
Un framework di posta elettronica reattivo dispone di componenti predefiniti che si ridimensionano automaticamente per qualsiasi larghezza dello schermo. Alcune opzioni popolari sono MJML, Foundation for Emails e Ink. Questi framework utilizzano ems per il dimensionamento, quindi non devi preoccuparti di eseguire tu stesso la conversione.
Se non utilizzi un framework, converti i pixel in ems
Se desideri il pieno controllo sul tuo CSS e preferisci non utilizzare un framework, dovrai convertire qualsiasi dimensione di pixel in ems. Ecco come:
- Determina la dimensione del carattere di base in pixel. Diciamo che è 16px.
- Convertilo in ems. 1em = 16px (la tua dimensione base), quindi 16px = 1em.
- Qualsiasi dimensione tu voglia utilizzare, dividi per 16px e moltiplica per 1em. Ad esempio, per un'intestazione di 24px, 24px/16px = 1,5em.
- Sostituisci tutte le dimensioni dei pixel nel tuo CSS con gli equivalenti em.
Allinea i tuoi contenuti in modo reattivo
Per rendere reattivo il design della tua email, devi allineare il contenuto in modo che venga visualizzato correttamente su qualsiasi dimensione dello schermo. Segui questi passi:
Utilizzare misurazioni dei fluidi
Invece di utilizzare larghezze di pixel fisse per colonne, immagini e contenitori, utilizza le percentuali. Ciò consentirà al contenuto di ridimensionarsi proporzionalmente in base alla larghezza dello schermo. Ad esempio, invece di un'immagine con larghezza=”600px”, utilizza larghezza=”50%”.
Evita uno styling pesante
Mantieni la tua posta elettronica semplice limitando l'uso dello stile personalizzato, che non verrà visualizzato correttamente in alcuni client di posta elettronica. Affidati a tabelle HTML di base, stili in linea e all'attributo align per il layout. Centrare gli elementi quando necessario.
Seguendo questi passaggi pratici garantirai che il contenuto della tua email venga visualizzato magnificamente, indipendentemente dal dispositivo utilizzato dai tuoi lettori per aprire la loro casella di posta. Vale la pena creare un'ottima esperienza di progettazione e-mail reattiva per i tuoi abbonati.
Prova, prova e prova ancora
Controlla come viene visualizzato sui dispositivi mobili
Sappiamo tutti che la maggior parte delle persone utilizza i propri dispositivi mobili per accedere alla posta elettronica. Quindi, per assicurarti che la tua email sia ottimizzata per i dispositivi mobili, prova la tua email inviandola su cellulari diversi. Controllali su Android, iPhone e tablet. Controlla come vengono visualizzati immagini, pulsanti e testo sia in modalità verticale che orizzontale.
Test sui principali client di posta elettronica
Non tutti i client di posta elettronica visualizzano le email allo stesso modo. Esegui test su Gmail, Outlook, Yahoo Mail e tutti gli altri principali servizi di posta elettronica utilizzati comunemente dai tuoi abbonati. Cerca eventuali problemi relativi alla modalità di visualizzazione di immagini, collegamenti incorporati, pulsanti o altri elementi interattivi. Apporta modifiche al codice per risolvere eventuali problemi di visualizzazione e garantire la coerenza tra i client.
Controlla come vengono visualizzati i contenuti di riserva
Per gli abbonati con immagini disabilitate nel proprio client di posta elettronica, i contenuti di riserva verranno visualizzati al posto delle immagini. Verifica che tutto il testo alternativo, le didascalie e le descrizioni delle immagini abbiano senso da soli e forniscano contesto per il contenuto della tua email. Il contenuto di riserva dovrebbe comunque garantire una buona esperienza di lettura, anche senza le immagini.
Recensione su un servizio di rendering della posta elettronica
Utilizza un servizio gratuito di test del rendering della posta elettronica come Litmus, Email on Acid o Mosaico per vedere come viene visualizzato il design della tua posta elettronica su un'ampia gamma di client e dispositivi di posta elettronica contemporaneamente. Forniscono report che evidenziano eventuali problemi da risolvere per migliorare la reattività della tua email. Apporta modifiche al codice e ricarica le email di prova finché i rapporti non tornano puliti.
Controlla i collegamenti e gli elementi interattivi
I collegamenti, i pulsanti e qualsiasi altro componente interattivo incorporato nella tua email devono funzionare correttamente su tutte le piattaforme. Ricontrolla che i collegamenti arrivino alla destinazione prevista e che tutti i pulsanti o i moduli funzionino come previsto. Testali più volte per assicurarti che non vi siano collegamenti interrotti o elementi non funzionanti prima di lanciare la tua campagna.
Sono necessari test e modifiche costanti per perfezionare il design reattivo della tua email. Ma impegnandoti fin dall'inizio, otterrai un'e-mail con un'ampia portata e un elevato coinvolgimento su tutti i dispositivi e client di posta elettronica dei tuoi abbonati.
Risoluzione dei problemi comuni relativi alla posta elettronica reattiva
Contenuti straripanti sui dispositivi mobili
- Utilizza layout a colonna singola. Più colonne raramente funzionano bene in modo reattivo nelle email.
- Mantieni i paragrafi e le sezioni brevi e concisi. I lunghi blocchi di testo sono difficili da leggere su schermi piccoli.
- Usa elenchi puntati ed elenchi numerati quando possibile. Occupano meno spazio dei paragrafi.
- Nascondi contenuti secondari su schermi piccoli. Puoi utilizzare le query multimediali per mostrare/nascondere il contenuto in base alla larghezza dello schermo.
Problemi di larghezza dell'e-mail
Alcuni client di posta elettronica meno recenti presentano problemi con le larghezze di posta elettronica reattive. Per risolvere questo problema:
- Imposta una larghezza massima per il contenitore della posta elettronica. Consigliamo 600px per la maggior parte delle email.
- Aggiungi !important dopo le dichiarazioni di larghezza per sovrascrivere alcuni CSS del client di posta elettronica. Per esempio:
- Aggiungi codice di fallback per Outlook 2007-2013. Queste versioni precedenti necessitano di uno stile separato:
Seguendo questi suggerimenti per la risoluzione dei problemi si risolveranno i problemi più comuni relativi alla posta elettronica reattiva. Fatemi sapere se avete altre domande!
Conclusione
Questi sono alcuni semplici modi per assicurarti che le tue e-mail siano reattive. Tieni presente che oggi più del 50% delle e-mail vengono aperte tramite dispositivi mobili, quindi è essenziale ottimizzare le dimensioni degli schermi più piccoli. Controlla tutti i tuoi modelli per e-mail e apporta le modifiche necessarie alla dimensione del carattere, nonché alla dimensione e alla spaziatura dell'immagine. I tuoi destinatari apprezzeranno ricevere un'e-mail che potranno leggere e interagire indipendentemente dal dispositivo che utilizzano.