Design Struttura Modelli How-to
~ 9 minuti letti
88375 visualizzazioni
valutalo
20 dicembre 2021

Nuova era del design delle email ottimizzato per i dispositivi mobili

Stripo / Blog / Nuova era del design delle email ottimizzato per i dispositivi mobili

Il design responsive delle email non è una sorpresa oggi, poiché sappiamo tutti che l'ottimizzazione per i dispositivi mobili, nota anche come “mobile-friendly”, non è più solo un’ opzione piacevole da utilizzare ma è un must. E tutti noi ci dobbiamo attenere a questa regola d'oro: assicurarsi che le proprie e-mail siano ottimizzate per i dispositivi mobili.

Ma sapevi che il design responsive va ben oltre l'opzione "adatta allo schermo dei dispositivi mobili"? Puoi applicare dimensioni dei caratteri delle intestazioni, della copia normale, dei pulsanti, ecc.  diverse rispetto alla versione desktop della tua email. Puoi anche lavorare sui padding interni all'interno dei contenitori e nascondere/disabilitare determinati elementi sui dispositivi mobili.

Come farlo senza skill di programmazione — lo spiegheremo qui di seguito.

1. ​​Nascondere/abilitare gli elementi delle email su desktop e dispositivi mobili

Stripo ti consente di nascondere alcuni elementi sui dispositivi mobili e allo stesso tempo nascondere altri elementi sui dispositivi desktop. Ciò significa che puoi scegliere quali elementi verranno visualizzati sui dispositivi mobili e quali verranno visualizzati solo sui dispositivi desktop.

Ci sono diversi motivi per cui potresti aver bisogno di questa opzione. Ad esempio, per nascondere alcune schede menu sui dispositivi mobili per evitare lo scorrimento orizzontale, che potrebbe verificarsi nel caso si applica un carattere di grandi dimensioni al testo. O per nascondere un distanziatore verticale se lo hai utilizzato per dividere visivamente gli elementi posizionati in una riga.

Come farlo con Stripo:

  • fai click sull'elemento che si desidera mostrare/nascondere nei dispositivi mobili;

  • nel pannello Impostazioni trovi l'opzione “Nascondi elemento”;

  • fai click sull'icona "Dispositivo Mobile" o "Desktop".

Layout e-mail reattivo_Nascondere e abilitare elementi sui dispositivi mobili

Per mostrarti come funziona, abbiamo creato un'email con distanziatori tra le foto sui dispositivi desktop e li abbiamo disabilitati per i dispositivi mobili.

Come creare un layout di posta elettronica reattivo_Versione desktop_con spaziatori

(Versione desktop, con distanziatori)

Come creare un layout di posta elettronica reattivo_Versione mobile_senza distanziatori

(Versione dispositivi mobili, senza distanziatori)

Vivi la nuova era dell'ottimizzazione mobile 
Inizia

2. Stili di design per la copia dell'email

Per rendere i testi delle tue email completamente leggibili su qualsiasi dispositivo, potresti voler applicare una dimensione del carattere a qualsiasi parte della tua copia che sia più grande o più piccola della stessa che apriremo su un dispositivo desktop.

Puoi farlo nella scheda "Formattazione mobile".

Design e-mail reattivo_Impostazione di stili mobili con Stripo_Nessun codice

Nella scheda "Formattazione mobile", puoi applicare la dimensione del carattere a:

  • copia dell'intestazione;

  • copia del contenuto;

  • copia piè di pagina;

  • copia dell'area informativa;

  • schede menu;

  • Intestazione 1-3.

Per quest'ultimo, puoi anche scegliere l’allineamento del testo : destra, centro o sinistra.

Email ottimizzate per dispositivi mobili_Lavorare sugli stili delle intestazioni

Tutti questi stili verranno applicati solo alla versione per dispositivi mobili della tua email e non influenzeranno gli stili di design che hai impostato nella sezione "Impostazioni generali", nella scheda "Aspetto" per la versione desktop.

Per mostrarti come funziona, abbiamo creato una breve email con un menu e un'intestazione.

Desktop_La dimensione del carattere del menu è di 12 pixel

(Desktop, menu 14 px, intestazione 64 px)

Mobile_Dimensione carattere e intestazioni del menu

(Dispositivo Mobile, menu 18 px, intestazione 36 px)

Ottimizza i testi delle tue email per renderli completamente leggibili su tutti i dispositivi
Inizia

3. Stili di design per i pulsanti CTA

Non c'è bisogno di dire che i pulsanti CTA sono l'elemento chiave in tutte le email in quanto consentono agli utenti di intraprendere le azioni necessarie, di indirizzarli al nostro sito Web, ecc. Significa che dobbiamo renderli evidenti e facili da cliccare.

Nella scheda "Formattazione mobile", puoi:

  • impostare un set di caratteri più grandi per i tuoi pulsanti — nel Pulsante di controllo dimensioni testo;

  • abilitare l'opzione "Pulsanti a dimensioni reali" per adattare il pulsante allo schermo del dispositivo mobile di un utente.

Email ottimizzate per dispositivi mobili_Larghezza pulsante

In questo modo, ti assicuri che i tuoi pulsanti siano visibili e cliccabili sui dispositivi mobili.

Per mostrarti come funziona, abbiamo creato una breve email con un pulsante CTA.

Design e-mail reattivo_Pulsanti sui desktop

(Desktop, Pulsante di controllo dimensioni testo 18 px)

Email ottimizzate per dispositivi mobili_Pulsante a larghezza intera

(Dispositivo Mobile, Pulsante di controllo dimensioni testo 22 px)

Se abiliti l'opzione "Pulsanti a dimensioni reali", puoi anche impostare i padding superiori e inferiori, ovvero lo spazio interno tra il bordo del pulsante e il testo al suo interno.

Importante

Attualmente, il nostro team di sviluppatori sta lavorando alla nuova versione dell'editor. Il “New Stripo” ti consentirà di lavorare sul design di una versione necessaria della tua e-mail — desktop o dispositivi mobili. Per far ciò, devi semplicemente passare ad una modalità necessaria e perfezionare la tua email.

Prova subito la nuova versione dell'editor di email Stripo
Provalo

4. Allineamento degli elementi

Alcuni elementi potrebbero avere un bell'aspetto sui dispositivi desktop quando sono allineati al centro, ma l’effetto potrebbe essere diverso sui dispositivi mobili. Quindi potresti voler impostare un allineamento diverso per determinati elementi sui dispositivi mobili rispetto ai dispositivi desktop.

Come farlo con Stripo:

Tieni presente che questa opzione funziona per elementi email come testi, pulsanti, video e immagini*. E non funziona per contenitori interi, strutture e righe.

  • fai click su un elemento email necessario nel tuo modello;

  • nel pannello Impostazioni, vedrai l'icona "Disposiviti Mobili";

Layout e-mail reattivo_Impostazione dell'allineamento per dispositivi mobili

  • cliccaci sopra per attivare le impostazioni per l'elemento scelto;

  • scegli l’ allineamento necessario.

* L'opzione di allineamento funziona solo per quei video e immagini, quando c'è dello spazio disponibile nel contenitore, come i paddings interni. Se l'immagine o il video occupa l'intero contenitore, l'opzione di allineamento non sarà attiva.

Per mostrarti come funziona, abbiamo allineato al centro le immagini per i dispositivi desktop e a sinistra quelli per dispositivi mobili.

Centra immagini allineate su dispositivi desktop_Come creare un'e-mail reattiva

(Desktop, immagini allineate al centro)

Immagini allineate a sinistra su dispositivi mobili

(Dispositivi mobili, immagini allineate a sinistra)

5. Paddings 

A volte potresti voler rendere il design della tua email "pulito" con molti spazi bianchi. A volte i padding per i contenitori e le strutture/righe si riempiono con uno sfondo colorato. Tutto questo può apparire carino sui dispositivi desktop, ma sui dispositivi mobili può far sembrare questi elementi più piccoli o potrebbe far peggiorare leggermente l'aspetto della tua email.

Quindi potresti non volerli utilizzare per i dispositivi mobili.

Nota che i paddings funzionano solo per i contenitori e le strutture.

Come farlo con Stripo:

  • fai click su un elemento necessario nel tuo modello di email;

  • nel pannello Impostazioni, trova l'icona "Dispositivi Mobili";

  • cliccaci sopra per attivare le impostazioni per dispositivi mobili;

Impostazione delle imbottiture per dispositivi mobili

  • imposta il valore necessario per i tuoi paddings.

Importante

Se hai bisogno di paddings uguali per tutti e 4 i lati attorno all'elemento all'interno della struttura, impostalo da qui:

Imbottiture per cellulari_Un valore per tutti i lati

E questo valore verrà applicato a tutti e quattro i lati dell'elemento.

Se è necessario impostare valori diversi per ciascun lato, fai click sul pulsante "Altro".

Impostazione di valori di riempimento diversi per i dispositivi mobili

Per mostrarti come funziona, impostiamo i padding per la versione desktop della nostra email e non ne impostiamo per quella per dispositivi mobili.

Imbottiture tra elementi su dispositivi mobili

(Desktop, padding tra due immagini di fila e tra le righe)

Impostazione delle imbottiture per dispositivi mobili_Valore zero

(Dispositivi mobili, nessun padding)

6. Inversione degli elementi email per dispositivi mobili

Molto spesso potresti vedere il seguente ordine di schede prodotto nelle email.

Design reattivo dell'email_Ordine degli elementi dell'email sul desktop

Normalmente, gli email marketer lo usano per diversificare le loro email promozionali.

Sui dispositivi desktop, queste schede prodotto sono semplicemente fantastiche. Ma sugli schermi dei dispositivi mobili, non avranno un bell'aspetto e possono anche creare confusione in quanto l'elemento che si trova a sinistra sui dispositivi desktop, sugli schermi dei dispositivi mobili si sovrappone all'elemento che si trova a destra. E quindi, i destinatari vedono due descrizioni dei prodotti di fila, invece di un ordine più logico: snippet del prodotto, descrizione, pulsante CTA, snippet del prodotto, ecc.

In questo caso è necessario invertire l'ordine del contenitore per ogni seconda riga.

Come farlo con Stripo:

  • fai click sull'icona "Struttura" di una riga necessaria;

L'icona della struttura

  • nel pannello Impostazioni, attiva o disattiva il pulsante "inversione contenitori su dispositivi mobili".

Il pulsante di inversione dei contenitori

Questo è tutto.

Per mostrarti come funziona, abbiamo abilitato l'opzione "Inversione" per un'email e l'abbiamo disabilitata per l'altra.

L'opzione di inversione dei contenitori OFF

(Dispositivo mobile, opzione di inversione disattivata)

L'opzione di inversione su_Design e-mail ottimizzato per dispositivi mobili

(Dispositivo mobile, opzione di inversione attiva)

Questa immagine illustra che la descrizione va dopo lo snippet del prodotto per tutte le schede — esattamente l'ordine che volevamo vedere.

7. Immagini responsive

Quando si progetta un'email HTML responsive, la funzione più semplice che puoi utilizzare è "Immagine responsive"

Dopo aver attivato questa opzione, eviterai lo scorrimento orizzontale non necessario e i loghi enormi. 

Come farlo con Stripo:

Tieni presente che questa opzione è sempre attiva per impostazione predefinita. Quindi, se vuoi che la tua immagine si adatti alle dimensioni di uno schermo di un dispositivo mobile, non devi fare nulla. Oppure potresti semplicemente controllare se è davvero attiva. Ovviamente lo è ;)

Immagine reattiva_L'opzione è attiva

Se hai bisogno che la tua immagine, come ad esempio il logo o l'icona, rimanga piccola sugli schermi dei dispositivi mobili, dovresti disabilitare questa opzione.

Disattivazione dell'opzione Immagine reattiva per dispositivi mobili

Per mostrarti come funziona, abbiamo abilitato e disabilitato l'opzione "Immagine responsive" per lo stesso logo dell’email.

Opzione immagine reattiva OFF_Mobile Design

(L'opzione "Immagine responsive" è attiva)

Opzione immagine reattiva ON_Design ottimizzato per dispositivi mobili

(L'opzione "Immagine responsive" è disattivata)

8. ​​Attivazione/disabilitazione del design responsive dell’email

Tutti i modelli di email offerti da Stripo sono completamente responsive per impostazione predefinita.

Ma puoi disabilitare questa proprietà per un certo tuo modello di email. In realtà abbiamo introdotto questa opzione su richiesta degli utenti.

Se disattivi questa opzione, la tua email sui dispositivi mobili avrà lo stesso aspetto dei dispositivi desktop. Potrebbe esserci o meno lo scorrimento orizzontale e sicuramente se ci sono tre contenitori per riga in una versione desktop della tua email, gli utenti ne vedranno la stessa quantità sui dispositivi mobili.

Come farlo con Stripo:

Nota che per impostazione predefinita questa proprietà è sempre attiva.

  • nel pannello Impostazioni, vai alla scheda “Impostazioni generali”;

  • attiva o disattiva il pulsante "Design responsive" per disabilitare questa proprietà.

L'opzione di design reattivo

Per mostrarti come funziona, abbiamo abilitato e disabilitato l'opzione "Design responsive" per la stessa email.

L'opzione Responsive Design OFF_Creazione di e-mail ottimizzate per dispositivi mobili

(Dispositivi mobili, opzione "Design responsive" disattivata)

Responsive Design_Opzione ON_Stripo

(Dispositivi mobili, opzione "Immagine responsive" attiva)

Conclusioni

Come puoi vedere, non è necessaria alcuna skill di programmazione per creare un'email HTML completamente responsive. Sperimentalo tu stesso e fai in modo che anche i tuoi clienti possano sperimentare la nuova era del design delle email nei dispositivi mobili.

Crea email ottimizzate per dispositivi mobili per le tue future campagne

Potresti essere interessato a

indietro avanti
banner9
06 giugno · 15 minuti letti
I 10 migliori generatori di modelli di e-mail per il 2022

Tutti i generatori di modelli di e-mail vi sembrano uguali? Siete confusi su quale scegliere per le vostre campagne, vero? Non c'è da stupirsi, visto che ce ne sono così tanti. Faremo un'indagine sui generatori più popolari per trovare le loro caratteristiche distintive e aiutarvi a trovare il miglior creatore di e-mail HTML per le vostre esigenze attuali. Proverò a creare un modello in tutti questi editor con gli stessi file multimediali per vedere se tali realizzatori sono diversi l’uno...

Design Marketing Modelli
24 maggio · 18 minuti letti
I migliori caratteri per e-mail: suggerimenti e trucchetti per l'utilizzo

Una delle preoccupazioni maggiori durante il processo di realizzazione di una email è la scelta del carattere giusto. Dimensione, colore, forma, spaziatura... Conta tutto? Sì, ma una delle cose fondamentali è quella di scegliere un carattere leggibile. In questo post, ti mostreremo come scegliere il carattere più professionale per le tue email. Progettate email eleganti con Stripo in pochissimo tempo grazie ai nostri modelli precostituiti Sfoglia   Caratteri nelle e-mail HTML: regole generali da seguire Ci sono tre regole di...

Design Modelli
Greatest Examples of GIF animations in Emails_Cover Image
27 ottobre 2021 · 10 minuti letti
16 Ottimi Esempi di Animazione GIF nelle Email

Le GIF nelle email sono di grande utilità se si vuole mostrare il proprio prodotto, attirare l'attenzione degli utenti su determinati elementi o semplicemente decorare leggermente il tuo testo. In questo articolo, ti mostriamo alcuni dei migliori esempi di animazione gif nelle email. Esempi di Animazioni GIF nelle email Ecco una raccolta dei migliori esempi con GIF nelle email. Ogni GIF svolge la sua missione. 1. Adidas (Fonte: email da Adidas) Adidas ha utilizzato le animazioni nelle email per mostrare...

Design Marketing
08 aprile 2021 · 17 minuti letti
14 migliori esempi di design di firme e-mail

Una buona firma email ci aiuta a costruire il nostro business e a fare una buona impressione sui clienti. Poiché questo è l'ultimo elemento che le persone vedono nelle e-mail, dovremmo rendere le nostre firme personali creative e memorabili. Esaminiamo i migliori esempi di firma e-mail e il loro uso appropriato nelle e-mail e nei modelli di newsletter per email. Va detto che tutte le tipologie di aziende richiedono firme email professionali con informazioni di contatto dettagliate. Usa questo modello...

Design Marketing Modelli
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing