Quale è la larghezza ottimale per il design di una email?

CONDIVIDI L’ARTICOLO

Condividi su facebook
Condividi su twitter
Condividi su linkedin
Preview_blog_Design email

Mondo nerd - 5 MIN. DI LETTURA

Aggiornato: Marzo 2022
Andrea Valletta

Head of Customer Success

E’ una delle domande più fondamentali dell’email design: quanto deve essere larga una email? Ecco la risposta.

Se sei qui per una risposta veloce, eccola qui: la maggior parte dei layout delle email è tra i 600 e i 700 pixel di larghezza. Non è più necessario essere ancorati a una larghezza massima di 600px, come alcune fonti poco aggiornate suggeriscono ancora. Scegli invece la larghezza che meglio funziona con il tuo design e la complessità del tuo layout.

Sei interessato a saperne di più e tuffarti nel mondo della larghezza delle email per trovare la larghezza ottimale per il tuo template email? Ottimo! Andiamo avanti.

Il mito della regola dei 600px

Per molto tempo, i 600px è stata la regola aurea per la larghezza delle email.

A inizio degli anni 2000, Microsoft Outlook dominava il mercato dei client email, e la larghezza media di un monitor da desktop era 1024px. Creativi di tutto il mondo dovettero adattare le loro email per rispettare questi vincoli, ed evitare lo scrolling orizzontale. E da questi limiti che nacque la regola dei 600 pixels, e da allora largamente diffusa.

Perché la larghezza ha un significato per l’email design?

Quando si progetta una email, l’attributo width specifica a quale larghezza può arrivare un elemento HTML, in questo caso un div o la table che contiene tutti gli elementi della email. A livello più basilare, la larghezza delle email definisce quanto è largo lo spazio di disegno che si potrà riempire con i tuoi contenuti.  La larghezza ideale di una email fornisce al tuo design abbastanza spazio di respiro, si renderizza diversamente tra i client, e ti permette di lavorare con tutte le colonne che hai intenzione di mostrare.

Quanto deve essere larga una email?

La mia convinzione personale è che i mitici 600 pixel non siano più un requisito tecnico già da diversi anni.

Quella larghezza fa parte di un retaggio culturale che tuttavia non è da considerarsi sorpassato per diversi motivi.

Il primo di questi è la percentuale di aperture su device mobili, attestata ben oltre il 50%. In tutti questi casi i contenuti si vedranno a una larghezza che non sarà mai quella massima impostata. Non solo, far sì che il layout possa adattarsi a dispositivi con minor risoluzione – generally speaking, che sia responsive – comporta un lavoro non banale su HTML e CSS. Ad esempio per visualizzare in stack un blocco a 3 colonne, o per portare sotto all’immagine il testo prima affiancato.

Prima della complessità tecnica è necessario un progetto a priori su come i blocchi del template si debbano riposizionare. E’ più facile smontare un layout a 640px in due colonne a 320px – dimensione minima per un iPhone – che ricomporre layout articolati predisposti su desktop in colonne multiple.

In ogni modo un’impostazione monocolonna agevola la progettazione di un layout desktop e della sua controparte mobile, ed è una soluzione oggi largamente utilizzata.

Thun // 640px // semplice layout monocolonna

Il secondo motivo è che le email, come tutti i contenuti digitali destinati al consumo da mobile, sono progettate per una lettura verticale. Il layout verticale è quello che meglio si adatta ai device, trend su cui si stanno allineando la maggior parte dei contenuti creativi, video inclusi. Questo fornisce un naturale percorso logico, tenendo i contenuti più importanti “above the fold”, nella prima schermata disponibile e presentando via via il resto delle immagini e informazioni. La email da desktop – confinata ai 600 pixel –  resta nello stesso pattern di consultazione dei contenuti, garantendo una consistenza con il mobile. Per riempire lo spazio vuoto a fianco è pur sempre possibile impostare una tabella di background, e consentire ad alcuni elementi di occupare tutto lo spazio disponibile.

Panini // 600 px // tabella in background a pieno schermo

Non da ultimo, la consapevolezza che i 600px siano stati lo standard de facto degli ultimi 20 anni dà una solida garanzia che tutti i client email gestiscano correttamente email con quelle dimensioni massime. Ovvero che il layout sia rappresentato correttamente e che ci sia sufficiente spazio a monitor (i.e. viewport) per consultare la email senza uno scroll orizzontale. Realizzare un nuovo template su quella larghezza non ci pone interrogativi su come si vedrà nei diversi client, e sappiamo già quali accorgimenti sono necessari per sistemare le piccole noie di compatibilità. E’ una comfort zone, e spesso tenere le cose semplici è una buona idea.

Nessuno va oltre?

Ci sono diversi esempi di brand che sorpassano i famigerati 600px.

Ad esempio Bouchara, marchio internazionale di biancheria e complementi di arredo per la casa, propone un bel design articolato in 4 colonne su larghezza massima di 678px.

Pochi davvero propongono larghezze oltre i 700px.

Bouchara // 678 px // 4 colonne affiancate

Vuoi saperne di più su come realizzare un email design perfetto?

Scopri nel nostro blog le risorse per realizzare il design di una email, potrà essere sufficiente seguire i principi fondamentali su layout e scelta dei colori per ottenere già un buon risultato. Perché spesso le cose semplici sono quelle che funzionano meglio.

CONDIVIDI L’ARTICOLO

Condividi su facebook
Condividi su twitter
Condividi su linkedin

SCOPRI

Altri articoli
popolari.

Filtri sui contatti più friendly

Roadmap

Filtri sui contatti più friendly

Abbiamo cambiato l'aspetto dei filtri, in particolare i filtri sulle liste di contatti. I filtri sono strutturati secondo "livelli discendenti", ad albero. Quando si fa un filtro su un campo o un'informazione statistica con molti livelli, è indispensabile ricordare il percorso fatto per raggiungere il filtro. Ora questi li vedi visualizzati subito sopra al filtro finale scelto. 

2 MIN. LETTURA

magnews

Digital Marketing Platform

Una sola app per 2 nuovi canali: WhatsApp e Telegram

Roadmap

Una sola app per 2 nuovi canali: WhatsApp e Telegram

Con il connettore MessengerPeople puoi gestire i canali WhatsApp for business e Telegram. Con la nuova versione dell'app MessengerPeople puoi inviare notifiche e reminder ai tuoi contatti, direttamente dalla piattaforma. Leggi l'articolo completo!

3 MIN. LETTURA

magnews

Digital Marketing Platform

Consolidato e potenziato il report obiettivi di conversione

Roadmap

Consolidato e potenziato il report obiettivi di conversione

Nell'ottica del miglioramento continuo, raccogliamo i vostri suggerimenti e i feedback per migliorare e rendere sempre più efficace quanto abbiamo fatto finora. Il report dell'obiettivo di conversione riportava già molte informazioni sulle conversioni, sugli asset che hanno portato alle conversioni e anche statistiche, oltre che sul valore, sui parametri.

2 MIN. LETTURA

magnews

Digital Marketing Platform

Email size in 5g era

Mondo nerd

Email size in 5g era

Quando parliamo di dimensioni in una email, stiamo in realtà parlando di 3 cose: le dimensioni del file HTML inviato, le dimensioni degli oggetti esterni - perlopiù immagini - e infine il suo peso complessivo. Email pesanti richiedono un tempo maggiore per un rendering completo, e può essere un problema considerando che più della metà degli utenti elimina una email entro due secondi dall'apertura. Leggi l'articolo completo!

6 MIN. LETTURA

Andrea Valletta

Head of Customer Success

Mail Sicure, Mail Certificate

Ingegneri prestati al marketing

Mail Sicure, Mail Certificate

Un computer spento, per quanto sicuro, è certamente poco utile alle finalità di Marketing e di Business di ogni azienda. In questo articolo voglio quindi raccontarvi due funzionalità di magnews non troppo conosciute, ma certamente fondamentali nell'ambito della email Security e email Certification.

5 MIN. LETTURA

Andrea Zagnoli

Chief Customer Officer

DATA IS KING? OH YES!

Il mondo di magnews

DATA IS KING? OH YES!

Le migliori strategie per individuare, raccogliere, gestire ed analizzare i dati, protagonisti indiscussi per ogni azione di marketing. E come i dati possono diventare i nostri migliori alleati nel business.

5 MIN. LETTURA

magnews

Digital Marketing Platform

Diventa Partner!

Creare una relazione tra le aziende e i consumatori che possa generare valore di business per entrambi in una esperienza di successo.

Stiamo creando una community che vogliamo far crescere assieme per costruire una collaborazione sempre più di valore.

Partner Program, la soluzione di magnews che consente di diventare parte di un vero knowledge hub, progettato per favorire la crescita di competenze e business.

  • Ho letto e compreso la Privacy Policy e accetto integralmente i Termini d'Uso.

Raggiungi i tuoi obiettivi di business

Scrivi ad un nostro consulente oppure richiedi una demo gratuitamente!

Richiedi una demo Scrivi ad un consulente

No grazie