E-mail marketing em HTML

Este artigo é quase uma continuação do artigo anterior, 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 site do iMasters. 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 porta-arquivos do Yahoo, que é gratuito e basta ter uma conta no Yahoo para usar. Seguindo as instruções do porta-arquivos, fiz o upload de minha imagem, cujo endereço depois de enviada ao disco virtual é http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfnpx3FBIy93hbLi. 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 do nome do arquivo 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:

Vou acrescentar códigos para inserir a imagem de meu convite, deixá-lo centralizado na tela e com um link para o site do iMasters. O código abaixo já está com a tag chamando a imagem do disco virtual 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 content="MSHTML 6.00.2900.3020" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV style="text-align:center">
<a href="http://www.imasters.com.br" title="Este link abre o site do iMasters em uma janela de seu navegador">
<img src="http://us.f13.yahoofs.com/bc/45b0d469_114f2/bc/convite.gif?bfflPsFBmgNmhbLi" alt="Visite o iMasters!">
</a>
</DIV>
</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. Note que meu arquivo GIF original tem 30,1 Kb, mas ao inserir apenas a tag HTML chamando a imagem que está no disco virtual, minha mensagem fica com apenas 2 Kb, porque é composta apenas de código. 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 Illustraor);
  • 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!

Autor: Juliana Padron
Fonte
: http://www.imasters.com.br/

9 comentários sobre “E-mail marketing em HTML

  1. Olá Juliana tudo bom ?? Gostaria de saber porque qdo colo o código na aba editar! eu n consigo visualizar o meu texto c a figura!! Fiz todos os passos certinhos!!! e mesmo a sua figura qdo eu clico tbm da a mesma mensagem q a minha de erro! a partir da hora q preciso colar o codigo achei confuso pq na aba editar não há nada escrito!!

  2. ola como eu faço pra enviar pra um destinatario so!
    ex: pra nao ficar aquela lista enorme de emails!

    tipo enviar pra 50 pessoas!mas em cada email xegar como so fosse enviado pra essa tal pessoa!!!

    obrigado

  3. ola
    eu queria o codigo para mi enviar o conteudo de una caixa de texto para o meu email
    tipo em um site o contato com lo adiministrador , las personas digiraõ as perguntas. igual a q estiy lhe fazendo e vc reciebe em su email.
    qual es lo cogigo para fazer isso ??????

  4. OPA entao, estou com sérios problemas e acho que so vc pode me ajudar , estou arrumando minha AREA de emails meu grande problema é que mesmo fazendo todos os passos aqui citados o ANEXO insiste em aparecer, ae mudei algumas cofiguracoes direto do painel “”HORD”” OBA consegui que o anexo sumice e apezar de fazer testes de envio para 3 emails particulares gmail/hotmail/yahoo fiz alguns outros testes para conhecidos DESASTRE realmente o ANEXO nao aparece mais a imagem TBM nao aparece rsrsrs…… continuei mexendo nas configuracoes DESASTRE os anexos voltaram , ate para meus emails pessoais… bom no fim das contas nao sei oq fazer ,, nao tenho prolemas em enviar a imagem para a NET ate pensei que por meu programa de hospedagem ser em PHP isso poderia influenciar ae fiz o upload da imagem para o porta arqivos YAHOO mas deu no mesmo ,,, acredito que TALVEZ o problema seja nos caminhos e CODs que as mensagens devem ser direcionadas, mais nao entendo nada disso ….. caso possa me ajudar ou indicar alguem que possa me ajudar estou TOTALMENTE aberto a negociacoes…..GRATO

  5. Olá, tudo certo com a edição só que quando recebo o e-mail ele vem com tamanho muito superior, por ex: uma imagem que no site tem 139 kb, chega no meu e-mail com 279kb?
    e também fica em volta da imagem um quadrado azul, gostaria de tirá-lo.
    como faço?

  6. Oi, Juliana, obrigada por disponibilizar tanto conteúdo útil e interessante. Tenho uma dúvida: sigo os passos que vc indicou, mas a imagem no e-mail final aparece muito pequena. Eu estou fazendo e-mails em tamanho A4 no corel e salvando em gif ou jpeg.
    Obrigada!
    Angela

    • ângela…
      tenta colocar atributos de tamanho na imagem, e ao invés de usar div usa tr e td.
      dentro do source da imagem, usa width (largura) e height (altura).

      detalhe: interessante usar tamanho tb na tabela e preferencialmente na mesma largura da imagem (width)

      da-lhe
      ——-

      alexandre…
      no source da imagem, usa o atributo border=”0″.

      e da-lhe

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s