Tabelle HTML nell'e-mail: cosa potrebbe andare storto?

Se sei stato nel settore della posta elettronica per un certo periodo di tempo, probabilmente hai riscontrato una serie di problemi con le tue campagne di posta elettronica. Dalle immagini mancanti ai problemi di consegna, l'email marketing è pieno di sfide. Qualcosa che potresti non aver considerato, tuttavia, è ciò che può andare storto con le tabelle, il codice vero e proprio, che è alla base delle tue e-mail.

Sfortunatamente, ci sono molte cose che possono andare storte con le tabelle HTML. Oggi, volevamo analizzare alcuni dei problemi più comuni riscontrati con le tabelle HTML e darti alcuni suggerimenti per assicurarti di non incontrare gli stessi problemi nelle tue e-mail.

Perché usiamo le tabelle

Innanzitutto, un rapido aggiornamento sul motivo per cui utilizziamo le tabelle HTML per la codifica delle e-mail. Come abbiamo discusso in passato, le campagne di email marketing richiedono considerazioni di codifica speciali. Sebbene il Web e la posta elettronica siano basati sulle stesse tecnologie (HTML e CSS), le applicazioni di posta elettronica non aderiscono agli stessi standard dei browser Web. Ogni applicazione di posta elettronica ha il proprio motore di rendering che determina quale codice è supportato e come vengono visualizzate le email. La cattiva notizia per noi è che tutti questi motori di rendering supportano diversi tag HTML e proprietà CSS.

Per questo motivo, in gran parte non possiamo utilizzare gli stessi principi di codifica utilizzati nel web design. Per garantire che le e-mail vengano visualizzate correttamente nella maggior parte dei client di posta, dobbiamo utilizzare le tabelle HTML per creare la struttura di una campagna di posta elettronica.

Sebbene questo sia cambiato di recente, in particolare con l'importante aggiornamento di Gmail dell'anno scorso, alcuni client di posta elettronica non supportano ancora molto HTML e CSS. Il più notevole: la famiglia di client di posta elettronica Outlook di Microsoft, che utilizzano Microsoft Word come motore di rendering. Poiché Outlook è ancora estremamente popolare (attualmente il n. 5 sul nostro tracker di quota di mercato del client di posta elettronica), i progettisti di posta elettronica devono ancora utilizzare le tabelle in qualche modo se vogliono che le loro campagne vengano visualizzate correttamente per gli abbonati.

E quando dobbiamo fare affidamento su tabelle HTML, ci sono un certo numero di cose che possono andare storte...

Rendere le cose complicate

Uno dei problemi più comuni che vediamo con l'utilizzo delle tabelle sono i layout eccessivamente complessi. Ciò è particolarmente vero per i modelli di email legacy che non sono stati aggiornati da alcuni anni.

Fino a poco tempo fa, la maggior parte delle email era composta da molte tabelle. Tabelle all'interno di tabelle all'interno di tabelle: una pratica nota come nidificazione.

Quando si nidificano più tabelle all'interno di un'altra tabella, è probabile che si introducano problemi all'interno del codice. È molto facile mettere accidentalmente una tabella nel posto sbagliato o incollare su un tag HTML essenziale quando si spostano le cose. E per alcuni client (guardando te, Lotus Notes), puoi vedere che le e-mail vengono visualizzate in modo scadente quando annidi le tabelle troppo profondamente. È per questo motivo che consigliamo di creare e-mail con un approccio modulare, come ha scritto il nostro amico Brian Graves. E cerca di ridurre al minimo le tabelle nidificate. L'annidamento dei tavoli è quasi inevitabile, ma mantenere la profondità di annidamento a un massimo di 4-6 tavoli aiuterà a evitare qualsiasi problema.

Analogamente al nesting complesso, anche i progetti eccessivamente complessi possono essere problematici. Non è raro vedere e-mail a più colonne, ma quando inizi ad aggiungere troppe colonne a un'e-mail, ti stai preparando per un potenziale errore.

Alcuni client di posta elettronica hanno problemi anche con la matematica di base. È noto che alcune versioni di Microsoft Outlook aggiungono ulteriore spazio alle colonne della tabella, interrompendo i layout di posta elettronica. Sebbene tu possa pensare che l'utilizzo di quattro celle di tabella impostate su larghezze del 25% abbia senso, Outlook aggiungerà spazio extra a quelle celle e farà sì che il layout sia più ampio del 100%. L'e-mail risultante rilascerà alcune di quelle celle nella propria riga, rovinando la tua campagna e-mail ben progettata e perfettamente pianificata.

Mantenere semplici i layout delle e-mail aiuta a evitare potenziali problemi con le tue campagne e mantiene felici i tuoi abbonati.

Tag mancanti

Le e-mail in genere contengono molto codice. E la maggior parte dei team di posta elettronica lavora su programmi molto rapidi e stretti. Questa combinazione può portare a errori che possono rovinare una campagna email.

Come rapido aggiornamento, diamo un'occhiata a come viene scritto l'HTML. HTML è costituito da tag che circondano il contenuto. Nella maggior parte dei casi, il markup corretto richiede sia un tag di apertura che di chiusura. Prendi questa tabella HTML come esempio:

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Puoi vedere che ci sono tre tag diversi: la tabella, la riga della tabella e la cella della tabella. Questi tag vengono aperti e quindi chiusi (indicati con il simbolo /).

Sebbene l'HTML sia un linguaggio di markup tollerante, i client di posta elettronica e i relativi motori di rendering spesso si bloccano quando mancano i tag HTML. Sfortunatamente, i tag di chiusura mancanti sono un problema fin troppo comune nelle e-mail. Questi tempi di consegna rapidi possono portare i progettisti di posta elettronica a codificare troppo velocemente e a dimenticare di chiudere una tabella, una riga o una cella. Mentre questo può andare bene in alcuni clienti, in altri porterà a campagne interrotte.

Strumenti come il W3C Markup Validation Service possono aiutare a identificare eventuali tag mancanti. I tag mancanti e il markup formato in modo errato sono anche i motivi per cui consigliamo di utilizzare modelli di posta elettronica o strumenti come i parziali e gli snippet di Builder per aiutare a creare e-mail. Non solo aiutano a garantire che il tuo codice sia ben scritto e testato correttamente, ma hanno l'ulteriore vantaggio di accelerare il tuo flusso di lavoro, permettendoti di rispettare quelle scadenze ravvicinate e di mantenere felice il tuo team.

Attributi mancanti

Proprio come i tag mancanti possono causare problemi, gli attributi HTML mancanti sulle tabelle possono portare a progetti dall'aspetto stravagante.

Gli attributi HTML sono proprietà aggiuntive che possono essere impostate sui tag HTML. Queste proprietà controllano cose come la larghezza e l'altezza degli elementi, l'allineamento e persino la spaziatura. La spaziatura imprevista intorno alle celle della tabella è uno dei problemi più comuni che vedrai con le tabelle HTML.

Quasi tutte le applicazioni di posta elettronica (e i browser Web) aggiungono i propri stili alle tabelle HTML. Le tabelle HTML sono tradizionalmente utilizzate per visualizzare dati tabulari e non erano originariamente destinate alla disposizione e alla progettazione di contenuti. Per questo motivo, dobbiamo sovrascrivere il comportamento predefinito dei browser e delle applicazioni di posta elettronica per garantire che le tabelle vengano visualizzate correttamente.

Aggiungendo gli attributi di cellpacing e cellpadding alla tabella e impostando entrambi a zero, possiamo essere sicuri che nessun client di posta elettronica aggiungerà spazio extra a o intorno a qualsiasi cella della tabella.

 <table cellpadding="0" cellspacing="0"> </table>

Allo stesso modo, se riscontri problemi con le larghezze della tabella o l'allineamento del contenuto della tabella, dovresti assicurarti di non aver dimenticato la larghezza o allineare gli attributi sulle tabelle o sulle celle della tabella.

Scopri come risolvere i problemi

Vuoi imparare come risolvere i problemi delle tue campagne e-mail ed evitare problemi imbarazzanti per i tuoi abbonati? Unisciti a noi a Litmus Live per un workshop completo sulla risoluzione dei problemi relativi alla posta elettronica come un professionista. Esamineremo le insidie ​​​​più comuni delle e-mail, le loro soluzioni e i metodi migliori per la risoluzione dei problemi delle campagne.

Ottieni i tuoi biglietti al tornasole Live! Registrati oggi per festeggiare l'e-mail con noi! Registrati ora →