Modelli e-mail ed e-mail marketing: tecniche HTML/CSS antiproiettile per tenerti al sicuro

Nell’articolo di questa settimana, discuteremo il lato della codifica delle migliori pratiche di email marketing. Cercherò di essere il più esplicativo possibile, tuttavia non esitate a contattarmi per qualsiasi domanda possiate avere.

Sappiamo tutti che la creazione/personalizzazione dei modelli di email può essere noiosa, soprattutto quando cerchi di mantenere lo stesso aspetto della tua campagna email in tutte quelle caselle di posta. Versioni di Outlook (2000, 2002, 2003, 2007, 2010, 2011, 2013), Apple Mail, Hotmail (ora Outlook sul desktop), Yahoo, GMail, Thunderbird, SpiceBird, Windows Live Mail, GMX, AOL, Opera Mail, Fox Posta , Sparrow, IncrediMail, Lotus Notes, Eudora. L’elenco continua.

Poi abbiamo anche cellulari e tablet, iPhone, dispositivi Android, telefoni Windows, ecc.

Se hai avuto a che fare con i modelli di email e i loro problemi di rendering per un po’, probabilmente saprai che le versioni di Outlook, Hotmail e Gmail causano la maggior parte della caduta dei capelli.

1 – Per prima cosa: dovresti sempre usare INLINED CSS

Alcuni servizi di posta elettronica, in particolare GMail, rimuovono ancora il CSS dall’intestazione della tua email. Pertanto, dovresti sempre utilizzare CSS in linea quando invii la tua campagna.

Il trucco è iniziare con una versione incorporata e utilizzare tutti i CSS nella sezione HEAD della tua email. Ciò ti consente di personalizzare gli stili in modo molto più semplice e veloce rispetto agli stili incorporati.

Apporta tutte le modifiche alla presentazione e poi, quando hai finito la tua email con tutti i tuoi contenuti e la presentazione, usa semplicemente un’app online che ti aiuterà con successo a incorporare facilmente tutto il CSS del tuo codice. Preferisco lo strumento inliner di Mailchimp.

2 – Non utilizzare MATRIMONI o MARGINI. Non usarli per il layout, non usarli per i contenuti

Fatto: non puoi fare affidamento su padding e margini.

Dovresti sempre utilizzare un approccio basato su tabelle quando si tratta di e-mail HTML. Se hai bisogno di riempimento o di un bordo, usa semplicemente i tag HTML della tabella “tr” e “td” per ottenere questo risultato. Questo ti fa risparmiare un sacco di mal di testa. Usa le tabelle, salva i capelli, soprattutto in Outlook.

3 – Progetta i tuoi fogli di calcolo per un’esperienza Outlook a prova di proiettile

I tuoi fogli di calcolo dovrebbero sempre avere alcuni stili “speciali” per il dannato Outlook.

Nella tua tabella, assicurati che gli attributi cellpadding e cellpacing siano presenti e dai loro un valore nullo.

Non dimenticare mai di aggiungere questo stile all’attributo style dei tag HTML della tua tabella:

E non dimenticare mai di aggiungere questo stile anche all’attributo style dei tuoi tag HTML td:

4 – Un pixel è vuoto sotto la tua immagine?

Ebbene, questo ha causato molti attacchi di cuore a tutti noi che abbiamo lavorato nel settore dell’email marketing.

Il tag td contenente la tua immagine dovrebbe avere uno stile con un’altezza della linea di 1px. So che sembra strano (ehi, è HTML degli anni ’90), ma funziona.

5 – Outlook non rispetta l’altezza della riga di una cella di tabella vuota. Perchè questo?

Occuparsi di email HTML significa anche occuparsi degli anni ’90. Abbiamo discusso in precedenza dell’utilizzo del riempimento e dei bordi basati su tabella, ma alcune versioni di Outlook ignorano ancora questo approccio e assegnano automaticamente un’altezza di 20 px alle celle della tabella pixel-perfect.

Quindi ecco la soluzione:

Dovresti usare il seguente stile nei tuoi tag td.

E per favore non dimenticare di inserire uno “spazio di interruzione (nbsp)” tra i tag td di apertura e di chiusura.

6 – Perché Gmail non mostra l’intera email?

Se la tua email supera i 102 KB, GMail la troncerà e mostrerà invece l’istruzione “Visualizza intero messaggio”. Per evitare ciò, prova a costruire il tuo indirizzo email sotto i 102 KB.

Leave a Comment