Come creare un'e-mail in HTML - 7 consigli per il successo

11 aprile 2022
8

Ogni volta che si legge qualcosa su uno schermo, c'è molto di più di quello che si vede.

Ogni stringa di testo (compresa quella che state leggendo ora) ha una sorta di codice sotto di sé. Lo stesso vale per le e-mail, anche quelle più semplici.

Esistono due tipi di e-mail: quelle in testo normale e quelle in HTML. Mentre il testo normale è efficace, le e-mail in HTML offrono un mondo di opzioni per la personalizzazione. Oggi vi mostreremo dei consigli pratici per creare le vostre e-mail in HTML, senza dover iniziare un corso di programmazione.

Come creare un'e-mail HMTL

Sarete felici di sapere che non è necessario essere dei codificatori per creare un'e-mail HTML. Proprio come per la costruzione di un sito web, oggi ci sono molte soluzioni responsive per le e-mail. Costruttori di modelli di email html disponibili che offrono semplici modelli di e-mail HTML preformattati e pronti per la personalizzazione, consentendovi di progettare e-mail HTML di grande qualità senza dover entrare nel codice sul lato posteriore.

​​Un esempio di codice HTML in un'e-mail.

Un esempio di codice HTML in un'e-mail. Fonte

Tutto ciò che dovete fare è apportare le modifiche che desiderate al modello di e-mail utilizzando l'editor di e-mail, che alla fine codifica le modifiche nel prodotto finale.

Se non avete un designer di e-mail nel vostro team e non siete dei codificatori, ma volete comunque creare e inviare un'e-mail elegante e professionale, gli strumenti di creazione di e-mail possono essere un'opzione ideale da considerare.

Creare e inviare un'e-mail HTML da zero

Se conoscete l'HTML e volete avere un controllo più diretto sul codice delle vostre email, allora molti strumenti di posta elettronica consentono inoltre di modificare direttamente importanti file HTML che possono essere utilizzati come modelli di e-mail HTML personalizzati.

In rete sono disponibili molti modelli di email HTML gratuiti da utilizzare. Se si conosce bene un file HTML, adattare il modello di e-mail HTML allo strumento di creazione di e-mail che si utilizza è spesso un processo semplice e diretto.

Lavorare con uno sviluppatore

Se volete creare un'e-mail in HTML interamente da zero, senza utilizzare alcun modello, dovrete avere conoscenze e competenze avanzate di HTML o essere in grado di lavorare con uno sviluppatore che conosca il codice delle e-mail.

Poiché il processo di creazione di un'e-mail HTML da zero è piuttosto complesso, è una buona idea lavorare con uno sviluppatore se non si hanno le competenze avanzate necessarie. In alternativa, se si vuole fare il fai-da-te, una email responsive preconfezionata modello di e-mail è di solito un'opzione migliore.

Come creare un'e-mail in HTML - 8 buone pratiche da considerare

Ora che avete un'idea più precisa delle nozioni di base che riguardano la creazione di e-mail HTML, è bene conoscere alcune delle principali strategie da tenere a mente.

Indipendentemente dal metodo che intendete utilizzare per la creazione delle vostre email HTML, queste best practice vi permetteranno di migliorare effetti di testo, l'esperienza del lettore e l'e-mail consegnabilità.

Assicurarsi che il codice HTML delle e-mail sia reattivo

Il modo in cui la vostra e-mail apparirà nella casella di posta dell'utente dipenderà da molti fattori diversi. Uno dei fattori principali è la dimensione dello schermo dei dispositivi mobili su cui viene visualizzata la stessa e-mail. Se volete che la vostra campagne e-mail per avere successo, gli elementi visivi devono avere lo stesso aspetto e la stessa sensazione su diversi dispositivi.

Le e-mail responsive sono perfette su ogni dispositivo.

email reattive su mobile e desktop

Fonte

Ed è importante tenerlo a mente perché non importa quanto ben formattato e sorprendente possa sembrare sul vostro desktop quando lo state progettando, potrebbe facilmente diventare un enorme casino quando qualcuno cerca di vederlo su uno schermo molto più piccolo di uno smartphone.

La cosa migliore da fare è assicurarsi che il tuo layout sia semplice e diretto; questo ti aiuterà a fare in modo che le tue email HTML appaiano come sono destinate ad essere viste su una varietà di dimensioni diverse dello schermo.

Elementi complessi come immagini fluttuanti o colonne multiple renderanno più difficile la traduzione del formato della vostra email per diverse dimensioni dello schermo. Assicuratevi di risolvere attivamente come gli elementi saranno riorganizzati per le diverse dimensioni dello schermo se decidete di aggiungere elementi più complessi al layout.

Assicuratevi che l'HTML nel corpo dell'e-mail funzioni per più client di posta elettronica.

Il client di posta elettronica che l'abbonato utilizza per aprire il messaggio è un altro fattore principale che ha un enorme impatto sul modo in cui l'email HTML viene visualizzata nella casella di posta degli abbonati.

Ogni client di posta elettronica carica il formato dei messaggi in modo leggermente diverso, quindi tenete presente che un'e-mail che appare in un certo modo in Outlook potrebbe apparire diversa in Gmail, ad esempio. Per questo motivo, è una buona idea acquisire familiarità con il modo in cui i principali client di posta elettronica caricano alcuni elementi HTML e CSS.

Una volta che sapete questo, sarete in una posizione migliore per creare un'esperienza più coerente attraverso diverse caselle di posta.

Pianificare le incongruenze degli utenti finali

La dimensione dello schermo e il client di posta elettronica non sono gli unici due fattori che possono avere un impatto sul modo in cui l'email HTML appare nella casella di posta dei tuoi abbonati.

Ci sono vari elementi tra cui la versione del client di posta elettronica che stanno usando, il loro software di sicurezza, il sistema operativo, le impostazioni uniche dell'utente, e se stanno caricando le immagini automaticamente o meno, tutto ciò avrà un effetto su come la tua e-mail si carica.

Mentre potrebbe non essere possibile risolvere completamente ogni potenziale problema ogni volta che si invia un'e-mail, un po' di pianificazione preliminare può andare molto lontano quando si tratta di prepararsi per le incongruenze degli utenti.

Ad esempio, si potrebbe voler creare una versione in testo semplice o una versione in pagina web di un file e-mail transazionale che gli utenti possono facilmente cliccare per leggere se l'e-mail HTML inviata non viene visualizzata bene per qualsiasi motivo.

Come codificare con successo un'e-mail in HTML con i test

Assicuratevi di testare le vostre e-mail HTML in ogni fase dello sviluppo. Questo vi aiuterà ad assicurarvi che funzionino bene su vari client di posta elettronica, diversi dispositivi e sistemi operativi.

Non aspettare la fine del processo per testare finalmente la tua email. I test man mano che vai avanti ti aiuteranno a individuare rapidamente qualsiasi incongruenza tra i dispositivi e i client di posta elettronica, rendendo più facile per te creare un'esperienza coerente.

Potete farlo facilmente utilizzando gli strumenti per le e-mail che offrono test in-app, oppure uno strumento separato se create e-mail HTML da zero.

Assicuratevi che l'e-mail si carichi rapidamente

Infine, è importante ricordare che il tempo di caricamento delle e-mail può fare la differenza tra la perdita di un abbonato o l'acquisizione di un nuovo client e-mail.

Sebbene possa essere allettante utilizzare tutte le diverse opzioni di stile e le immagini che si possono includere in un'e-mail HTML, è bene ricordare che tutto ciò sarà inutile se l'e-mail impiegherà molto tempo a caricarsi ed è meglio risparmiare quel tempo extra.

Durante la creazione del design della vostra e-mail, è importante tenere conto del tempo di caricamento della vostra e-mail. Questo vale soprattutto se si prevede di inviarla a utenti che potrebbero aprirla senza molto tempo a disposizione. Alcuni degli aspetti principali da considerare quando si tratta di migliorare il tempo di caricamento delle e-mail sono:

Ridurre al minimo le immagini

Mentre le immagini possono essere utili nelle e-mailMa esagerare nel corpo dell'email può avere l'effetto opposto sul design e sulla leggibilità dell'email.

Non solo un'email che usa meno immagini vi darà una migliore possibilità di avere un impatto con il messaggio che state trasmettendo ai vostri abbonati, ma renderà anche l'email più facile da caricare più velocemente.

È inoltre possibile utilizzare uno strumento di compressione delle dimensioni delle immagini per ridurre il più possibile le dimensioni del file e avere un formato di e-mail più pulito.

In alternativa, includete una versione in testo semplice dell'e-mail nelle vostre campagne di e-mail marketing, in modo che i lettori possano scegliere.

Utilizzare un minificatore HTML

Un minificatore HTML è uno strumento di progettazione di e-mail che può essere utilizzato per rimuovere qualsiasi codice non necessario da un file HMTL. Eliminerà tutti gli elementi ripetitivi o aggiuntivi, mantenendo inalterata la resa effettiva dell'e-mail.

Questo può aiutare a ridurre il tempo di caricamento, poiché ogni riga di codice ha un impatto sul tempo di caricamento dell'e-mail. È possibile mantenere lo stesso (o simile) design dell'e-mail, ma caricarla più velocemente e con un aspetto migliore.

Utilizzare i font web

Anche se i font personalizzati possono avere un bell'aspetto, è importante fare attenzione quando li si usa in un'email, perché possono aggiungere più complessità che potrebbe alla fine allungare il tempo di caricamento dell'email.

tipi di font web

Fonte

Per essere sicuri ed evitare problemi con il formato delle e-mail, limitatevi a utilizzare i font web standard supportati da tutti i client di posta elettronica, come Apple Mail.

Se usi uno strumento di creazione di email, allora puoi facilmente fare un'email HTML senza il bisogno di alcuna conoscenza di codifica. Sia che usiate un email designer o che partiate da zero, ci sono diverse cose importanti da tenere a mente per essere sicuri che la vostra email abbia l'effetto desiderato.

Avvolgimento

Creare email responsive in HTML è possibile anche senza una grande conoscenza della codifica delle email. Grazie ai moderni strumenti di posta elettronica, tutti dotati di un editor di codice visuale, e ad alcuni dei suggerimenti che abbiamo citato sopra, chiunque può creare email in HTML che abbiano un aspetto eccellente su tutti i dispositivi.

E quando preparate la vostra prossima campagna e-mail, vorrete garantire la migliore deliverability: ecco perché è necessario pulire e convalidare le e-mail prima di inviarle. Prendete la vostra prova gratuita di Bouncer oggi stesso e scoprire quanti dei vostri indirizzi e-mail devono essere rottamati!

Domande frequenti

Che cos'è un'e-mail HTML?

Le email HTML sono email create utilizzando il codice di un linguaggio di markup ipertestuale, comunemente usato anche per costruire siti web. È uno dei linguaggi di programmazione più comuni e ci sono molte risorse online che possono aiutarvi a scrivere da soli le email HTML di base, senza dover assumere uno sviluppatore di email.

Quali sono gli elementi di base di un'e-mail HTML?

Ci sono solo due... l'intestazione e il corpo dell'email. Indipendentemente dal tipo di email che state creando, dovrete includere questi due elementi nella struttura della vostra email. 

Posso creare un'email HTML in Gmail?

Sì, è possibile creare e-mail HTML in Gmail in diversi modi. È possibile copiare e incollare il codice HTML nella finestra di composizione di Gmail, utilizzare gli strumenti per sviluppatori di Chrome o provare alcune delle varie estensioni di Chrome per la creazione di e-mail.

Linea e punti