Share
Come molti altri web designer, mi piace codificare pagine web belle ma flessibili che si mostrano praticamente identiche in ogni browser web. Purtroppo, la progettazione di newsletter via email ti fa tornare indietro di dieci anni. Tag, tabelle, stili incorporati obsoleti, oh mio! In questo articolo, elencherò sei metodi che miglioreranno immediatamente i tuoi layout di email.
Come nuovo incarico presso AWeber, il mio primo incarico è stato quello di creare una dozzina di nuovi modelli di newsletter e-mail HTML per i nostri clienti. Per il web designer amante del codice, l'e-mail HTML è un ricordo di un triste passato. Dopo settimane di lavoro e innumerevoli mal di testa, ho consegnato la merce. Ho anche imparato molto sulla progettazione per la posta elettronica.
Per aiutarti a evitare un sacco di grattacapi che ho incontrato durante i test, ecco 15 cose che puoi fare per creare email HTML di grande impatto.
Se porti via solo un suggerimento da questo articolo, lascia che sia questo. Come designer, dedichiamo molto tempo a creare un'esperienza utente perfetta sul Web e a testare questa esperienza su più piattaforme. Tuttavia, quando si tratta di e-mail, troppi di noi non riescono a prestare la stessa attenzione ai dettagli.
Proprio come test per il web, la creazione di un layout di posta elettronica che visualizza lo stesso in ogni client di posta elettronica può essere un incubo assoluto.
Per essere sicuro che i tuoi iscritti riceveranno il tuo messaggio come previsto - prova in tutto ciò che puoi!
Questo include ma non è limitato a:
Ma aspetta - c'è di più!
Alcuni di questi client di posta elettronica hanno più versioni, ognuno dei quali renderizza CSS e HTML in modo diverso.
Questo fa parte di un messaggio HTML che viene reso dal vecchia versione di Yahoo.
Ecco la stessa email inviata da nuova versione di Yahoo. 
Sottili differenze, lo ammetto. Ma abbastanza di queste sottili differenze e si aggiunge a un design sciatto. E se questo non è abbastanza ... il browser Internet dell'utente può anche svolgere un ruolo nel rendering del design.
Ora prima di buttare il computer fuori dalla finestra per la frustrazione ... questi prossimi passaggi possono aiutarti a escludere la maggior parte dei problemi di test.
Sono stupito nel vedere alcuni dei più grandi inserzionisti che infrangono le regole di usabilità di base relative all'email HTML.
Ecco alcune linee guida per vivere secondo:
Questa è un'intestazione di un'email che ho ricevuto da Discovery Health:
Ho preso questo screenshot dal mio account Gmail - prima di abilitare le immagini. Guarda come il testo ALT "bullet" e "spacer" interferiscono?
L'aggiunta di tag ALT a elementi che servono solo per scopi di progettazione ingombra il design e distrae dal tuo messaggio.
Eh? Ho passato tutto questo tempo ad imparare i CSS e ora devo tornare ai tavoli? Quando si parla di design delle e-mail, le tabelle sono calde come nel 2003: sono la cosa più vicina agli standard che abbiamo.
Alcune cose da prendere in considerazione:
Nota: Le tue immagini di sfondo si comporteranno come se fossero piastrellate ... quindi pianifica di conseguenza.
Anche io non la pensavo così.
Alcuni noti client di posta elettronica ignorano il codice all'interno dei tuoi head tag. Gmail e Hotmail sono i principali colpevoli che vengono in mente.
Con il layout impostato in formato tabella, è il momento di applicare gli stili al testo e alle immagini.
Ecco alcuni suggerimenti e trucchi per garantire che il tuo messaggio sia quasi identico in tutti
del browser:
Sapevi che la riga dell'oggetto di ogni email inviata a un account Gmail è seguita dai primi frammenti di testo all'interno di quella particolare email?
Perché non usarlo a tuo vantaggio!
Sopra c'è una foto dalla mia casella di posta Gmail.
Entrambe le newsletter hanno lo stesso contenuto di intestazione.
Una sola differenza: la Newsletter 1 sfrutta la formattazione della posta in arrivo di Gmail.
Ecco come l'ho fatto:
Inserisci un'immagine 1px x 1px come il primo elemento della tua email. Avvolgi l'immagine nei tag span impostando il colore del carattere sullo stesso dello sfondo. Qualunque testo inserito nei tag ALT per l'immagine 1px x 1px ora sostituirà lo snippet di google nella posta in arrivo degli utenti.
È così facile! Questa sottile differenza renderà il tuo messaggio diverso dalle altre e-mail nella posta in arrivo del lettore.
Ho fatto del mio meglio per condividere alcune cose che faccio durante la creazione di email HTML. È il tuo turno!
Come procedi nel progettare, codificare e testare le tue campagne email?
Eventuali consigli, suggerimenti o trucchi che vorresti aggiungere saranno molto apprezzati dalla tua comunità di design.
Accentsconagua