Come creare email HTML

La creazione di email HTML non è così difficile come sembra. Non è necessario essere uno sviluppatore e non è necessario sapere come programmare.

Se hai mai utilizzato un editor e-mail WYSIWYG (What You See Is What You Get), hai già creato un'e-mail HTML. Ciascuno dei moduli trascinati e rilasciati è costituito da HTML e CSS in linea, che definiscono l'aspetto e il comportamento dei diversi elementi di posta elettronica.

Quindi, se la maggior parte degli editor di posta elettronica ti consente di progettare con strumenti di trascinamento della selezione, perché è necessario conoscere l'HTML per creare e-mail?

Buona domanda.

Sebbene la maggior parte degli editor di posta elettronica ti dia un discreto controllo all'interno dei moduli, non sarai in grado di modificare ogni aspetto essenziale della tua e-mail. Probabilmente avrai bisogno di HTML per modificare cose come:

• Dimensione del font
• Testo alternativo
• frontiere
• margini
• Imbottitura
• Dimensione dell'immagine
• Colori

Hai usato l'editor di posta elettronica di Twilio SendGrid ? Ti consente di creare e-mail con una combinazione di moduli drag-and-drop e modifica HTML. Una potenza combinata del genere ti dà il controllo completo sull'aspetto delle tue e-mail, garantendo un'esperienza del marchio coerente e di prim'ordine in ogni messaggio.

Fortunatamente, la codifica di un'e-mail HTML non è troppo complicata. Di seguito, ti forniremo i suggerimenti e il know-how sulla struttura delle e-mail di cui hai bisogno per creare e-mail migliori.

5 suggerimenti per la codifica di un'e-mail HTML

La codifica di un'e-mail HTML è relativamente semplice, ma i client di posta elettronica e le caselle di posta possono essere complicati. Segui queste best practice per assicurarti che i tuoi messaggi abbiano un bell'aspetto, indipendentemente dal client, dal browser o dal dispositivo dei destinatari.

1. Rendi le tue e-mail reattive

I destinatari aprono i messaggi di posta elettronica su vari sistemi operativi, dispositivi, dimensioni dello schermo, browser e applicazioni di posta elettronica. Ognuno di questi fattori renderà la tua e-mail in modo diverso, quindi è tuo compito assicurarti che la tua e-mail sia reattiva e funzioni come previsto nella maggior parte delle caselle di posta.

Puoi trovare molti modelli di e-mail reattivi, ma l'attività è un po' più complicata quando codifichi un'e-mail HTML da zero. Ecco alcune cose che ti aiuteranno a rendere le tue email più reattive:

• Includi media query: le media query ti consentono di adattare i tuoi modelli di email a diversi dispositivi.
• Usa una singola colonna: potrebbe essere facile leggere e-mail a 2 colonne su un desktop, ma può diventare un po' densi sui dispositivi mobili.
• Aumenta la dimensione del carattere: non andare più piccolo di un carattere a 13 o 14 punti.
• Distanzia i tuoi collegamenti: non vuoi che i lettori facciano accidentalmente clic sul collegamento sbagliato perché i tuoi collegamenti erano troppo vicini tra loro.
• Aggiungi tag alt: i tag alt descrivono le tue immagini nel caso in cui le immagini non vengano caricate.

2. Aggiungi le immagini con parsimonia

Le immagini sono ottime aggiunte alle tue campagne e-mail, ma fai attenzione a non esagerare con esse. Troppe immagini possono allungare i tempi di caricamento e rendere difficile il rendering delle e-mail.

Usa immagini più piccole che si caricheranno più velocemente e non occuperanno l'intero schermo. Inoltre, aggiungi elementi di dimensionamento reattivi come "larghezza" e "larghezza massima" per assicurarti che le tue immagini vengano caricate correttamente su ogni dispositivo e client di posta elettronica.

3. Mantieni la semplicità

Ricorda lo scopo della tua email. Molti designer di e-mail si perdono nell'arte e nella creatività, dimenticando l'obiettivo generale dell'e-mail, che non è guadagnare ooh e aah.

Innanzitutto, vuoi che le persone aprano le tue e-mail. Successivamente, vuoi che facciano clic e agiscano. Potrebbe essere visitare il tuo sito Web, leggere un post sul blog, effettuare un acquisto o iscriversi a un evento.

Mantieni le cose semplici. Fornisci valore ai tuoi destinatari, attirali con i contenuti e poi guidali verso il tuo invito all'azione. Questo è tutto. Il più delle volte, tutto il resto è lanugine.

Quando aggiungi diversi elementi HTML alla tua email, poniti la domanda: "Questo aiuta l'email a raggiungere il suo scopo?" In caso contrario, eliminalo dal design della tua email.

4. Usa modelli di email predefiniti

Puoi trovare modelli di email HTML predefiniti con tutto il necessario per inviare una campagna eccezionale. I modelli hanno già svolto il duro lavoro per creare un design di posta elettronica di bell'aspetto e reattivo.

Se ti piace un modello di email ma non sei soddisfatto al 100%, puoi spesso scaricare l'HTML e apportare le modifiche che desideri. Questo può essere un eccellente metodo di modifica delle e-mail per chi non conosce l'HTML.

5. Metti alla prova le tue email

Non inviare mai un'e-mail senza prima testarla. Il modo tradizionale per farlo sarebbe inviare un'e-mail di prova a vari indirizzi e-mail (tra i client di posta elettronica) e provare ad aprirla su dispositivi diversi. Se suona come un sacco di tempo perso e mal di testa, hai ragione.

Fortunatamente, c'è un modo migliore in questi giorni.

Lo strumento di test e-mail di Twilio SendGrid è integrato con il tuo editor di progettazione, aiutandoti a risolvere i problemi da una singola applicazione. Ti aiuterà a vedere come viene visualizzata la tua email su client, browser e dispositivi. Ad esempio, puoi vedere come apparirà la tua posta su un dispositivo mobile utilizzando Gmail e un desktop utilizzando Outlook.

Gli strumenti di test delle e-mail possono anche aiutarti a trovare collegamenti e pulsanti interrotti, contenuti che sembrano spam e problemi di formattazione.

Struttura dell'e-mail HTML

Le email HTML hanno una struttura semplice:

• DOCTYPE
• Intestazione
• Corpo

DOCTYPE

Usa <!DOCTYPE> per dire al browser cosa aspettarsi, in questo caso si tratterebbe di un'e-mail HTML.

Intestazione

Usa la sezione dell'intestazione per includere elementi come lo stile, il dimensionamento e il meta testo.

Corpo

Usa il corpo per gli elementi visivi della tua email, come testo, immagini, tabelle, collegamenti e simili.

Modello di email con codice HTML

Ecco un esempio di un modello di email con codice HTML. Puoi visualizzare il rendering di questo modello di email di newsletter di viaggio su desktop, tablet e dispositivi mobili.

Ti piace quello che vedi? Fai clic su "Scarica modello" e ti invieremo una copia del codice HTML nella tua casella di posta. Puoi quindi copiare/incollare il codice nel tuo editor di progettazione e-mail per importare il modello e adattarlo al tuo marchio e alla tua campagna.

Dai un'occhiata agli altri modelli di email di Twilio SendGrid

Vuoi più modelli di email? Fortunatamente per te, ne abbiamo una galleria piena . Che tu abbia bisogno di una newsletter, di un modello per la reimpostazione della password o di un promemoria per un appuntamento, la nostra galleria di modelli gratuita ha tutto.

Inoltre, questi design sono reattivi, assicurando che la tua e-mail abbia un bell'aspetto su client, browser e dispositivi. Oh, e abbiamo già detto che i modelli sono gratuiti?

Inizia oggi stesso a creare e-mail HTML migliori con un modello predefinito.