Dimensione ottimale del banner per i tuoi modelli di posta elettronica

I banner sono uno strumento straordinario per rendere le tue email più organizzate, attirare l’attenzione dei destinatari sugli elementi chiave del messaggio e permetterti di distinguerti nelle affollate caselle di posta dei tuoi lettori. Tuttavia, una dimensione errata del banner può compromettere la struttura dei contenuti e vanificare tutti gli sforzi compiuti.

In questo articolo scoprirai la larghezza e l’altezza ideali di un’immagine banner e gli aspetti fondamentali da considerare quando ne crei uno per le tue campagne di email marketing. Ti forniremo inoltre utili suggerimenti per realizzare banner accattivanti con Stripo in pochi minuti.

Che cos’è un banner email?

È un’immagine di alta qualità posizionata nella parte superiore del tuo messaggio per evidenziarne lo scopo principale e il tono. Le immagini banner possono essere accompagnate dal nome del tuo brand, dal logo aziendale, da una call to action, dalla tua offerta e da foto di prodotti. Puoi arricchire il banner con testi brevi e diretti come “-15% su articoli selezionati” o “Vendita lampo per il weekend” per rendere il contenuto della tua email il più chiaro possibile.

(Fonte: Modello Stripo)

L’importanza della dimensione del banner email

Un’immagine banner trasmette la tua UVP (unique value proposition) e gli elementi associati al brand come il logo, la call to action, le palette cromatiche aziendali e le grafiche. Queste caratteristiche ti distinguono dalle centinaia di email promozionali che affollano le caselle di posta dei destinatari e incoraggiano gli iscritti ad aprire e leggere i tuoi messaggi. 

Una dimensione inadeguata del banner email può rovinare l’intera struttura dei tuoi contenuti. Un banner eccessivamente largo costringerà il client di posta ad attivare lo scorrimento orizzontale, mentre un banner troppo piccolo farà strizzare gli occhi ai destinatari per riuscire a leggere il contenuto. 

Le dimensioni perfette del modello di email

La misura standard dei banner email è di 600–700 px in larghezza per i desktop, assicurando una resa uniforme su vari dispositivi. L’altezza, invece, si colloca generalmente tra 350–500 px.

Seguendo le dimensioni dei banner email che abbiamo condiviso qui sotto, potrai creare design visivamente accattivanti e responsive per schermi desktop e mobili, evitando di realizzare banner con dimensioni errate.

È possibile utilizzare diversi tipi di banner email all’interno della tua newsletter per raggiungere obiettivi differenti. Ora parleremo delle dimensioni perfette del banner per i banner del corpo, le intestazioni, e i piè di pagina della tua email responsive.

Dimensione del banner di intestazione dell’email

Un’immagine di intestazione vivace e accattivante motiverà i tuoi lettori a continuare a scorrere. Puoi corredare questa intestazione con il logo aziendale, un breve testo che spieghi lo scopo principale della tua email e una CTA. Ti consigliamo di limitare la larghezza del banner email a 600–700 px e l’altezza a 90–200 px per i computer. 

Su dispositivi mobili è consigliabile utilizzare editor di email moderni che supportino immagini responsive nella creazione dei banner. Un approccio responsive consente all’immagine di adattarsi automaticamente alla dimensione dello schermo su cui viene visualizzata. Le immagini responsive ti liberano da complicazioni, poiché non puoi sapere con certezza su quale dispositivo mobile verrà aperta l’email; il tuo obiettivo principale è offrire un’esperienza email coerente, e le immagini responsive sono lo strumento giusto per questo compito.

In altri casi, puoi seguire il consiglio di Roman riportato sopra.

Ecco un esempio di intestazione email di 650 px (larghezza) e 200 px (altezza):

Dimensione del banner del corpo dell’email

Un banner accattivante all’interno del corpo dell’email può trasmettere l’idea centrale del tuo messaggio senza sovraccaricare i lettori con lunghi paragrafi di testo. Qui puoi fornire maggiori dettagli sulla tua offerta e spiegare quali problemi il cliente può risolvere grazie ad essa. 

Per gli schermi desktop ti consigliamo di creare un banner nel corpo dell’email largo 650–700 px e alto 350–500 px. Su dispositivi mobili la situazione è la stessa. Considera le dimensioni di schermo più comuni, come già menzionato, oppure utilizza editor email moderni con funzionalità che consentono di generare immagini dinamiche che si adattano automaticamente.

(Source: Modello Stripo)

Dimensione del banner del piè di pagina dell’email

Posizionato nella parte inferiore della newsletter, il piè di pagina può includere i recapiti della tua organizzazione per eventuali richieste, gli account social e l’opzione “Annulla iscrizione”. Questi dettagli consentono al contenuto di evitare la cartella spam e di raggiungere le caselle di posta dei destinatari.

Mantieni i piè di pagina delle email larghi 650–700 px e alti fino a 150 px per gli schermi desktop. Su dispositivi mobili, ti consigliamo di seguire i nostri suggerimenti sulle dimensioni predefinite delle immagini che corrispondono agli schermi più diffusi, oppure di creare email con editor che supportano immagini responsive per semplificare il lavoro dell’email marketer. Dai un’occhiata al nostro esempio di piè di pagina dell’email (700 px di larghezza e 150 px di altezza):

(Source: Modello Stripo)

Dimensioni del banner nella firma dell’email

Le firme sono spesso collocate nella parte inferiore delle email e possono essere realizzate utilizzando banner. Le dimensioni del banner della firma sono sostanzialmente le stesse di quelle del piè di pagina: puoi impostarle tra 650 e 700 px di larghezza e fino a 150 px di altezza per la versione desktop dell’email.

(Source: Modello Stripo)

Per quanto riguarda il dispositivo mobile, utilizza dimensioni predefinite delle immagini oppure un approccio responsive se il tuo editor di email supporta funzioni simili che consentono di creare sezioni dell’email con immagini dinamiche.

Cosa considerare quando si crea un banner email

Ora che conosci tutte le dimensioni ideali per i diversi tipi di banner email, vediamo alcuni altri aspetti essenziali da considerare durante il processo di design per rendere i tuoi banner accattivanti:

Dimensione del pulsante

I pulsanti nei banner email devono essere sufficientemente visibili, quindi è fondamentale assicurarsi che non si confondano con l’ immagine di sfondo e con gli altri elementi del messaggio.

(Source: Modello Stripo)

Testo sopra le immagini del banner

Un tipico banner email comprende un’immagine e un testo sovrapposto. In questo caso è fondamentale definire i caratteri tipografici e le combinazioni di colori adeguate per rendere il testo leggibile e vivace. Ad esempio, sarebbe difficile notare un testo marrone su un’immagine nera. Lo stesso vale per i colori chiari: il testo bianco su uno sfondo grigio chiaro è una scelta sbagliata.

Ti consigliamo di sperimentare con font, colori, dimensioni e posizionamento del testo per renderlo visibile e leggibile. Nelle immagini qui sotto puoi vedere che un banner con un carattere illeggibile e testo grigio su un’immagine di sfondo marrone appare disordinato, mentre la prima opzione, con un carattere più leggibile e un colore a contrasto, risulta molto più evidente.

Dimensione dell’immagine

È altrettanto fondamentale garantire una buona velocità di caricamento. Più rapidamente si apre l’email, meglio è. Assicurati di comprimere le immagini del banner prima di inserirle nelle email, per evitare di aumentare la dimensione del file del banner. 

Utilizzando Stripo, è possibile comprimere in automatico tutte le immagini inserite. Attiva l’opzione Image Compression e seleziona la percentuale di compressione desiderata nelle impostazioni dell’area di lavoro.

Ottimizzazione per il dispositivo

I banner email con immagini a tema festivo richiedono l’ottimizzazione per i dispositivi, al fine di garantire che il modello sia accessibile ed efficace su tutti i dispositivi. Durante il periodo delle festività, quando le persone hanno fretta, utilizzano soprattutto dispositivi mobili o tablet. È quindi fondamentale assicurarsi che il modello sia ottimizzato insieme a tutti i pulsanti CTA e alle illustrazioni.

Branding

Creando un banner email festivo con immagini brandizzate, puoi aumentare il riconoscimento del marchio e coinvolgere nuovi clienti, elemento essenziale per il business. Assicurati che il banner festivo sia coerente con gli altri materiali del brand; aggiungi il template brandizzato e personalizza il design del banner in linea con l’identità visiva del marchio. Le tue campagne email festive saranno facilmente riconoscibili. Logo, tipografia e schema cromatico aiutano consumatori e aziende a costruire fiducia e lealtà, favorendo maggiore coinvolgimento, vendite e ROI.

Link building

Assicurati che l’immagine del banner festivo rimandi alla landing page necessaria! È molto semplice aggiungere un link a qualsiasi immagine; ad esempio, un collegamento a una pagina prodotto può essere un’ottima scelta se stai promuovendo un articolo specifico. I destinatari cliccano e interagiscono direttamente con i tuoi contenuti. In questo modo aumenti il CTR e generi conversioni direttamente nello stesso banner festivo.

Creazione di un banner con Stripo

Utilizzando il nostro editor, puoi iniziare a creare banner email in pochi minuti. Abbiamo selezionato alcuni suggerimenti per rendere questo processo più semplice:

Preparazione del banner

Innanzitutto, è necessario inserire un banner nel modello email. È disponibile un blocco banner dedicato che va trascinato e posizionato nel modello.

Successivamente, clicca sul banner aggiunto per aprire questo menu. Prima di poter modificare le dimensioni e gli altri parametri, devi allegare un’immagine per il banner email. Hai diverse opzioni: caricare un’immagine dal tuo dispositivo, utilizzare immagini stock oppure generare un’immagine unica con la funzione AI Image.

Nel nostro esempio, abbiamo scelto l’opzione Photostock. Ti basta cliccare sull’immagine desiderata (inserisci una query di ricerca nell’apposito campo se non trovi subito immagini adatte alle tue idee di design) e verrà automaticamente allegata al banner.

Una volta completato, puoi procedere alla modifica dei parametri del banner email.

Modifica della larghezza e dell’altezza per desktop

Per impostare la dimensione corretta del banner email, vai alla scheda Impostazioni. La sezione Dimensioni è tutto ciò che ti serve per definire le misure necessarie.

Ci sono diversi pulsanti che ti serviranno per impostare la dimensione corretta del banner (da sinistra a destra):

• adatta l’immagine alla dimensione del contenitore;
• ripristina la dimensione reale dell’immagine;
• modalità di regolazione della larghezza;
• modalità di regolazione dell’altezza;
• pulsanti di regolazione della dimensione (funzionano separatamente per le modalità di regolazione di larghezza e altezza).

Imposta semplicemente le dimensioni corrette utilizzando questi pulsanti, e sei pronto per procedere.

Puoi anche impostare una forma di ritaglio nella sezione corrispondente, scegliendo tra orientamenti predefiniti (sia verticale che orizzontale).

Modifica della larghezza e dell’altezza per dispositivi mobili

Per fare in modo che il banner email venga visualizzato correttamente sugli schermi dei dispositivi mobili, clicca sull’opzione Vista Mobile per aprire le impostazioni della versione mobile in Stripo.

Abbiamo l’opzione Immagine Responsiva abilitata di default, quindi nella maggior parte dei casi non devi fare nulla, poiché questa opzione garantisce che l’immagine del banner si adatti automaticamente alle dimensioni dello schermo.

Puoi disattivare questa opzione, ma non lo consigliamo: una volta disabilitata, l’immagine del banner rimarrà statica, indipendentemente dalla risoluzione dello schermo su cui viene visualizzata. Ciò può comportare una resa scadente delle immagini e dei contenuti del banner.

La modifica della forma di ritaglio è identica a quella della versione desktop.

Aggiunta di immagini e link

Per inserire un pulsante nel banner, puoi utilizzare un’opzione che permette di sovrapporre un’altra immagine al banner. In questo modo puoi abbinare l’immagine di sfondo predominante a un’altra, ottenendo design originali per l’email o evidenziando il banner.

Per farlo, clicca sull’opzione Immagine mentre ti trovi nelle impostazioni del blocco Banner.

Vedrai lo stesso menu per l’aggiunta di un’immagine che hai già visto per l’intero banner. Ti basta scegliere l’opzione corretta per aggiungere un’immagine e procedere.

Una volta aggiunta, la tua immagine apparirà al centro del banner e vedrai un piccolo menu con le opzioni per impostarne l’opacità, la rotazione, capovolgerla come necessario e applicare filtri visivi sopra di essa.

Per modificare la dimensione di questa immagine aggiuntiva, devi trascinare gli angoli della cornice e l’immagine cambierà dimensione. Puoi anche spostare l’immagine all’interno dei bordi del banner cliccando e trascinandola, oltre a ruotarla manualmente toccando il punto sopra la cornice.

Hai aggiunto la tua immagine CTA per attirare l’attenzione. Ora, come rendere cliccabile il banner? Ti basta impostare il link nel campo corrispondente e, una volta aggiunto, l’intero banner diventerà un grande pulsante CTA che porterà il destinatario alla pagina desiderata.

Aggiunta di testi e loro modifica

Se desideri ulteriori opzioni per decorare l’immagine del banner, puoi aggiungere del testo sopra di essa. Clicca sull’opzione Testo sopra il banner.

Il nodo di testo apparirà automaticamente al centro del banner e vedrai una scheda con diverse opzioni di testo.

Per digitare il tuo testo, fai doppio clic sul nodo di testo per selezionare il testo predefinito e inserisci quello nuovo.

Per quanto riguarda le opzioni di modifica, ne hai a disposizione una grande varietà. Puoi cambiare manualmente posizione, dimensione e rotazione trascinando gli angoli della cornice del nodo di testo oppure spostando l’intero nodo, proprio come hai fatto con l’immagine.

Quanto al testo vero e proprio, puoi:

• selezionare il carattere del testo, la sua dimensione e il colore;
• scegliere l’allineamento del testo;
• modificare lo stile con grassetto, corsivo, sottolineato o barrato;
• cambiare il maiuscolo/minuscolo delle lettere;
• impostare l’opacità, la rotazione e capovolgere il testo secondo necessità.

Ecco come appare il nostro nodo di testo dopo che la maggior parte delle opzioni è stata applicata. Modifica i testi per adattarli facilmente alle esigenze di design della tua email.

Concludendo

La giusta dimensione del banner email manterrà il tuo messaggio strutturato e attirerà l’attenzione degli iscritti sugli elementi centrali. Ora che conosci la larghezza e l’altezza ideali di un banner email e sai come crearne uno con Stripo, sei pronto a rendere la tua prossima campagna un successo!