Tabelas HTML no e-mail: o que pode dar errado?

Se você já está no setor de e-mail há algum tempo, provavelmente já teve vários problemas com suas campanhas de e-mail. De imagens perdidas a problemas de entrega, o marketing por email é repleto de desafios. Algo que você pode não ter considerado, no entanto, é o que pode dar errado com as tabelas - o código real - que está na base de seus e-mails.

Infelizmente, há muitas coisas que podem dar errado com as tabelas HTML. Hoje, queremos analisar alguns dos problemas mais comuns vistos com tabelas HTML e dar algumas dicas para garantir que você não encontre os mesmos problemas em seus próprios e-mails.

Por que usamos tabelas

Primeiro, uma rápida atualização sobre por que usamos tabelas HTML para codificar e-mails. Como discutimos no passado, as campanhas de marketing por email requerem suas próprias considerações especiais de codificação. Embora a web e o e-mail sejam desenvolvidos com as mesmas tecnologias (HTML e CSS), os aplicativos de e-mail não seguem os mesmos padrões dos navegadores da web. Cada aplicativo de e-mail tem seu próprio mecanismo de renderização que determina qual código é compatível e como os e-mails são exibidos. A má notícia para nós é que todos esses motores de renderização suportam diferentes tags HTML e propriedades CSS.

Por causa disso, em grande parte não podemos usar os mesmos princípios de codificação usados ​​no design da web. Para garantir que os emails sejam exibidos corretamente na maioria dos clientes de email, temos que usar tabelas HTML para criar a estrutura de uma campanha de email.

Embora isso tenha mudado recentemente, especialmente com a grande atualização do Gmail no ano passado, alguns clientes de e-mail ainda não suportam muito HTML e CSS. O mais notável: a família de clientes de e-mail do Outlook da Microsoft, que usa o Microsoft Word como mecanismo de renderização. Como o Outlook ainda é extremamente popular (atualmente no quinto lugar em nosso rastreador de participação de mercado do cliente de email), os designers de email ainda precisam usar tabelas de alguma forma se quiserem que suas campanhas sejam exibidas corretamente para os assinantes.

E quando temos que confiar em tabelas HTML, há uma série de coisas que podem dar errado ...

Tornando as coisas complicadas

Um dos problemas mais comuns que vemos com o uso de tabelas são os layouts excessivamente complexos. Isso é especialmente verdadeiro para modelos de e-mail legados que não são atualizados há alguns anos.

Até recentemente, a maioria dos e-mails era construída com muitas tabelas. Tabelas dentro de tabelas dentro de tabelas - uma prática conhecida como aninhamento.

Ao aninhar várias tabelas em outra tabela, é provável que você introduza problemas em seu código. É muito fácil colocar acidentalmente uma tabela no lugar errado ou colar uma tag HTML essencial ao mudar as coisas. E para alguns clientes (olhando para você, Lotus Notes), você pode ver os e-mails renderizados mal quando você aninha as tabelas profundamente. É por esse motivo que recomendamos a construção de e-mails com uma abordagem modular, algo sobre o qual nosso amigo Brian Graves escreveu. E tente reduzir ao mínimo as tabelas aninhadas. O aninhamento de tabelas é quase inevitável, mas manter a profundidade de aninhamento de 4 a 6 no máximo ajudará a evitar problemas.

Semelhante ao aninhamento complexo, projetos excessivamente complexos também podem ser problemáticos. Não é incomum ver e-mails com várias colunas, mas quando você começa a adicionar muitas colunas a um e-mail, está se preparando para uma falha potencial.

Alguns clientes de e-mail têm problemas até mesmo com a matemática básica. Certas versões do Microsoft Outlook são conhecidas por adicionar espaçamento extra às colunas da tabela, quebrando layouts de e-mail. Embora você possa pensar que usar quatro células de tabela definidas para larguras de 25% faz sentido, o Outlook adicionará espaço extra a essas células e fará com que o layout seja mais largo do que 100%. O e-mail resultante irá colocar algumas dessas células em sua própria linha, arruinando sua campanha de e-mail bem projetada e perfeitamente planejada.

Manter seus layouts de e-mail simples ajuda a evitar possíveis problemas com suas campanhas e mantém seus assinantes felizes.

Tags ausentes

Os emails normalmente contêm muitos códigos. E a maioria das equipes de e-mail trabalha com agendas muito rápidas e apertadas. Essa combinação pode levar a erros que podem arruinar uma campanha de e-mail.

Como uma atualização rápida, vamos ver como o HTML é escrito. HTML consiste em tags que envolvem o conteúdo. Na maioria dos casos, a marcação adequada requer uma tag de abertura e fechamento. Veja esta tabela HTML como exemplo:

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

Você pode ver que existem três tags diferentes: A tabela, a linha da tabela e a célula da tabela. Essas tags são abertas e fechadas (denotadas com o símbolo /).

Embora o HTML seja uma linguagem de marcação indulgente, os clientes de e-mail e seus mecanismos de renderização frequentemente engasgam quando as tags HTML estão faltando. Infelizmente, a falta de tags de fechamento é um problema comum em e-mails. Esses tempos de resposta rápidos podem fazer com que os designers de e-mail codifiquem muito rápido e se esqueçam de fechar uma tabela, linha ou célula. Embora isso possa ser bom para alguns clientes, em outros levará a campanhas interrompidas.

Ferramentas como o W3C Markup Validation Service podem ajudar a identificar quaisquer tags ausentes. Tags ausentes e marcação formada incorretamente também são o motivo pelo qual recomendamos o uso de modelos de e-mail ou ferramentas como os Partials e Snippets do Builder para ajudar a criar e-mails. Eles não apenas ajudam a garantir que seu código seja bem escrito e devidamente testado, mas também têm o benefício adicional de acelerar seu fluxo de trabalho - permitindo que você cumpra os prazos apertados e mantenha sua equipe feliz.

Atributos ausentes

Assim como as tags ausentes podem causar problemas, os atributos HTML ausentes nas tabelas podem levar a designs de aparência descolada.

Os atributos HTML são propriedades adicionais que podem ser definidas em tags HTML. Essas propriedades controlam coisas como larguras e alturas de elementos, alinhamento e até espaçamento. O espaçamento inesperado em torno das células da tabela é um dos problemas mais comuns que você verá com as tabelas HTML.

Quase todos os aplicativos de e-mail (e navegadores da web) adicionam seus próprios estilos às tabelas HTML. As tabelas HTML são tradicionalmente usadas para exibir dados tabulares e não se destinavam originalmente ao layout e design de conteúdo. Por isso, precisamos substituir o comportamento padrão dos navegadores e aplicativos de e-mail para garantir que as tabelas sejam exibidas corretamente.

Adicionando os atributos cellspacing e cellpadding à tabela - e definindo ambos como zero - podemos ter certeza de que nenhum cliente de e-mail adicionará espaço extra às células da tabela ou em torno delas.

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

Da mesma forma, se você estiver encontrando problemas com as larguras das tabelas ou com o alinhamento do conteúdo da tabela, certifique-se de não esquecer os atributos de largura ou alinhamento nas tabelas ou células da tabela.

Aprenda a solucionar problemas

Quer aprender como solucionar problemas de suas próprias campanhas de e-mail e evitar problemas embaraçosos para seus assinantes? Junte-se a nós no Litmus Live para um workshop completo sobre solução de problemas de e-mail como um profissional. Veremos as armadilhas de e-mail mais comuns, suas soluções e os melhores métodos para solucionar problemas em campanhas.

Compre seus ingressos para o Litmus Live! Cadastre-se hoje para celebrar o e-mail conosco! Cadastre-se agora →