Imposta diversi stili di carattere per i dispositivi mobili per garantire leggibilità e appeal visivo:

• Usa una dimensione del carattere più piccola per adattare il contenuto su schermi più piccoli,
• Utilizza una famiglia di caratteri sicura per una migliore leggibilità e
• Regola il colore del carattere per garantire un buon contrasto in diverse condizioni di illuminazione o per le impostazioni della modalità scura.

Email su desktop	Email su dispositivi mobili

Per modificare la dimensione, il colore o la famiglia dei caratteri per i dispositivi mobili, dovrai impostare gli stili dei caratteri sia per i dispositivi mobili che per i desktop: 

1. Progetta l'email. 
2. Accedi alla modalità sviluppatore. 
3. Cerca il contenuto per il quale desideri modificare gli stili dei caratteri. Le impostazioni del contenuto si trovano appena sopra di esso nel codice. 
4. Copiati i codici corrispondenti al tipo di stile che desideri modificare sui dispositivi mobili: 
   • Carattere del testo: font-family: "font family name"
   • Dimensione del testo: font-size: SIZEpx
   • Colore del testo: color: "HEX" 
5. Sotto la stringa layout e il valore 320px, incolla i codici che hai copiato sopra per modificare gli stili dei caratteri per dispositivi mobili e sostituisci il loro valore con quello di cui hai bisogno:
   
   • font-family: 'font family name' dove nome famiglia di caratteri è il nome del carattere così come appare nell'elenco dei caratteri disponibili nell'editor. 
   • font-size: SIZEpx dove SIZE è la dimensione che vuoi dare ai tuoi contenuti in px. 
   • color: "HEX" dove HEX è il codice HEX corrispondente al colore che vuoi dare al tuo contenuto. 
     
6. From the content string, in our example 3 tips to practice safe yoga, remove any style, span, or class attributes between the single quotes '' to only keep your content.
   ➡️  Ad esempio

   Se la stringa di contenuto è: 

   content: "<h2 class="default-heading2"><span style="colore:#116b6b; ">Il nostro 3 consigli per praticare yoga 🧘 in sicurezza </span></h2>"

   Rimuovi qualsiasi attributo di stile o classe per mantenere solo i tuoi contenuti, ad esempio: 

   content: "I nostri 3 consigli per praticare yoga 🧘 in sicurezza"
7. Passa dalla modalità desktop  (⇧ + D) a quella mobile (⇧ + M) utilizzando le icone corrispondenti in alto a destra dell'editor di posta elettronica. Questo ti permetterà di assicurarti che gli stili dei tuoi caratteri cambino in base al tipo di dispositivo su cui vengono letti:
   
8. Se necessario, apportare altre modifiche in modalità sviluppatore.  
9. Clicca sull'icona a forma  di croce per chiudere la modalità sviluppatore.

Congratulazioni! Gli stili dei caratteri cambiano a seconda del dispositivo su cui vengono letti. 

Le annotazioni di Gmail consentono agli utenti di Gmail di visualizzare e interagire con le tue promozioni direttamente dalla loro Posta in arrivo facendo clic sull'immagine o sul testo annotato senza aprire l'email. Queste annotazioni consentono ai messaggi ricevuti nella scheda Promotions (Promozioni) di Gmail di distinguersi aggiungendo funzionalità come:

Per mostrare le annotazioni di Gmail al destinatario: 

1. Progetta l'email. 
2. Accedi alla modalità sviluppatore. 
3. Copia il codice dalla scheda sottostante corrispondente al tipo di annotazione che vuoi mostrare al tuo destinatario Gmail: 
   
   Annotazioni delle trattative Caroselli di prodotti Anteprima immagine singola

   Codice da copiare

   Valori da sostituire

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Facoltativo) DESCRIPTION è il testo che viene visualizzato con il badge della trattativa, ad esempio 20% di sconto.  (Facoltativo) DISCOUNT_CODE è il codice sconto o promozionale per l'offerta, ad esempio 20TODAY.  (Facoltativo) START_DATE_TIME è la data e l'ora di inizio dell'offerta in formato ISO 8601, ad esempio 2023-09-25T18:44:37-07:00. (Facoltativo) END_DATE_TIME è la data e l'ora di fine della promozione in formato ISO 8601, ad esempio 2023-09-25T18:44:37-07:00.

   ❗️ Importante

   Per ogni immagine nel tuo carosello di prodotti, aggiungi un tipo di PromotionCard. 

   Codice da copiare

   Valori da sostituire

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL è l'URL dell'immagine in formato PNG o JPEG, ad esempio https://www.example.com/image.png. Le proporzioni supportate sono 4:5, 1:1, 1,91:1. Per i caroselli di prodotti, ogni immagine deve avere un URL univoco e utilizzare le stesse proporzioni. PROMO_URL è l'URL della promozione. Quando gli utenti cliccano sull'immagine dalla scheda Promotions (Promozioni), visitano questo URL. (Facoltativo)HEADLINE è una descrizione di 1 o 2 righe della promozione visualizzata sotto l'immagine di anteprima. (Facoltativo) PRICE è il prezzo della promozione. (Facoltativo) PRICE_CURRENCY è la valuta del prezzo in formato ISO 4217 di 3 lettere, ad esempio USD. Determina il simbolo di valuta visualizzato con il prezzo. (Facoltativo) DISCOUNT_VALUE è l'importo sottratto dal prezzo per visualizzare un prezzo rettificato. Il prezzo rettificato viene visualizzato accanto al prezzo originale. Ad esempio, se discountValue è 25, il price è 100 e priceCurrency è USD, il prezzo rettificato viene visualizzato come $75. (Facoltativo) POSITION è la posizione della carta nel carosello.

   Codice da copiare

   Valori da sostituire

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL è l'URL dell'immagine in formato PNG o JPEG, ad esempio https://www.example.com/image.png. Le proporzioni supportate sono 4:5, 1:1, 1,91:1. Per i caroselli di prodotti, ogni immagine deve avere un URL univoco e utilizzare le stesse proporzioni. PROMO_URL è l'URL della promozione. Quando gli utenti cliccano sull'immagine dalla scheda Promotions (Promozioni), visitano questo URL. (Facoltativo) HEADLINE è una descrizione di 1 o 2 righe della promozione visualizzata sotto l'immagine di anteprima. (Facoltativo) PRICE è il prezzo della promozione. (Facoltativo) PRICE_CURRENCY è la valuta del prezzo in formato ISO 4217 di 3 lettere, ad esempio USD. Determina il simbolo di valuta visualizzato con il prezzo. (Facoltativo) DISCOUNT_VALUE è l'importo sottratto dal prezzo per visualizzare un prezzo rettificato. Il prezzo rettificato viene visualizzato accanto al prezzo originale. Ad esempio, se discountValue è 25, il price è 100 e priceCurrency è USD, il prezzo rettificato viene visualizzato come $75.

4. Nella parte superiore della modalità sviluppatore, sotto il valore dei caratteri e al primo livello, incolla il codice che hai copiato da una delle schede precedenti.
5. Se necessario, apportare altre modifiche in modalità sviluppatore.
6. Clicca sull'icona a forma di croce per chiudere la modalità sviluppatore.
7. (Facoltativo) inviato un'email di prova a un indirizzo email di prova utilizzando Gmail e con la scheda Promotions (Promozioni) attiva, per assicurarsi che l'annotazione di Gmail venga visualizzata correttamente.

In alternativa, puoi utilizzare il nostro editor HTML per visualizzare le annotazioni di Gmail. Per ulteriori informazioni, consulta la documentazione ufficiale di Meta. 

Cambiare il colore dei punti elenco o dei numeri può essere utile per enfatizzare i punti chiave, raggruppare le idee o abbinare il tuo marchio. Di seguito è riportato un esempio di come appare una lista colorata puntata: 

Per cambiare il colore della tua Lista puntata e numerata:

1. Crea un elenco di elementi con elenchi puntati o numeri. 
2. Accedi alla modalità sviluppatore. 
3. Cerca l'elenco che hai appena creato nella modalità sviluppatore e individua il valore content corrispondente. Le impostazioni del contenuto si trovano appena sopra di esso nel codice. 
4. Sotto il valore default, incolla il seguente codice dove HEX è il codice HEX corrispondente al colore che vuoi dare alla tua lista: color: '#HEX'
   
5. Controlla il design della tua email sulla destra dello schermo per vedere se la tua lista di articoli ha cambiato colore. I punti elenco o i numeri e il testo associato dovrebbero apparire nel colore che corrisponde al codice HEX che inserisci nella modalità sviluppatore. 
6. Se necessario, apporta altre modifiche in modalità sviluppatore. 
7. Clicca sull'icona a forma di croce per chiudere la modalità sviluppatore.
8. Per cambiare il colore del testo mantenendo il colore dei punti elenco o dei numeri:
   1. Seleziona il testo di cui vuoi cambiare il colore. 
   2. Dalla barra degli strumenti sopra il testo, clicca sull'icona del colore del carattere .
      
   3. Nel campo HEX, incolla il codice colore HEX che desideri assegnare al testo. Nel nostro esempio, #
      3B3F44. 

Congratulazioni! Hai cambiato il colore dei punti elenco o dei numeri. 

Gli spazi e i trattini unificatori garantiscono una formattazione corretta nei progetti di email, prevenendo interruzioni di riga indesiderate, come la suddivisione di un nome composto o del prezzo di un articolo, e mantenendo la leggibilità su tutti i dispositivi. Dai un'occhiata al nostro esempio qui sotto per capire l'importanza degli spazi unificatori e dei trattini:

Senza caratteri unificatori	Con caratteri unificatori

Per inserire spazi e trattini unificatori nel design della tua email: 

1. Progetta l'email. 
2. Accedi alla modalità sviluppatore. 
3. Cerca il contenuto a cui desideri aggiungere uno spazio unificatore o un trattino. Le impostazioni del contenuto si trovano appena sopra di esso nel codice. 
4. Copia il codice corrispondente al tipo di carattere unificatore che desideri includere:
   • Spazio unificatore:  
   • Trattino unificatore: ‑
5. Incolla il codice copiato sopra al posto dello spazio o del trattino che desideri rendere non divisibile.
   
6. Controlla il design della tua email sulla destra dello schermo per vedere se la tua lista di articoli ha cambiato colore. 
7. Se necessario, apporta altre modifiche in modalità sviluppatore. 
8. Clicca sull'icona a forma di croce per chiudere la modalità sviluppatore.

Congratulazioni! Hai aggiunto caratteri unificatori al design della tua email. 

Le versioni desktop di Outlook che utilizzano il motore di rendering di Microsoft Word hanno un supporto CSS limitato (ad esempio, Outlook 2007, 2010, 2013, 2016 e Office 365 per desktop). Le immagini di sfondo e la formattazione del testo spesso vengono visualizzate in modo errato, mostrando sfondi bianchi invece di immagini e testo disallineato a causa di una cattiva gestione di proprietà come background-image e line-height.

Per assicurarti che le immagini di sfondo e i blocchi di testo vengano visualizzati correttamente in Outlook, usa la soluzione alternativa seguente:

1. Progetta l'email. 
2. Recupera l'altezza, la dimensione in px dell'immagine di sfondo. Nel nostro esempio, 265px. 
3. Accedi alla modalità sviluppatore. 
4. Clicca sulla scheda corrispondente al problema di rendering che desideri risolvere:
   
   Immagine di sfondo Blocco di testo

   ❗️ Importante

   Questa soluzione alternativa funziona solo per le immagini di sfondo applicate alla larghezza del corpo, non alla larghezza intera e al di sotto di un valore grid-row. Tieni presente che un valore grid-row non deve contenere alcun pulsante.

   1. Cerca il valore grid-row corrispondente a dove viene visualizzata l'immagine di sfondo.
   2. Sotto il valore background-image valore, inserisci height: seguito dalla dimensione dell'altezza in px dell'immagine di sfondo. Nel nostro esempio, inseriremo in height: 265px.
      

   1. Cerca il contenuto per il quale desideri risolvere i problemi di visualizzazione. Cerca il valore line-height corrispondente al punto in cui viene visualizzato il testo. Se non c'è un valore line-height per questo contenuto, aggiungine uno.
   2. Sostituisci la dimensione predefinita del tuo valore line-height o inserisci una dimensione in px quanto è l'unico valore supportato del client email Outlook. Nel nostro esempio, inseriremo in 30px.
      
5. Se necessario, apporta altre modifiche in modalità sviluppatore. 
6. Clicca sull'icona a forma di croce per chiudere la modalità sviluppatore.
7. (Facoltativo) inviato un'email di prova a un indirizzo email di prova utilizzando una delle versioni di Outlook che non supportano le immagini di sfondo per assicurarsi che venga visualizzata correttamente.

Aggiungi testo alternativo alle icone dei social media nei design delle tue email per migliorare l'accessibilità per le persone ipovedenti che utilizzano gli screen reader, migliorare l'esperienza utente e garantire che il contesto sia chiaro se le immagini non vengono caricate.

Per aggiungere testo alternativo al design della tua email: 

1. Progetta la tua email e includi le icone dei tuoi social media.
2. Accedi alla modalità sviluppatore. 
3. Cerca i valori type: social-media. Dovrebbe essercene uno per ogni icona dei social media. Le impostazioni del contenuto si trovano appena sopra di esso nel codice. 
4. Sotto ogni valore type: social-media, cerca il valore alt: null.
5. Sostituisci null con il tuo testo alternativo. Nel nostro esempio, il testo alternativo dell'icona del nostro sito Web sarà il sito Web The Green Yoga e il testo alternativo dell'icona di Instagram sarà l'account Instagram. 
   
6. Se necessario, apportare altre modifiche in modalità sviluppatore.  
7. Clicca sull'icona a forma di croce per chiudere la modalità sviluppatore.
8. (Facoltativo) inviato un'email di prova per verificare che il tuo valore alt-text venga visualizzato correttamente per ciascuna delle tue icone multimediali.

Contrariamente a quanto potresti pensare, nella modalità sviluppatore, non puoi digitare direttamente il codice HTML. Devi invece usare YAML, che è una rappresentazione semplice per una struttura ad albero simile a JSON.

Con questo linguaggio, utilizzerai le definizioni astratte create dal nostro team per semplificare lo sviluppo dei modelli e garantire che il codice HTML generato e inviato ai clienti venga gestito dai nostri strumenti. Ciò assicura la migliore qualità possibile e un ampio supporto per i client email.

Come forse saprai, non tutti i client email sono uguali e può essere difficile creare newsletter dall'aspetto professionale che funzionino ovunque, anche sui telefoni cellulari e in Outlook.

Inoltre, si tratta di un lavoro in corso standard con la costante nascita di nuovi client email e via via che i vecchi client cambiano il modo in cui visualizzano le email.

Per questo motivo, stiamo lavorando duramente per assicurarci che le tue email funzionino come previsto ovunque e con il minimo sforzo da parte tua. Abbiamo creato una modalità astratta di alto livello per la definizione del tuo codice HTML, mentre ci occupiamo della magia dietro le quinte. 

Nel 99% dei casi d'uso, troverai raramente delle limitazioni con il nostro linguaggio per modelli, poiché siamo costantemente impegnati per aggiornarlo, ma è ovviamente possibile che si verifichi qualche piccolo problema o che manchino alcune funzionalità specifiche del client che non avevamo previsto. Questo apre un nuovo mondo di possibilità oltre a ciò che offriamo nell'interfaccia. Scopri i nostri casi d'uso più frequenti in modalità sviluppatore per la personalizzazione avanzata delle email!