Melhores práticas de e-mail

Com a multiplicidade de combinações de cliente de e-mail, navegador e plataforma, não é possível fazer suas mensagens parecerem iguais para todos os destinatários. No entanto, se você aderir a essas melhores práticas comprovadas, será possível codificar para um padrão amplamente compatível para renderização consistentemente confiável.

Tecnologias baseadas na web a serem evitadas

Para obter melhores resultados, evite as ferramentas e tecnologias a seguir. Elas não são suportadas e podem fazer seu e-mail ser bloqueado dos destinatários.

Layouts baseados em CSS que dependem de tags DIV e de posicionamento
Linguagens de Script
A presença de qualquer código de linguagem de script é quase sempre sinalizada como potencialmente maliciosa e leva sua mensagem a ser mantida fora das caixas de entrada por qualquer filtro de spam respeitável.
Formulários
Os formulários devem ser hospedados em seu website ou como uma página inicial no Acoustic Campaign onde podem ser vinculados a partir de seus e-mails.

A Definição do tipo de documento (DTD)

Na parte superior de seu código HTML, inclua a definição do tipo de documento ou DTD. O DTD define a especificação de linguagem de marcações que é usada e determina como o navegador ou o cliente de e-mail interpreta e renderiza o HTML. Alguns clientes de e-mail podem remover o DTD, mas ele deve ser incluído durante o desenvolvimento para validação de código.

O e-mail HTML pode ser codificado com segurança como HTML 4.01 Transitional ou XHTML 1.0 Transitional. O HTML 4.01 Transitional é recomendado porque ele tem menos requisitos de codificação que o XHTML 1.0 Transitional.

O XHTML 1.0 Transitional suporta toda a especificação HTML 4.01 Transitional. Ele também requer que todas as tags e os atributos estejam em minúsculas e que todas as tags sejam encerradas adequadamente. As tags que não têm um elemento de fechamento separado, como a tag   em HTML 4.01, requerem um espaço de fechamento e barra em XHTML. Por exemplo:  .

O exemplo a seguir mostra o código para os respectivos DTDs. Selecione um dos DTDs para incluir antes da tag HTML de abertura.


   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Codificação de Caracteres

No topo de seu código HTML, defina a codificação de caracteres. A codificação de caracteres determina quais caracteres podem ser exibidos em sua mensagem. Há dois tipos de codificação de caracteres:

ISO-8859-1 (ASCII)
utf-8

O American Standard Code for Information Interchange (ASCII) é um padrão de codificação de caracteres com base no alfabeto inglês. Ele é o conjunto de caracteres padrão usado em comunicações digitais americanas. O conjunto de caracteres ASCII é representado na codificação de caracteres da Europa Ocidental, que é definido em HTML como:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Para e-mails que consistem em caracteres do idioma não inglês, use o conjunto de caracteres UTF-8 porque ele suporta todos os idiomas. Por exemplo, se sua mensagem requer o conjunto de caracteres chinês, deve-se usar o conjunto de caracteres UTF-8, que é definido em HTML como:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

UTF-8 está se tornando a codificação de caracteres dominante da web com muitas organizações de padrões de Internet que requerem suporte UTF-8 completo em programas de e-mail. Também está cada vez mais se tornando a codificação padrão para sistemas operacionais, linguagens de programação, aplicativos e APIs. Na realidade, o UTF-8 pode ser usado para e-mails em inglês porque ele também suporta o conjunto de caracteres ASCII inteiro, bem como caracteres internacionais. Ele também suporta símbolos como ® e © sem qualquer conversão HTML necessária.

Folhas de estilo em cascata

As folhas de estilo em cascata (CSS) são usadas para codificar os elementos de apresentação na web. Há três maneiras diferentes de incluir CSS:

O CSS externo aponta para um arquivo de folha de estilo hospedado externamente. O CSS externo não é suportado.
O CSS integrado é o código definido no topo do código HTML. O CSS integrado é pouco suportado em clientes de e-mail de área de trabalho.
O CSS sequencial é definido onde necessário, em todo o documento. O CSS sequencial é a única opção confiável para definir o estilo do seu conteúdo de e-mail.

A lista a seguir de propriedades de CSS sequencial é suportada de forma consistente entre os principais clientes de e-mail. As propriedades suportadas são mais limitadas para definições básicas relacionadas à fonte. Não há propriedades de margem, de preenchimento ou de posicionamento.

font-family
font-size
peso da fonte
color, que é usado para definir as cores do link
decoração do texto
display, que é usado em tags de imagem para corrigir um erro no Gmail e Outlook.com.

Por Exemplo:

<TD style="font-family:arial,helv,sans-serif;font-size:12px;color:#ff0000;">Sample text.</TD>

Não use valores curtos para CSS. Por exemplo, use #FFFFFF, não #FFF.

Não use os estilos de lista porque eles não são suportados em vários clientes.

Há duas exceções em que o CSS integrado pode ser usado efetivamente:

Como correções para erros conhecidos em clientes de e-mail que não removem CSS integrado
Consultas de mídia CSS3 para definir estilo de conteúdo especificamente para dispositivos móveis

Caracteres Especiais

A tabela a seguir ilustra os caracteres especiais que podem requerer atenção especial quando são usados em e-mail. Esses caracteres não podem ser digitados diretamente em sua mensagem e podem ser problemáticos, sendo exibidos como blocos ou pontos de interrogação.

Descrição	Caractere	Entidade HTML	Equivalente a ASCII
Direitos Autorais	©	©	(C)
Marca registrada	®	®	(R)
Marca	™	™	(TM)
Traço	–	–	–
Travessão	—	—	—
Reticências	…	…	…
Apóstrofo	'	’	'
Abrir aspas	«	“	«
Fechar aspas	»	”	»

Se você usar esses caracteres em seu e-mail, substitua-os pela entidade HTML (em código HTML) ou os equivalentes ASCII (no conteúdo de texto). É uma prática comum usar os equivalentes ASCII para os caracteres de apóstrofo, aspas, travessão, traço e reticências em seu HTML, embora as entidades HTML sejam os caracteres tipograficamente corretos.

Considere configurar as opções de autoformatação e autocorreção em seu aplicativo de processamento de texto para usar os equivalentes ASCII desses caracteres no lugar.

Tags de comentário

Comentários são ótimos para identificar ou explicar código-fonte. Os comentários podem ser usados com segurança, mas somente se eles iniciam e terminam na mesma linha. Não deve haver nenhuma quebra fixa entre o início do comentário e as tags de finalização.

Se você comentar seções de seu código, remova qualquer conteúdo que não deseja que seja exibido antes de enviar. O AOL Mail exibe o conteúdo que foi comentado se a marcação de comentário abranger várias linhas.

Links de endereço de e-mail

Os endereços de e-mail que aparecem em mensagens são geralmente convertidos em links. Se você deseja reter o controle da aparência de sua mensagem, codifique os endereços de e-mail como links mailto. Em seguida, é possível aplicar um estilo de cor ao link e torná-lo consistente com o resto de seu design. Aplique esse link às sequências de personalização de e-mail também. Por exemplo:

<a href="mailto:%%email%%" style="color:#ff0000">%%email%%</a>

Problemas de espaçamento

Não use estilos de preenchimento ou de margem para controlar o espaçamento em sua mensagem HTML porque esses estilos produzem resultados mistos entre a maioria dos clientes de e-mail.

Yahoo! Mail não manipula espaçamento entre tags  da forma esperada. Em vez de incluir uma linha de espaço em branco entre parágrafos, ele inclui somente uma quebra de linha (tag  ). Em vez de usar as tags , use duas tags de quebra de linha ou células de tabela para espaçamento de conteúdo consistente.

Mais Informações

Para obter mais informações, consulte estes websites: