Este artigo é quase uma continuação de um post mais antigo, intitulado Boas Práticas de E-mail Marketing. Após sua publicação, recebi algumas dúvidas quanto ao que seria, exatamente, um e-mail marketing em HTML. Por isso, primeiro, vamos definir o que é um e-mail sem formatação e um e-mail em HTML.

E-mail sem formatação é o tipo de e-mail a que estamos mais habituados: mensagens em texto puro que não requisita nenhuma informação do servidor (imagens, por exemplo) para ser elaborado. Você simplesmente escreve na tela de edição de mensagens e envia o e-mail. Ele chega para o destinatário também na forma de texto e sua aparência pode variar conforme a configuração da aplicação de e-mail de quem o recebeu.

E-mail em HTML é aquele que apresenta elementos da linguagem de hipertexto, como links e imagens que são exibidas diretamente no corpo do e-mail, sem estar em anexo à mensagem. Podemos exemplificar com aquelas enxurradas de e-mail que recebemos com promoção de assinatura de revistas, oferta de livros, aparelhos eletrônicos etc. Você abre a mensagem e, no corpo, pode ver imagens e textos diagramados de uma forma diferenciada, como se fosse um planfleto ou mesmo uma página da Web. É possível, ainda, utilizar CSS para formatar a aparência dos elementos.

Ao trabalhar com e-mail marketing, a grande maioria das empresas opta pelo e-mail em HTML, que confere maior liberdade de criação e a mensagem é, visualmente, mais atraente. É possível exibir logotipos, fotos de produtos, textos em fontes diferenciadas e distribuir os elementos da forma desejada na tela. Tudo isso sendo exibido diretamente no corpo da mensagem, e não como um anexo. Arquivos anexos aumentam sensivelmente o tamanho do e-mail, além de poderem ser barrados por algumas aplicações de e-mail, mesmo que sejam apenas imagens. Ao inserir imagens em um e-mail HTML, não inserimos o arquivo da imagem propriamente dito, mas sim, a tag HTML de imagem </img />, que fará referência ao arquivo do servidor. Portanto, para que você possa desenvolver um e-mail marketing em HTML utilizando todos os recursos visuais possíveis, é necessário possuir acesso a um disco virtual ou servidor web (se você possui um site ou domínio), que armazenará os arquivos de imagens.

Vamos ver, na prática, como construir um e-mail marketing em HTML. Como exemplo, vou criar um cartão que convide os usuários a visitarem o Blog da JullieJoe. Para isso, vou utilizar um software gráfico qualquer que me permita criar uma imagem. Utilizando o Adobe Illustrator (mas poderia ser também o Corel Draw, o Photoshop ou qualquer outro a que você esteja familiarizado), criei esta arte:

Para que um e-mail marketing seja visualizado corretamente na aplicação de email do cliente, pode-se trabalhar com: (X)HTML, CSS, JPEG, GIF estático e GIF animado. As aplicações de e-mail não interpretam conteúdo dinâmico (asp, php), flash ou javascript. Sobre o formato de imagem PNG, houve uma grande melhora nas novas versões de navegadores e de clientes de e-mail, que passaram a suportá-lo. Algumas versões mais antigas não conseguem exibir este formato, portanto, se não qusier arriscar, fique com o JPEG e o GIF.

Para que minha arte seja visualizada corretamente num e-mail, a transformei em imagem. Meu software permite que eu salve uma cópia otimizada para a web, ou seja, com 72 DPI de resolução e cores RGB, com a possibilidade de definir sua qualidade. Utilizei o formato GIF que, por possuir “apenas” 256 cores, mantém o tamanho do arquivo reduzido. E para que todos aqueles que receberem meu e-mail possam visualizar a imagem, preciso enviá-la para a Internet, armazenando o arquivo em um disco virtual ou dentro do servidor onde meu site está hospedado. É o mesmo processo de enviar os arquivos de um site para a web, de modo a disponibilizá-lo online.

Neste caso, vou utilizar o Gerenciador de Arquivos do Geocities, Yahoo, que é gratuito e basta ter uma conta no Yahoo para usar. Seguindo as instruções de upload via FTP do Geocities, enviei minha imagem, cujo endereço depois de enviada ao gerenciador é http://br.geocities.com/julliejoe2/banner.gif. Se você clicar neste link, poderá visualizar minha imagem. Para saber o endereço de sua imagem na Internet, basta clicar com o botão direito sobre o link Exibir, ao lado do nome do arquivo no Gerenciador do Geocities e clicar na opção Copiar atalho ou Copy Link Location, isso, após enviá-la para o disco virtual, claro. Guarde este endereço.

Agora, vamos começar a construção do e-mail. Vou utilizar o Outlook Express, que me permite inserir código HTML na edição de mensagens. O Microsoft Outlook não oferece esta opção. Para enviar uma mensagem de e-mail a partir do Outlook Express, é preciso que você tenha uma conta de e-mail configurada com seus respectivos POP3 e SMTP (endereços do servidor por onde as informações irão trafegar e chegar até os destinatários). Se você tem uma conta no Gmail, pode configurar seu programa de e-mail para receber e enviar mensagens. Para ver as instruções, acesse sua conta do Gmail e, no canto superior direito da tela, clique em Configurações e na aba Encaminhamento e POP. Nesta aba, há um link de instruções no item 3.

Outlook configurado, vamos compor a mensagem. Clique no botão Criar E-mail. Nesta tela de composição de mensagens que foi criada, veja que, na parte inferior da janela, existem 3 abas: Editar, Origem e Visualizar. Se você não vê nenhuma aba, clique em Exibir > Editar código-fonte para que elas apareçam. Para inserir nosso código HTML, vamos usar a aba Origem. Note que, nesta aba, já existe a estrutura básica de um documento HTML (clique na imagem para ampliar):

Vou acrescentar códigos para inserir a imagem de meu convite, deixá-lo centralizado na tela e com um link para meu blog. O código abaixo já está com a tag chamando a imagem do Gerenciador de Arquivos e com o link. Se quiser, copie este código e cole-o na aba Editar do Outlook Express, substituindo aquela estrutura básica exibida acima.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"></meta>
<meta content="MSHTML 6.00.2900.3020" name=GENERATOR></meta>
<style></style>
</head>
<body bgColor=#ffffff>

</body></html>


Depois, ao clicar na aba Editar, podemos ver a imagem exibida diretamente no corpo da mensagem, da forma como o usuário visualizará em seu e-mail. Este procedimento de inserir uma imagem através de código HTML no e-mail faz com que o tamanho da mensagem seja reduzido. Assim, você pode enviar a mensagem para diversos destinatários sem sobrecarregar o servidor, já que a imagem será carregada no momento em que o usuário abrir. E, assim, eu visualizo a imagem, que está sendo “baixada” lá do disco virtual:

Se você não tem familiaridade com a linguagem HTML, pode desenvolver sua mensagem em um editor como o Microsoft Frontpage ou o Dreamweaver. Eles têm interface amigável e, ao longo do desenvolvimento, geram o código do que foi criado através de simples cliques em botões. Selecione o código, copie e cole na aba Origem do Outlook Express.

E está pronto nosso e-mail em HTML! Basta inserir os destinatários na mensagem e enviar. Este foi um exemplo simples de e-mail formatado em HTML. Você pode construir layouts mais complexos e que utilizem outros recursos do HTML e do CSS. Apenas lembre-se das recomendações para o desenvolvimento de um bom e-mail marketing. Se você pretende enviar a mensagem para muitas pessoas, considere trabalhar com ferramentas próprias para e-mail marketing – que não o Outlook -, pois elas trazem também recursos para medir o impacto de sua campanha nos usuários: quantos abriram a mensagem, quantos clicaram, quais e-mails falharam etc.

Recapitulando, para o desenvolvimento do e-mail marketing, temos:

• um arquivo da arte original (neste caso, em Illustrator);
• um arquivo GIF da arte (gerado a partir do Illustrator mesmo);
• o envio da imagem para a Internet (disco virtual do Yahoo);
• a construção do código HTML utilizando o endereço da imagem na Web;
• inserção do código HTML no aplicativo de e-mail;
• envio da mensagem;

Espero que tenha ficado claro, mas, quaisquer dúvidas, estou à disposição!

Boa sorte e sucesso!