Quando si crea un'e-mail mediante uno strumento di trascinamento della selezione o basato su modulo, si sta effettivamente generando un messaggio di posta elettronica HTML.
Esistono due tipi principali di email che è possibile inviare e ricevere: email di testo semplice (questi sono esattamente come suonano – qualsiasi email che contiene solo vecchio testo senza formattazione) e Email HTML, che sono formattati e stilizzati usando HTML e CSS in linea.
Le e-mail in formato HTML sono facili da individuare: la maggior parte delle e-mail di marketing multimediali nella posta in arrivo sono email HTML.
Per il contesto, ecco un confronto visivo di un'e-mail di testo semplice e di un'e-mail HTML di base:
Come marketer, hai probabilmente scoperto che ci sono diversi vantaggi per ogni tipo. Le email HTML non sono intrinsecamente meglio di e-mail di testo semplice, e in diverse situazioni, entrambi i tipi possono essere parte di un programma di e-mail di successo.
In questo articolo, vedremo come iniziare a creare email HTML, indipendentemente dal livello di esperienza e dal comfort con la codifica, e alcuni modelli gratuiti che è possibile utilizzare per iniziare. Tuffiamoci dentro
Come creare un messaggio HTML
Ci sono buone notizie se non sei un esperto HTML: la maggior parte degli strumenti che creano e inviano email (come HubSpot) offriranno modelli HTML pre-formattati e pronti all'uso che ti consentono di progettare e-mail senza dover mai accedere al codice effettivo sul back-end.
Quando apporti modifiche all'editor email, tali modifiche verranno automaticamente codificate nel prodotto finale. Gli strumenti di creazione di email come questa sono un'opzione ideale se non si dispone di un designer di e-mail nel proprio team, ma si desidera comunque inviare e-mail di marketing dall'aspetto professionale. Puoi controllare la nostra lista completa di strumenti di newsletter via email qui per trovare quello che è giusto per le tue esigenze specifiche.
Se sei a tuo agio con l'HTML e desideri un controllo più diretto sul codice delle tue e-mail, la maggior parte degli strumenti di e-mail ti consentirà di importare file HTML direttamente da utilizzare come modelli di e-mail personalizzati. Sul Web sono disponibili una vasta gamma di modelli di email HTML gratuiti (alcuni dei quali li condivideremo di seguito), e se sai come orientare un file HTML, di solito è abbastanza semplice adattare il modello allo strumento di creazione di email di la tua scelta.
Per creare una e-mail HTML completamente da zero, è necessario avere una conoscenza avanzata dell'HTML (o lavorare con uno sviluppatore che lo fa). Questa guida offre una solida panoramica sulla codifica di una email HTML di base. Poiché il processo di creazione di una e-mail HTML da zero può essere abbastanza complicato, ti consigliamo di lavorare con uno sviluppatore o di utilizzare un modello di e-mail HTML pre-creato.
Sviluppare un'e-mail HTML specifica per HubSpot?
Se stai sviluppando un modello di email HTML specifico per l'uso in HubSpot, assicurati di includere i token HubL necessari (in questo modo le tue e-mail possono essere personalizzate e conformi alle leggi CAN-SPAM). Qui puoi trovare una guida completa per la codifica di modelli di email HTML specifici per HubSpot. Oppure, in alternativa, usa semplicemente il nostro semplice editor di e-mail "what-you-see-is-what-you-get".
Best practice per l'email HTML
Ora che hai compreso le nozioni di base su ciò che accade nello sviluppo di un'email HTML, esaminiamo alcune importanti best practice che dovresti tenere a mente. Indipendentemente dal metodo che intendi utilizzare per creare email HTML, queste best practice ti aiuteranno a migliorare la progettazione, l'esperienza utente e la deliverability delle tue email.
1. Assicurati che il tuo indirizzo email HTML risponda a diverse dimensioni e dispositivi dello schermo.
Come spiega Chad S. White, il modo in cui la tua email appare nella posta in arrivo di un utente è complesso e dipende da un'ampia varietà di fattori diversi – il che può rendere la codifica di un'e-mail ancora più difficile e complicata della codifica di una pagina web.
"Una campagna di stampa ha un rendering: il rendering del sito Web è molto più complesso, poiché i siti possono essere diversi a seconda del sistema operativo, del browser e delle dimensioni dello schermo del dispositivo, ma anche questo non è all'altezza della complessità del rendering delle e-mail". – Chad S. White, Perché il rendering delle email è così complesso?
Uno dei fattori più grandi e più evidenti che può influire sul modo in cui una e-mail viene caricata all'interno di un client di posta elettronica è la dimensione dello schermo del dispositivo su cui viene visualizzata. Un'e-mail che sembra incredibile e ben formattata su un desktop può facilmente trasformarsi in un groviglio di testo e immagini illeggibili e sovrapposti quando visualizzati sullo schermo dello smartphone.
Per garantire che le tue e-mail in formato HTML abbiano l'aspetto che intendi per un ampio spettro di dimensioni dello schermo, la cosa migliore che puoi fare è mantenere il tuo layout semplice e diretto. Quando inizi ad aggiungere elementi più complessi come più colonne e immagini fluttuanti, diventa più difficile tradurre il formato della tua email per diverse dimensioni dello schermo.
Se decidi di sviluppare un layout più complesso, assicurati di risolvere attivamente il modo in cui gli elementi verranno riorganizzati per adattarsi alle diverse dimensioni dello schermo. Ad esempio, se la tua e-mail viene visualizzata come multi-colonna sul desktop, quella stessa struttura non volerà sui dispositivi mobili: dovrai utilizzare le query multimediali per definire in che modo gli elementi verranno visualizzati su diverse dimensioni dello schermo.
Ricorda, lo sviluppo di e-mail in HTML veramente reattive va oltre la struttura e il formato del tuo messaggio. Pensa a come l'esperienza utente complessiva della tua email verrà percepita su dispositivi diversi. Assicurati che le tue scelte di carattere siano leggibili sia sui dispositivi mobili che sul desktop e utilizzi pulsanti o CTA ottimizzati per i dispositivi mobili al posto del testo con collegamento ipertestuale (hai mai provato a toccare una piccola riga di testo con collegamento ipertestuale sul dispositivo mobile? ).
Puoi trovare la nostra guida più approfondita sulle migliori pratiche di email mobile qui.
2. Assicurati che il tuo stile funzioni in diversi client di posta elettronica.
Un altro grande fattore che influisce pesantemente sul modo in cui le email HTML vengono visualizzate nella posta in arrivo dei tuoi iscritti è il client di posta elettronica che stanno utilizzando per aprire il messaggio. Ogni client di posta elettronica carica le email in modo leggermente diverso, quindi un'e-mail che sembra in un certo modo in Gmail avrà probabilmente un aspetto diverso in Outlook.
Fortunatamente, se sai come i client di posta più popolari caricano particolari elementi HTML e CSS, puoi creare un'esperienza abbastanza coerente tra le diverse caselle di posta degli utenti. Si tratta di sapere quali tag non supportati da evitare e adattare di conseguenza. Questa guida completa spiega come 11 dei client di posta elettronica più diffusi (inclusi Gmail e versioni multiple di Outlook) supportano e rendono diversi elementi di stile.
Puoi anche consultare un articolo che abbiamo scritto sull'ottimizzazione delle email per diversi client di posta elettronica qui.
3. Siate consapevoli di quanto tempo le vostre e-mail HTML devono essere caricate.
Quanto tempo impiega la tua e-mail a caricare potrebbe essere la differenza tra guadagnare un nuovo cliente e perdere un abbonato frustrato. Mentre può essere allettante sfruttare tutte le diverse opzioni di stile e opportunità per incorporare elementi visivi che le e-mail in formato HTML offrono, alla fine della giornata, niente di tutto ciò conta se la tua e-mail impiega troppo tempo per essere caricata.
Mentre progetti la tua email HTML, tieni presente quanto tempo impiegherà la tua posta per caricare, specialmente se qualcuno sta dicendo, aprendo il tuo messaggio nella loro metropolitana mattutina con una connessione dati debole. Ecco alcuni piccoli passi che puoi fare per migliorare il tempo di caricamento.
– Usa le immagini con parsimonia per rafforzare il messaggio che vuoi trasmettere agli abbonati e utilizzare sempre un compressore di immagine (come Compressor.io o Toolur) per ridurre il più possibile le dimensioni del file. La maggior parte dei compressori di immagini può ridurre in modo significativo la dimensione del file di un'immagine senza compromettere la qualità, quindi fare questo passaggio in più non danneggerà l'integrità visiva della tua e-mail.
– Usa caratteri web standard. I caratteri personalizzati sono ottimi per dare risalto a una pagina di destinazione, ma possono aggiungere un livello estraneo di complessità quando vengono aggiunti a un'e-mail. Come abbiamo detto sopra, tutti i client di posta gestiscono gli elementi di stile in modo diverso, e ciò si estende in particolare ai caratteri. Per sicurezza, utilizza caratteri web standard e verifica che il client di posta elettronica utilizzato dalla maggior parte dei tuoi iscritti supporti un determinato tipo di carattere.
– Prova un minificatore HTML. Un minificatore HTML (come minifycode.com e smallseotools.com) rimuove automaticamente il codice che non è necessario in un file HTML. Gli elementi aggiuntivi ripetitivi verranno eliminati, ma il rendering effettivo della tua e-mail dovrebbe rimanere lo stesso (provalo sempre!). Ogni carattere nel codice influisce sulla durata del caricamento di una e-mail, pertanto il tempo necessario per rimuovere caratteri aggiuntivi può avere un effetto positivo sul tempo di caricamento.
– Mantieni il tuo messaggio focalizzato su un unico obiettivo. Il modo migliore per ridurre il tempo di caricamento dell'email è ridurre la quantità di contenuti che aggiungi a ciascuna email inviata. Potrebbe sembrare ovvio, ma troppi marketer cercano di inserire troppi contenuti nelle loro e-mail. Ciò non solo porta a un'esperienza utente off-off (nessuno vuole leggere un romanzo in formato email), ma può inviare il tempo di caricamento dai grafici e indurre gli utenti ad abbandonare la tua email. Mantieni la semplicità e i tuoi utenti ti ringrazieranno.
4. Pianificare (il più possibile) per le incongruenze di fine utente.
Le dimensioni dello schermo e il client di posta elettronica non sono gli unici fattori che possono alterare il modo in cui il tuo messaggio di posta elettronica HTML viene visualizzato nella posta in arrivo dei tuoi iscritti (no, sarebbe troppo facile, vero?). Elementi come la versione del loro client di posta elettronica, il loro sistema operativo, le loro impostazioni uniche sul lato utente, il loro software di sicurezza e se caricano o meno automaticamente le immagini possono avere un impatto su come viene caricata la tua email.
Come probabilmente si può indovinare da quella lista pesante di fattori, provare a risolverli tutti (ogni volta che si invia una e-mail) sarebbe probabilmente sufficiente per farvi lanciare il computer attraverso la stanza. Ma non devi essere completamente indifeso di fronte a queste variabili – devi solo fare un po 'di pre-pianificazione.
– Prendi in considerazione la possibilità di creare una versione della tua pagina web. Questo è un po 'come dare alla tua email un pulsante sicuro. Se per qualche ragione – a causa di uno dei tanti fattori discussi sopra – la tua email disegnata con cura rende come un disastro assoluto quando un abbonato lo apre, avrà almeno la possibilità di fare clic su "Visualizza come pagina web" e vedere il email come volevi che fosse. Dal momento che gli elementi di stile rendono molto più coerentemente tra browser web e client di posta, sarai in grado di avere molto più controllo sulla versione della pagina web del tuo messaggio. In HubSpot, c'è un'opzione che puoi attivare che genererà automaticamente una versione della pagina web.
– Dovresti anche aggiungere una versione di testo in chiaro della tua email. Una versione in testo semplice è esattamente come sembra – una versione alternativa dell'email HTML che esegue il rendering in testo completamente semplice. L'aggiunta di una versione di testo in chiaro dell'email HTML è importante perché alcuni client e-mail e impostazioni utente non possono (o non vogliono) caricare HTML. Se questo è il caso, il client cercherà una versione alternativa di testo in chiaro dell'email HTML da caricare per l'utente. Se uno non esiste, potrebbe segnalare al server e-mail del destinatario che il messaggio è spam o potenzialmente pericoloso.
La maggior parte degli strumenti di posta elettronica come HubSpot fornirà automaticamente una versione in chiaro che viene visualizzata se il server di posta elettronica di un destinatario lo richiede, ma se si sta codificando una e-mail HTML da zero, sarà necessario creare qualcosa chiamato messaggio MIME multipart.
Un messaggio MIME multipart è una email che contiene sia un testo semplice sia una versione HTML della stessa email. Se il client e-mail o il sistema di sicurezza di un destinatario non consente l'invio di e-mail HTML, verrà visualizzata la versione in testo semplice. Questo è un processo che richiede una conoscenza avanzata della codifica, quindi consigliamo di lavorare con uno sviluppatore.
– Assicurati che la tua e-mail abbia ancora senso se le immagini, per qualsiasi motivo, non vengono caricate. Alcuni utenti hanno il caricamento automatico delle immagini disattivato, il che significa che vedranno la tua e-mail senza immagini quando la apriranno. Per questo motivo, non affidarti interamente alle immagini per ottenere il significato del tuo messaggio e aggiungi sempre il testo alternativo alle immagini che includi. Il testo alternativo verrà caricato anche quando le immagini non lo fanno, così i tuoi iscritti possono avere l'idea generale di ciò che include la grafica.
5. Effettuare test approfonditi.
Infine, dovrai testare l'email HTML in ogni fase dello sviluppo per assicurarti che funzioni su diversi client di posta elettronica, sistemi operativi e tipi di dispositivi. Non aspettare fino alla fine del processo per testare la tua posta elettronica: testare mentre lavori è il modo migliore per individuare le incoerenze tra diversi client di posta elettronica e assicurarti di creare l'esperienza più coerente possibile per i tuoi destinatari.
Alcuni strumenti di posta elettronica (come HubSpot) offrono test in-app all'interno dei loro costruttori di e-mail per semplificare il processo. Se stai lavorando da zero, puoi utilizzare uno strumento come HTML Email Check o PreviewMyEmail per avere un'idea migliore di come apparirà la tua email in diversi client e dispositivi di posta elettronica.
Modelli di email HTML gratuiti
Ci sono una quantità enorme di modelli di email HTML disponibili sul Web e variano in termini di qualità, reattività e prezzo. Abbiamo riunito una selezione di modelli di email HTML gratuiti che forniscono un'esperienza utente reattiva. Assicurati di leggere i termini e le condizioni su ogni singolo modello prima dell'uso.
1. Modello di email HTML di materiale libero
Questo modello moderno del designer Paul Goddard è sofisticato e minimalista. La tavolozza dei colori brillante e accattivante e il design semplice lo rendono un'opzione versatile per molti settori e scopi diversi ed è stato testato su 33 noti client e dispositivi di posta elettronica per garantire un'esperienza utente coerente su piattaforme diverse.
2. Modello di newsletter HTML gratuito
Questo modello pulito e in sordina di Mailto è un ottimo modo per visualizzare i contenuti creati dal tuo team e connettere gli iscritti con i tuoi prodotti o post più recenti. Il design presenta due colonne completamente reattive con più opzioni di combinazioni di colori e spazio nella parte superiore per evidenziare il logo della tua azienda.
3. Modello email HTML gratuito per MINImalist
Prova che a volte meno è davvero di più, questo design semplice e completamente reattivo sfrutta al massimo lo spazio bianco e mantiene l'attenzione saldamente sulle tue parole e elementi visivi. Senza distrazioni di design, i tuoi contenuti possono davvero brillare – su qualsiasi dispositivo.
4. Modelli email HTML reattivi gratuiti ZURB
Se stai cercando un modello di email HTML con più spazio per la personalizzazione, i modelli di email reattivi di ZURB sono un ottimo punto di partenza. Con questi modelli HTML di base come punto di partenza, puoi essere sicuro che i modelli che disegni saranno pienamente reattivi su qualsiasi dispositivo.
5. Modelli di email HTML reattivi gratuiti da Dyspatch
Questa raccolta di modelli open source completamente gratuiti è completamente reattiva e testata su client di posta elettronica popolari. Poiché sono open source, puoi modificarli e costruirli su misura per te.
Si tratta di un'opzione ideale se si desidera un ambiente di partenza più elegante e stilizzato, ma si desidera comunque poter personalizzare il design in base alle esigenze della propria azienda. Ogni modello è disponibile in più formati per diversi scopi di marketing, come le e-mail transazionali, la raccolta NPS e il re-ingaggio del sottoscrittore della posta elettronica.
6. SliceJack modello di email HTML gratuito
Questo design elegante e reattivo di SliceJack sarebbe perfetto per inviare il tuo portfolio di design via email, ma pensiamo che potrebbe anche essere un modo elegante per mostrare i tuoi ultimi prodotti agli abbonati via email.
