Disegni, modelli ed esempi per il 2023

Hai mai aperto un'e-mail sul tuo telefono e l'immagine era di bassa qualità, il testo era troppo piccolo e il pulsante di invito all'azione era rotto? Questi sono tutti difetti del design della posta elettronica statica. Le e-mail reattive sono la risposta.

Dato che più della metà dei residenti negli Stati Uniti guarda i messaggi di e-mail marketing sui propri telefoni, è necessario ottimizzare le e-mail per più schermi, inclusi dispositivi mobili e tablet.

Le e-mail reattive utilizzano immagini e tabelle fluide per rimanere flessibili su schermi di dimensioni diverse. In definitiva, forniscono contenuti progettati per l'esperienza ottimale di ogni utente.

Sebbene le e-mail reattive possano essere progettate utilizzando query multimediali CSS, non è necessaria alcuna esperienza di codifica per crearne una. La creazione di un'e-mail reattiva non è solo un lavoro per programmatori.

Qui, abbiamo messo in fila alcune best practice e modelli pronti all'uso, oltre a un breve tutorial sui fondamenti delle e-mail reattive.

Le e-mail reattive sono anche più accessibili, in quanto consentono agli abbonati di leggere sul proprio dispositivo preferito.

Per illustrare, ecco come appariva sul desktop un'e-mail promozionale che ho ricevuto.

Questa e-mail ha immagini fantastiche, icone acquistabili ed è ben formattata. Quando apro l'e-mail sul cellulare, questo è ciò con cui vengo accolto.

Ho ancora le stesse informazioni e le stesse foto e icone acquistabili. L'unica differenza evidente è il formato dell'e-mail. È diverso per adattarsi meglio all'esperienza mobile.

Ora, immagina se lo stesso layout desktop fosse applicato ai dispositivi mobili. Dovrei ingrandire il mio telefono per vedere le immagini o il testo. Invece di farlo, annullerei l'iscrizione.

Con l'e-mail reattiva, l'esperienza dell'utente può essere migliorata, così come il ROI della campagna.

Pensaci: gli abbonati soddisfatti di un design di posta elettronica mobile ottimizzato si ritroveranno ad aprire più messaggi di marketing perché sanno che sarà accessibile e avrà un bell'aspetto.

Quindi, con tutto questo parlare di e-mail reattive, devi avere voglia di crearne una tua. Successivamente, esamineremo alcuni esempi e modelli di email responsive.

Design e-mail reattivi

Esistono molti modi per progettare e-mail reattive.

Se hai conoscenze di codifica, puoi codificare diversi modelli di email per schermi di dimensioni diverse. Puoi anche utilizzare un modello predefinito che funziona con tutte le dimensioni dello schermo.

Indipendentemente dal tuo approccio, avrai bisogno del tuo software di email marketing. Qui puoi progettare un'e-mail e quindi visualizzarla in anteprima su diversi dispositivi. La maggior parte dei software di posta elettronica ti mostrerà come apparirà il design su più dispositivi.

Il video qui sotto ti guiderà attraverso come progettare un'e-mail con un modello. Nel video, l'utente è su Klaviyo, ma i concetti sono validi indipendentemente dal software utilizzato.

Codifica di un'e-mail reattiva

Se stai cercando di rendere reattivi gli elementi della tua email, dovrai lavorare con le media query.

Le media query sono una tecnica CSS. Ti consente di impostare regole di stile che vengono visualizzate solo se determinate condizioni sono vere. Ad esempio, puoi specificare le dimensioni dei caratteri e delle immagini da utilizzare quando uno schermo è largo 600 px o più piccolo.

Quando lavori con la posta elettronica, puoi utilizzare le media query per specificare come dovrebbe apparire il tuo design su desktop, tablet e dispositivi mobili. Per fare ciò, dovrai specificare quanto segue:

• Utilizzare il selettore "@media" e specificare "schermo". Ciò indica che il codice interesserà i dispositivi con uno schermo.
• Imposta la tua "larghezza massima" in pixel. Questo specifica la dimensione dello schermo in cui il codice avrà effetto.
• Specifica le guide di stile CSS che vuoi che quella specifica schermata segua.

Diamo un'occhiata al codice qui sotto.

@schermo multimediale e (larghezza massima: 600px)

corpo

dimensione carattere: 30px;

Se applicato al CSS di un'e-mail, il corpo del testo apparirà a una dimensione di 30 px per schermi larghi 600 px o inferiori.

Sebbene questo approccio possa aiutarti a creare determinati elementi della tua risposta e-mail, ti consigliamo di utilizzare un modello, se possibile.

A meno che tu non abbia un'esperienza completa di web design, la codifica di diversi schermi multimediali può richiedere molto tempo e essere frustrante.

Se non sei tecnico o desideri un metodo più semplice, prova a utilizzare uno strumento di email marketing con modelli reattivi integrati. Il software di posta elettronica gratuito di HubSpot, ad esempio, fornisce modelli di trascinamento della selezione che sono reattivi per impostazione predefinita.

Esempi di progettazione di email reattive

È tempo di esplorare gli esempi. Inizia con questo video, che ripercorre alcune delle migliori campagne di email marketing.

Quindi, puoi leggere alcuni dei nostri design di posta elettronica reattivi preferiti.

1. Notiziario TOMS

Nella newsletter di TOMS, la principale differenza tra la versione desktop e la versione mobile è l'impilamento e le dimensioni degli annunci display.

Con il design reattivo, la versione mobile non ha una navigazione ingombra e l'immagine si adatta perfettamente allo schermo. Anche le CTA sono state spostate per una migliore visibilità.

Fonte immagine

2. Il Metropolitan Museum of Art

Come visto nella newsletter di TOMS, il design reattivo delle e-mail aiuta a impilare il contenuto in modo visivamente accattivante e facile da digerire. Questo esempio dal MET non è diverso.

Su mobile cambia il posizionamento del menu. I collegamenti a diversi articoli del negozio di articoli da regalo si trovano nella parte inferiore della pagina. Ciò mantiene le immagini dei souvenir disponibili in primo piano e al centro.

Fonte immagine

3. Gelso

Ancora una volta, con un design di posta elettronica reattivo, il nome del gioco è impilabile. Si tratta di rendere il contenuto facile da leggere e visivamente accattivante, indipendentemente dalle dimensioni del dispositivo su cui qualcuno sta visualizzando il contenuto.

Le foto e il testo alternati hanno senso per il desktop, mentre l'impilamento coerente delle foto sul testo correlato per i dispositivi mobili, insieme alle linee di divisione, assicura che lo spettatore non venga confuso.

Fonte immagine

Modelli e-mail reattivi

Un modello reattivo si adatterà automaticamente a qualsiasi dimensione dello schermo, quindi se l'e-mail viene aperta su uno smartphone, tablet o computer, avrà un bell'aspetto e avrà funzionalità complete.

Per coloro che hanno meno conoscenze di codifica o per coloro che desiderano dedicare meno tempo al design, il mio consiglio è di utilizzare un modello. Sono un modo infallibile per assicurarti che la tua e-mail abbia un aspetto professionale e sia reattiva.

I modelli di email reattivi ti fanno risparmiare tempo nella progettazione di un'email che potrebbe essere stata scelta da una selezione. Ad esempio, lo strumento di email marketing di HubSpot include oltre 60 modelli solo per email reattive.

Diamo ora un'occhiata ad alcune opzioni del modello.

1. HubSpot

HubSpot offre un paio di modelli di email responsive gratuiti . Se sei un cliente HubSpot o un utente gratuito, puoi scaricarli e provarli tu stesso.

Ad esempio, ecco uno dei modelli di email reattivi: nota la barra laterale, dove puoi visualizzare l'anteprima del modello su più dispositivi.

Fonte immagine

Fare clic sui tipi di dispositivo e assicurarsi che la tua e-mail sia formattata di conseguenza è uno dei passaggi finali del processo di progettazione ed è l' unico passaggio nel processo di e-mail reattivo quando utilizzi software come HubSpot.

Facendo clic sul dispositivo smartphone per l'anteprima, ad esempio, puoi vedere se il tuo contenuto, inclusa la dimensione del carattere e la risoluzione dell'immagine, è formattato in modo piacevole per i dispositivi mobili.

2. Monitoraggio della campagna

I modelli offerti da CampaignMonitor sono simili a molti altri, in cui i risultati delle email reattive vengono mostrati nello strumento di anteprima. Ad esempio, ecco un modello CampaignMonitor:

Fonte immagine

Puoi vedere i diversi dispositivi affiancati in modo da poter confrontare facilmente gli elementi di design. È possibile apportare piccole modifiche per creare la migliore esperienza per tutti gli abbonati.

I modelli di CampaignMonitor sono spesso gratuiti, quindi è una buona scelta se disponi di un budget minimo.

3. Striscia

Stripo offre oltre 300 modelli di email HTML gratuiti. Puoi scegliere i modelli per settore, stagione, tipo e funzionalità. Ad esempio, ecco un modello dalla loro sezione del settore aziendale.

Fonte immagine

Un buon segno di un solido modello di email reattivo è l'opzione per vedere l'anteprima in entrambe le varianti desktop e smartphone, come mostrato nella modalità di anteprima di Stripo.

Si noti come nell'anteprima mobile è stato adottato un layout a colonna singola per adattarsi alle specifiche dei telefoni.

Stripo è un sito Web che puoi visitare rapidamente per trovare un modello adatto ai tuoi obiettivi. Potresti prendere in considerazione Stripo se stai cercando di provare e-mail reattive o vuoi qualche ispirazione per il design.

4. Contatto costante

Constant Contact offre oltre 200 modelli di email professionali accessibili dopo la registrazione. Guardando l'esempio qui sotto, puoi vedere che la piattaforma offre modelli di email reattivi.

Fonte immagine

I modelli di Constant Contact hanno la modifica con trascinamento della selezione, l'opzione per aggiungere sondaggi, funzioni di e-commerce e uno strumento di libreria di foto. Queste funzionalità possono tutte aiutare a creare gli abbonati e-mail che vogliono vedere.

È utile utilizzare un servizio come Constant Contact perché gli strumenti specifici consentono di mantenere la coerenza, come nell'esempio sopra. Puoi dire che la natura reattiva dell'e-mail non compromette nessuno degli elementi di design.

Ora che abbiamo dato un'occhiata ad alcune opzioni del modello, diamo un'occhiata a un altro modo per far funzionare le e-mail reattive, insieme alle best practice.

Best practice per le e-mail reattive

Il design esatto della tua email reattiva varierà in base agli obiettivi della tua campagna. Tuttavia, questi suggerimenti possono aiutarti a garantire la migliore esperienza per i tuoi lettori.

• Assicurati che la tua email reattiva sia scalabile e flessibile. Visualizza l'anteprima dell'email su diversi dispositivi per assicurarti che il tuo messaggio sia reattivo.
• Se stai codificando la tua e-mail, ricorda che le query multimediali CSS modificano i campi fissi in campi fluidi.
• Usa caratteri più grandi che saranno facili da leggere su schermi più piccoli.
• I layout a colonna singola sono più facili da ridimensionare. Se i layout semplici vanno bene per le tue pagine web, considerali sicuramente per le email reattive.

Assicurati di testare le tue e-mail prima di premere "programma". Finalizza i progetti solo dopo aver visto come appaiono su più risoluzioni dello schermo. Così tante persone accedono alle e-mail tramite cellulare solo per comodità.

Un modo semplice per verificare l'efficacia della tua e-mail è inviarla a te stesso o al tuo team come test: si confronta con le altre e-mail di marketing reattive nella tua casella di posta? In tal caso, sei pronto per l'invio.

Iniziare con le email reattive

Le e-mail reattive creano un'esperienza migliore e più accessibile per i tuoi clienti. Se stai solo effettuando la transizione, inizia esplorando i modelli di email reattivi predefiniti. Questi ti faranno risparmiare tempo dandoti flessibilità di progettazione.

Quindi, chiedi una seconda opinione. Chiedi a un collega di aprire un'e-mail sul desktop e sul telefono. Puoi ottenere il loro feedback onesto su entrambe le esperienze.

Infine, non aver paura di sperimentare. Puoi testare A/B diversi design reattivi finché non trovi un layout che risuoni di più.

Presto invierai e-mail reattive e aumenterai i tuoi tassi di apertura.