Li amo o li odio, le email in HTML sono uno strumento di marketing estremamente popolare e quasi sicuramente incontrerai clienti che vogliono costruirli.
Se non sai nulla delle e-mail in HTML, sono noiose a sviluppare e infrangere tutte le regole che hai appreso come web designer, ma essere in grado di codificarle è un'abilità preziosa da possedere. Oggi esamineremo dieci suggerimenti facili e veloci per iniziare i principianti sulla strada della creazione di e-mail belle e funzionali.
N. 1 Utilizzare le tabelle
Aspetta cosa? Non abbiamo abbandonato i progetti basati sulla tabella non semantica secoli fa? Sì, e ora puoi provare di nuovo la gioia. Sfortunatamente, la maggior parte dei client di posta elettronica non supporta un semplice layout CSS vecchio come sei abituato. Invece, è tornato agli anni '90 e si sta familiarizzando con la spaziatura delle cellule.
Se non conosci i layout basati su tabelle, ecco un semplice esempio.
Ogni tabella è divisa in righe con celle. Ogni riga è rappresentata da
Lo snippet qui sopra mostra la sintassi di base per CSS in linea. Come puoi vedere, il codice è essenzialmente lo stesso, lo hai appena inserito nel codice del tuo codice HTML anziché collegarlo a un altro documento.
Strumenti CSS incorporati
Se ti senti più a tuo agio nell'utilizzare un foglio di stile esterno durante lo sviluppo, basta usare uno degli strumenti seguenti per convertirlo in stile in linea una volta finito.
- Premailer: converte i CSS in stili incorporati e verifica il tuo codice rispetto agli standard email
- HTML Inline Styler: converte le regole CSS in attributi di stile in linea
# 3 annida le tue tabelle
Un'altra stranezza riguardante i client di posta elettronica è che sono piuttosto incoerenti quando si tratta di interpretare margini e padding. Per superare questo problema, utilizzare le tabelle nidificate quando possibile. Il codice è un po 'disordinato, ma avrai una conformità molto maggiore su tutta la linea.
A? Nidificare? una tabella significa semplicemente posizionare una tabella all'interno di un'altra. Puoi nidificare più tavoli, fai attenzione a sopravvivere e creare un gran casino. Alcuni client di posta elettronica iniziano ad avere bug attorno a otto nidi, ma dovresti essere in grado di arrivare molto al di sotto di questo numero per la maggior parte dei tuoi progetti.
# 4 Guarda la tua larghezza
Diversi client di posta elettronica sono abbastanza limitati nella loro larghezza. Ad esempio, considera il client Gmail online. Costruire una pagina web di dimensioni normali e visualizzarla nella piccola finestra di Gmail costringerà l'utente a scomodi scorrimento orizzontale.
Ci sono troppi possibili client e dimensioni dello schermo da codificare per ogni scenario, quindi il consenso tra la comunità Web è solitamente solo per mantenere le e-mail abbastanza strette. Come regola generale, cerca di mantenere una larghezza inferiore a 600 pixel in ogni disegno di email che crei.
# 5 Fai attenzione alle immagini
Ci sono diverse complicazioni da considerare quando si usano le immagini nell'email HTML. In primo luogo, alcuni client non supportano le immagini di sfondo, altri li supportano ma spesso li disattivano per impostazione predefinita. Questo non significa assolutamente che non dovresti usare le immagini nel tuo progetto. Il punto di forza delle email HTML è il fatto che superano la qualità e le possibilità del testo ricco già disponibili nella maggior parte dei client di posta elettronica. Eliminare del tutto le immagini può davvero ridurne i benefici.
Invece di abbandonare completamente le immagini, assicurati che il tuo messaggio funzioni bene senza di loro. Usa i colori di sfondo come fallback in modo che qualsiasi testo rimanga leggibile e testare il layout con le immagini disabilitate.
Un'altra cosa che devi sapere con le immagini è che non puoi (o almeno non dovresti) inserirle nell'e-mail. Invece, dovrai ospitarli a lungo termine su un server affidabile e quindi collegarli a loro nel tuo codice.
Infine, assicurati di guardare i tempi di caricamento. Le persone sono abituate a cliccare su una e-mail e vedere i contenuti, non aspettando il caricamento delle immagini. Se mi fai sopportare lunghi tempi di caricamento, cercherò di cancellare più velocemente di quanto tu possa spiegare perché valga la pena aspettare.
# 6 Consentire l'annullamento dell'iscrizione facile
Le email HTML sono spesso parte di un flusso di newsletter sottoscritte da un utente. Molte volte gli utenti si iscrivono a un servizio e non si rendono nemmeno conto che riceveranno una newsletter. Altre volte decidono consapevolmente di iscriversi ma cambiano idea dopo.
In entrambi i casi, l'annullamento dell'iscrizione dovrebbe essere un processo indolore che chiunque potrebbe visualizzare l'email dovrebbe essere in grado di capire. Per fare ciò, includi un link per l'annullamento dell'iscrizione e assicurati che sia facile da individuare. I designer e i marketer che tentano di nascondere questo link mancano di integrità e rispetto per il loro pubblico.
Se la persona non vuole la tua email, non la leggerà comunque. Non c'è alcun valore nell'invio di 10.000 email a cartelle di spam in tutto il mondo. È molto meglio sapere che coloro che ricevono la tua newsletter sono effettivamente interessati.
# 7 Considera attentamente il tuo contenuto
I marketer e gli imprenditori spesso vedono una newsletter via email come unica fonte di contatto costante con la propria base di clienti. Pertanto sono spesso tentati di riempirlo di contenuti e informazioni il più possibile. Come designer, aiutali a resistere a questa urgenza progettando un modello che mostri un po 'di informazioni estremamente bene piuttosto che molte informazioni molto scarse.
La chiave qui è la qualità rispetto alla quantità. No on leggerà un email marketing di mille parole. Hai, nel migliore dei casi, 3-5 secondi per attirare l'attenzione del lettore medio prima che colpiscano l'eliminazione. Realizzalo con caricamento veloce, grafica accattivante, copia concisa e intestazioni descrittive chiare.
# 8 Include altre opzioni di visualizzazione
Oltre a includere un'opzione di annullamento dell'iscrizione, è necessario presentare almeno due modi alternativi per visualizzare l'e-mail per tutti coloro che non ricevono la loro esperienza preferita. Per i minimalisti, una versione di testo semplice è la migliore.Ci sono un sacco di persone là fuori che pensano che l'e-mail dovrebbe rimanere semplice e semplicemente non vogliono vedere la tua grafica accattivante per catturare l'attenzione.
All'estremo opposto dello spettro ci sono gli utenti che desiderano un'esperienza ricca e completa, ma vengono trattenuti da un client di posta elettronica buggato. Per questi utenti include un collegamento abbastanza prominente (spesso in alto) che consente loro di visualizzare l'e-mail in un browser. Poiché i browser sono infinitamente migliori per la visualizzazione di HTML e CSS, puoi persino potenziare la versione basata su browser codificandola come se fosse una normale pagina Web (o semplicemente che il browser visualizzi la versione originale).
# 9 Test approfondito
Quando si progetta una pagina Web, uno dei processi più fastidiosi da eseguire è il test cross-browser. Questo processo di solito comporta test per Webkit, Mozilla, IE e forse anche per Opera se si è veramente dedicati. Se puoi crederci, progettare per i client di posta elettronica è ancora peggio!
Ci sono oltre 30 noti client di posta elettronica, ciascuno con i propri standard e supporto variabile per diversi comandi. Per iniziare, prova nei client di posta che hai a portata di mano. Registrati per account con client webmail come Gmail, AOL e Yahoo. Assicurati anche di provare le app predefinite per Mac e PC.
Ovviamente, non puoi testare tutti i client. Se hai il budget, iscriviti per un mese a un servizio come Litmus durante la fase di test. Ciò ti consentirà di ottenere rapidamente un'anteprima del prodotto finito su 33 diversi client di posta elettronica ed è uno dei modi migliori per garantire che tutti siano coperti.
Durante la fase di progettazione, assicurati di controllare il progetto degli standard email. Questa è una delle migliori fonti disponibili per report dettagliati su ciò che è e non è supportato da vari client di posta elettronica.
# 10 Usa un modello
Il modo migliore che ho trovato per iniziare il processo di progettazione della tua prima email HTML è quello di prendere un modello. Anche se hai in mente un design molto specifico, modificare un modello sviluppato professionalmente piuttosto che partire da zero può farti risparmiare ore e ore di risoluzione dei problemi.
Questo ti darà anche una buona panoramica su come gli altri sviluppatori strutturano e modellano le loro tabelle. Ricorda che se stai per ridistribuire o vendere un modello di email come arte figurativa, non dovresti rubare il lavoro di qualcun altro! In questi casi, vorrai veramente sapere cosa stai facendo e sviluppare la tua struttura da zero.
Modelli di email gratuiti
Fortunatamente, non devi pagare una monetina per afferrare alcuni modelli gratuiti di qualità da cui iniziare il processo di progettazione. La maggior parte dei servizi di posta elettronica premium offre download gratuiti per iniziare, spesso senza necessità di registrazione. Controlla le risorse di seguito:
- Campaign Monitor: 30 modelli
- Mail Chimp: 4 modelli
- CakeMail: 21 modelli
Conclusione
Per riassumere, durante la progettazione di modelli di e-mail, inizia con un modello di base valido, codice come ha fatto tuo padre un decennio fa, mantieni il contenuto sia concettualmente che fisicamente (meno di 600 pixel di larghezza), facilita l'annullamento dell'iscrizione e la visualizzazione di versioni alternative e prova come un matto.
Lascia un commento qui sotto e facci sapere se hai trovato l'articolo utile. Assicurati inoltre di condividere qualsiasi elemento di saggezza che hai raccolto lungo il percorso per la progettazione di email HTML.