Limitações dos e-mails em HTML

A maioria dos clientes de e-mail não aceita todos os tipos de conteúdo HTML encontrados na web. Enquanto os navegadores podem exibir scripts, animações e menus de navegação complexos, as caixas de entrada típicas não foram feitas para processar esse tipo de conteúdo.

Neste artigo, você vai aprender sobre os tipos de conteúdo que devem ser evitados no design dos seus e-mails e o que deve ser usado no lugar deles.

O que fazer e o que não fazer no e-mail HTML

Os clientes de e-mail geralmente têm suas próprias restrições de design em comparação com um navegador da web. Elementos interativos como Flash, JavaScript ou formulários em HTML não funcionam na maioria das caixas de entrada de e-mail.

Consulte esta tabela para saber mais.

Usar com cautela

Você pode incluir nos seus modelos do Mailchimp determinados elementos, como imagens de plano de fundo e fontes personalizadas. Nem todos os clientes de e-mail são compatíveis com esses elementos, por isso recomendamos que você visualize e teste totalmente as suas campanhas antes de enviá-las ao público todo.

GIFS animados

Alguns clientes de e-mail não são compatíveis com GIFs animados, mas se quiser incluir um GIF na sua campanha, é possível fazer isso diretamente a partir do Giphy.

Se for carregar um GIF diretamente no Mailchimp, geralmente é melhor editar o conteúdo animado antes. Nosso Editor de fotos altera os arquivos de imagem para editá-los, e esse processo não foi projetado para conteúdos animados, o que pode corromper os GIFs.

Confira o guia da Litmus para ver mais informações úteis sobre GIFs animados com quais clientes de e-mail eles são compatíveis.

Imagens de fundo

O Mailchimp oferece suporte a imagens de plano de fundo nas seções de pré-cabeçalho, cabeçalho, corpo, coluna e rodapé dos modelos de arrastar e soltar. Se você usar um modelo HTML personalizado, pode adicionar uma imagem de plano de fundo com o nosso criador de modelos. As imagens de plano de fundo não são reproduzidas em todos os clientes de e-mail e podem ser exibidas de forma diferente nos clientes de dispositivos móveis, por isso é importante visualizar e testar totalmente suas campanhas antes de enviá-las ao público.

Adicionar uma imagem de fundo a uma página de destino ou e-mail
Adicionar uma imagem de fundo a um modelo HTML personalizado
Visualizar e testar uma campanha de e-mail

Fontes da web

A barra de ferramentas do Editor do Mailchimp permite usar fontes padrão e algumas fontes da web personalizadas. Se um cliente de e-mail não oferecer suporte à fonte da web usada na sua campanha, ela será substituída por uma fonte padrão.

Confira a tabela a seguir para saber quais clientes de e-mail oferecem suporte ou não às fontes da web.

Modelos largos

Seus contatos frequentemente abrem as campanhas em dispositivos móveis ou no painel de visualização de clientes de e-mail no computador. Os painéis de visualização de e-mail são estreitos, por isso eles podem cortar sua mensagem se ela tiver largura maior do que 600 a 800 pixels.

Não usar

Os elementos abaixo são bloqueados por quase todos os principais clientes de e-mail.

JavaScript

JavaScript é uma linguagem de programação que torna o conteúdo da internet interativo. Ela é comum em sites, mas a grande maioria dos clientes de e-mail bloqueia os scripts, pois eles podem ocultar conteúdo mal-intencionado. Evite o JavaScript de modo geral.

Use gifs para deixar o seu conteúdo mais interativo.

Elementos Iframe

Um <iframe> (inline frame [quadro embutido]) é um elemento de HTML que incorpora conteúdo de um site em outro site. Os quadros embutidos costumam ser usados para inserir anúncios, vídeo, áudio ou formulários em outros sites. Os Iframes muitas vezes contêm scripts, por isso são bloqueados pela maioria dos clientes de e-mail.

No lugar deles, crie um link para o conteúdo que você quer exibir na campanha.

Flash

O Flash exibe animações e gráficos em sites, mas é bloqueado pela maioria dos clientes de e-mail.

No lugar dele, use gifs para deixar o conteúdo mais interativo.

Formulários em HTML

Campos de texto, entradas de texto, botões de opção e caixas de seleção são elementos de formulário em HTML simples, mas o botão de envio geralmente usa JavaScript. Alguns clientes de e-mail exibem formulários, mas infelizmente os contatos não conseguem enviá-los. Evite formulários em HTML e considere usar alternativas.

Por exemplo, experimente uma pesquisa simples ou uma integração de pesquisa Mailchimp para reunir as respostas dos contatos, ou insira o link para um formulário on-line.

Mídia incorporada

Mídias de reprodução automática ou por clique não são executadas na caixa de entrada, a menos que o cliente de e-mail do seu contato aceite as etiquetas de HTML5 <video> e <audio>. Apenas um entre os principais clientes de e-mail, o Apple Mail, aceita essas etiquetas, por isso é melhor evitar mídias incorporadas e pensar em uma alternativa.

Uma opção é compartilhar o link de um reprodutor de vídeo usando as etiquetas de mesclagem do Mailchimp ou os blocos de conteúdo de vídeo. Para enviar arquivos de áudio, compartilhe o link de um arquivo de áudio.

Recursos de design HTML de e-mails para programadores

Se você é iniciante em HTML ou já programou muitos e-mails antes, estes recursos podem ajudar a criar modelos que ficam ótimos em diversos clientes de e-mail.

• Referência em design de e-mails
  Oferece recursos de design, métodos de desenvolvimento, amostras de código e planos gráficos de e-mails que podem ser baixados para ajudar você a criar e compor seus e-mails.
• Guia de design de e-mails
  Oferece dicas de estilo, design e layout de campanhas em forma de artigo.