A abordagem de layout baseado em tabelas

Os clientes de e-mail — especialmente o Outlook no Windows, que usa o mecanismo de renderização do Microsoft Word — não oferecem suporte a flexbox, grade ou mesmo a um layout confiável baseado em blocos. As tabelas são o único recurso estrutural renderizado de forma consistente em todos os principais clientes de e-mail.

Todo e-mail responsivo começa com uma <table> externa com largura de 100% que funciona como o corpo do e-mail, seguida por uma tabela interna de largura fixa, geralmente de 600px, que contém o conteúdo propriamente dito. Esse padrão de dois níveis é a base de praticamente todos os modelos usados em produção.

Sempre inclua cellpadding="0" cellspacing="0" border="0" em todas as tabelas. Sem esses atributos, o Outlook insere espaços inesperados. Adicionar role="presentation" informa aos leitores de tela que devem ignorar a semântica da tabela, o que é correto, pois tabelas de layout não são tabelas de dados.

Para criar várias colunas, aninhe uma tabela com duas células <td> dentro da linha de conteúdo. Cada célula contém uma coluna. Evite div+float — o Outlook ignora float e empilha as colunas verticalmente mesmo assim, prejudicando o design.

O painel de visualização para desktop usado como padrão de fato tem cerca de 600px de largura. Projetar para essa largura mantém o e-mail confortavelmente visível, sem rolagem horizontal, simultaneamente no Outlook, Gmail para desktop, Apple Mail, Yahoo e Thunderbird.

Para telas pequenas, direcione as células da tabela interna com uma consulta de mídia que defina width como 100% e display como block, fazendo as colunas se empilharem verticalmente. O Mail do iOS e o Gmail para Android respeitam consultas de mídia; o Outlook 365 para desktop as ignora, mas mantém o layout para desktop de 600px.

As cores e imagens de plano de fundo devem ser aplicadas às células <td>, não a divs. O Outlook oferece suporte confiável ao atributo bgcolor em td, enquanto background-color do CSS em uma div pode ser removido ou totalmente ignorado, dependendo do cliente.

O Outlook precisa de Vector Markup Language (VML) para imagens de plano de fundo. Envolva background-image do CSS em comentários condicionais <!--[if mso]>...<![endif]-->, com um fallback v:rect em linha, para que o Outlook renderize a imagem enquanto todos os outros clientes usam o CSS.

Ignore flexbox, grade, propriedades personalizadas (com suporte limitado) e a maior parte do posicionamento. Limite-se a display: block/inline, larguras fixas por meio de atributos e estilos em linha. O resultado parece antigo segundo os padrões da Web, mas é renderizado de forma idêntica em todas as caixas de entrada.

Use cellpadding (atributo) e um único <td> com preenchimento para o espaço em branco interno. As margens nas células de tabelas não são confiáveis no Outlook; o preenchimento em td é universal. Combine bgcolor e padding no mesmo td para criar componentes de “cartão” sem divs.

Adicione role="presentation" a todas as tabelas de layout para que os leitores de tela não anunciem “linha, coluna 1 de 2”. Inclua também texto alternativo em todas as imagens, texto real para qualquer conteúdo (não imagens de texto) e uma ordem clara e hierárquica de títulos.

Por que as tabelas — e não divs com flexbox do CSS — são usadas para estruturar e-mails?

O layout de e-mail em HTML usa tabelas aninhadas com cellpadding/cellspacing/border zero e role="presentation". Uma tabela externa de 100% centraliza uma tabela interna de 600px; células td aninhadas formam colunas que as consultas de mídia podem empilhar em dispositivos móveis. Evite flexbox e grade, use bgcolor em td e adicione fallbacks VML para planos de fundo no Outlook.