Guia de design de e-mail HTML

O guia completo de design de e-mail

Você já deve saber como criar um site moderno e acessível. Você conhece as regras, as últimas opções, etc. No entanto, você pode realmente pegar todo esse conhecimento e usá-lo para o design de e-mail? A resposta curta é não. Devido à variedade de clientes de e-mail e suporte limitado ao CSS, existem algumas regras muito específicas e não quando se trata de design de e-mail. Este guia ajudará a explicar os muitos pontos que você deve estar ciente ao usar seu próprio HTML para criar um e-mail para que ele seja exibido corretamente. 

Antes de começarmos, é importante notar que o design de e-mail não é o mesmo que o web design. Se você se preocupa com os padrões W3C ou usa o que há de mais moderno em CSS, você precisa esquecer tudo isso ao abordar o design de e-mail. Basicamente você pode pensar como se fosse ano 2000.

Layout

  • 650px ou menor largura de projeto
    A regra geral para o tamanho do e-mail é mantê-lo 650px ou menos na largura. Isso permite que o e-mail seja exibido corretamente (globalmente) na maioria dos clientes de e-mail e configurações de exibição.
  • Layouts simples são os melhores
    Com design de e-mail simples é melhor. Se você tentar fazer um design complicado, você encontrará muitos testes e depuração de problemas de clientes de e-mail. Se você está procurando completar um design mais avançado, esteja pronto para usar várias tabelas e dedicar um bom tempo para efetuar testes.
  • Use tabelas HTML básicas 
    Para criar o layout geral, você precisará usar tabelas HTML padrão. As técnicas de flutuação e layout do CSS não renderizarão adequadamente todos os clientes de e-mail.
  • Tenha cuidado com o padding de células de tabelas
    O Outlook pegará o padding de qualquer célula em uma fileira e aplicará em todas as células da linha. Isso pode resultar em algumas mudanças visuais que você não deseja. Você deve tentar aplicar o mesmo padding para todas as células em uma linha OU colocar uma div interna ou tabela (que tem padding) dentro da célula que você gostaria de ter padding. (Mais informações)
  • Evite usar colspans="" em suas tabelas
    Alguns clientes de e-mail não são totalmente compatíveis com eles e outros terão problemas de exibição para as outras células se você tiver um colspan.

CSS

  • Não use folhas de estilos externas
    Eles não funcionarão em muitos clientes de e-mail e você deve estar incluindo todos os seus CSS usando CSS em linha dentro de seu HTML. 
  • Não use classes CSS - use sempre CSS em linha 
    Muitos clientes de e-mail não aceitam classes CSS. Em vez de declarar classes CSS, você deve usar CSS em linha. Um exemplo seria <div style="color:#cccccc;" >content</div> em vez de <div class="cssclassa">content</div> 
  • Não use atalhos CSS
    CSS permite que você normalmente defina propriedades em grupos. Como style="fonte: 12px, Arial" Em vez de agrupar tais atributos, você deve definir cada parte individualmente. Como style="tamanho da fonte:12px; família de fontes:Arial" 
  • Evite usar opções de flutuação ou posição CSS
    Alguns clientes de e-mail desconsiderarão as opções de CSS de flutuação e posição. Tente usar tabelas em vez disso.

Imagens e vídeos

  • Use URLs de origem de imagem absoluta 
    Em vez de incluir uma imagem como (<img src="img.gif">) você deve incluir a URL absoluta no arquivo como (<img src="http://site.com/img.gif">) 
  • sempre use tags alt (<img src="http://site.com/img.gif" alt="Company ABC">) 
    A maioria dos clientes de e-mail desativa as imagens por padrão. Então, a menos que você tenha tags alt, seus inscritos só verão uma caixa em branco. Com uma alt tag, seus inscritos verão o texto que você colocou na tag. 
  • Não incorpore vídeos e/ou flash
    Não é uma boa ideia incorporar vídeos diretamente e/ou flash em seu e-mail. Muitos clientes de e-mail não são compatíveis com esse código e muitos programas de detecção de spam e vírus sinalizarão seu e-mail como spam/malicioso. Em vez de incorporar seu vídeo/flash em seu e-mail, tire uma captura de tela de como o vídeo do flash player se parece e incorpore isso. Quando eles clicam nele, você pode ter o vídeo/flash aberto em seu navegador. 
  • GIFs animados não são totalmente compatíveis
    Pergunte a si mesmo se você realmente precisa de uma animação em seu e-mail. Embora a maioria dos clientes de e-mail tenha suporte a GIFs animados, o Outlook 2007 não. Os clientes de e-mail que não são compatíveis com GIFs animados provavelmente mostrarão o primeiro quadro da sua sequência de animação. 
  • Tenha cuidado com imagens emendadas
    Se você tiver uma imagem maior que é emendada e colocada em seu HTML usando células de tabela ou tags img ao lado uma da outra, você precisará testar completamente. Alguns clientes de e-mail podem adicionar espaço extra entre suas imagens e fazer com que seu e-mail pareça ruim.
  • Evite usar imagens para ajudar com seu layout
    Algumas pessoas usam imagens de 1 ou 2 pixels para ajudar a alinhar itens dentro de seu layout. Alguns clientes de e-mail/filtros pensarão que é uma imagem de rastreamento de leitura/abertura em potencial e penalizarão o e-mail por isso.
  • Teste seu e-mail com imagens desativadas
    Como a maioria dos clientes de e-mail mostra e-mails com imagens desativadas por padrão, é muito importante que você verifique como seu e-mail fica com imagens desativadas.
  • Veja os tamanhos dos seus arquivos
    Assim como com o design web regular, você deseja estar ciente do tamanho dos arquivos de imagem para o seu e-mail. Tente mantê-los pequenos para garantir que eles serão baixados rapidamente para seus inscritos.

Fundo

  • As imagens de fundo não são totalmente compatíveis
    Se você estiver usando uma imagem de fundo, tenha em mente que alguns clientes de e-mail não os mostrarão. Se você ainda quiser usar uma imagem em segundo plano, use as opções de fundo HTML em vez de usar CSS para declarar um plano de fundo.
  • Cores de fundo de corpo inteiro 
    Muitos clientes de e-mail (como o Gmail) não mostram uma cor de fundo que você define para o corpo principal (<body> tag) Sugerimos que se você estiver definindo uma cor de fundo na marca do corpo para também ter uma div de embrulho com uma cor de fundo que envolve o seu conteúdo. Desta forma, mesmo que a cor de fundo do corpo não seja compatível, você terá algo muito semelhante mostrado.

Diversos

  • Não coloque nada acima da tag abertura <body>
    Qualquer coisa que você colocar acima da tag do corpo provavelmente será removida e não usada.
  • Não inclua javascript
    É provável que ele seja despojado na maioria dos clientes de e-mail e alguns filtros de spam podem detectá-lo como código malicioso.
  • Evite o Microsoft Office como a peste 
    O HTML gerado quase garantirá problemas. Além disso, quando você copiar e colar do Office, você estará colando em sua formatação e provavelmente terá problemas de design. 
Tem mais dúvidas? Envie uma solicitação