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

CONDIVIDI L’ARTICOLO

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

SCOPRI

Altri articoli
popolari.

Un nuovo standard per migliorare la tua deliverability: scopri il BIMI

Il mondo di magnews

Un nuovo standard per migliorare la tua deliverability: scopri il BIMI

I professionisti dell’email marketing sono costantemente alla ricerca di nuove strategie che possano garantire loro migliori risultati: in che modo dare maggiore visibilità alle comunicazioni all’interno della posta in arrivo, e come assicurarsi un buon Open Rate?

3 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

Deliverability e brand protection score: ancora più semplice con magnews

Roadmap

Deliverability e brand protection score: ancora più semplice con magnews

Abbiamo implementato una procedura guidata per creare (e modificare) i domini web e i domini mittente. Questa implementazione è il seguito di quanto fatto nella scorsa release per tenere sotto controllo il brand score delle tue comunicazioni.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Il cantiere dei tag avanza sui report (anche SMS)

Roadmap

Il cantiere dei tag avanza sui report (anche SMS)

I tag sono delle etichette che puoi utilizzare per contrassegnare o qualificare i contenuti delle comunicazioni o le comunicazioni stesse, sia email sia SMS: assegna i tag per identificare gli interessi dei contatti.

1 MIN. LETTURA

magnews

Digital Marketing Platform

Testo di anteprima: più in vista nella inbox dei tuoi contatti

Roadmap

Testo di anteprima: più in vista nella inbox dei tuoi contatti

Il testo di anteprima (aka pre-header, dagli addetti ai lavori) è uno strumento visibile in quasi tutti i client di posta e nelle anteprime degli smartphone, solitamente dopo il subject. Dal punto di vista del contatto, questo testo fornisce un'idea dell'argomento e, insieme a mittente e subject, fa decidere al contatto se aprire la tua email oppure no. 

2 MIN. LETTURA

magnews

Digital Marketing Platform

Proteggi il tuo brand dal Phishing: il dominio per il tracciamento link

Il mondo di magnews

Proteggi il tuo brand dal Phishing: il dominio per il tracciamento link

Sono ancora in molti a chiedersi se sia il caso o meno di implementare il DMARC, a cosa serva e quale sia la sua effettiva utilità: cos’è il DMARC? Come funziona e in che modo impedisce lo spoofing e il phishing?

6 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

Un grande passo per la Brand Protection: difendi il tuo dominio col DMARC

Il mondo di magnews

Un grande passo per la Brand Protection: difendi il tuo dominio col DMARC

Sono ancora in molti a chiedersi se sia il caso o meno di implementare il DMARC, a cosa serva e quale sia la sua effettiva utilità: cos’è il DMARC? Come funziona e in che modo impedisce lo spoofing e il phishing?

3 MIN. LETTURA

Lucia Mongardi

Deliverability Manager

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