Página Inicial

quarta-feira, 6 de julho de 2011

Como Fazer um Email marketing em HTML pelo Photoshop


A criação de uma arte para envio de uma campanha de email marketing pode ser feita de várias formas, tem pessoas que enviam emails somente com textos, outros colam uma imagem no corpo do email ou até mesmo a envia em anexo, tem as campanhas enviadas em HTML, podendo ser mescladas entre imagem e texto ou somente em imagem, mas tudo por HTML.

Enviar as campanhas por HTML é uma das melhores formas para aumentar a taxa de abertura dos emails, pois facilita para seu email não ser considerado SPAM, e também te permite fazer um email visualmente mais bonito sem se preocupar com o tamanho das imagens, uma vez que a imagem estará em um servidor e não no corpo do email, o que ajuda a aumentar a taxa de cliques, assim, nesse artigo decidi falar como fazer um email marketing em HTML usando o Photoshop.

Segue os passos para criação, lembrando que se você não é bom nessa área contrate alguém que seja ou se especialize, mas quando digo contratar, não me refiro a contratar o "primo" ou "sobrinho" para fazer, a não ser que ele seja um profissional da área.

Cursos 24 Horas

Cursos Online


Vamos aos passos:

1 - Definir o tamanho e o formato do email


Esse é um ponto importante por mais simples que parece, pois você deverá definir o tamanho do email marketing, mas sempre pensando que essa imagem será vista por pessoas que usam diferentes tipos de computadores e com telas de tamanhos variados, o interessante é usar um tamanho maximo de 600 px de largura  para que não dê barra de rolagem.

2 - Criar o conteúdo do email


Essa etapa deve ser feita por quem entende da ferramenta photoshop e seja criativo para se ter um bom resultado. Abaixo um imagem da arte que criamos para ilustrar (somente para ilustração e não foi feita pensando no design rss) 

conteúdo do email


3 - Cortar as imagens do email


Após feito a arte do email você deverá cortá-la. para depois inserirmos um hiperlink em cada imagem. Nessa  fase você poderá direcionar cada parte do email para uma landing page, o que deve ser feito corretamente para não prejudicar toda a campanha, pois se, por exemplo, em uma parte do email estiver a imagem de um Celular e quando a pessoa clicar ser direcionada para uma página onde se vende TV provavelmente ele não irá procurar o celular que queria. As pessoas querem cada vez mais informações rápidas e que as ajudem a encontrar o que estão buscando. No exemplo fizemos dois cortes, conforme imagem abaixo:

Cortar as imagens do email


Obs: Mesmo que toda a imagem seja direcionada para uma mesma landing page, o recomendável e que faça pelo menos um corte  para para diminuir o tempo de carregamento do email quando aberto e para seu email não ser barrado pelas ferramentas anti-spam.

4 - Editar as imagens, inserir a url e a tag alt


Clicando com o botão direito em cada imagem cortada você deverá clicar em Edit slice options para editar o código das imagens.

Editar imagens


Agora em cada corte feito devemos inserir a url de destino, tag alt do email, a forma de como será aberta a imagem. Assim, é só preencher os campos desejados, como name, url destino (ao clicar na imagem), target - se você colocar _blank, quando a pessoa clicar no email irá abrir uma nova página e se ficar em branco será aberto na mesma página -  a mensagem do texto e a alt. Como no exemplo:

inserir a url e a tag alt

5 - Salvar a imagem para web


Agora é a hora de salvar a imagem para web. Basta ir em File e clicar em save for web & devices, onde aparecerá a forma como você irá salvar sua imagem em HTML, ai é só escolher a extensão a ser salva.

Salvar a imagem para web


Dê nome para pasta e escolha o formato HTML and images. Salve e está pronto sua imagen em HTML, agora é só colocar essa pasta no servidor para que quando as pessoas, de qualquer local (computador), receber seu email marketing consiga ver a imagem. 

Salvar a imagem para web

6 - Código gerado e imagem no servidor


Note que no código de exemplo a imagem é direcionada para a pasta “images/Teste-.jpg” que está no seu computador local, por isso a necesseidade de se colocar a imagem em um servidor.


<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext';  return true;"
onmouseout="window.status='';  return true;">
<img src="images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text';  return true;"
onmouseout="window.status='';  return true;">
<img src="images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Para que sua imagem seja vista de qualquer lugar você deverá hospedá-la em servidor, se quiser fazer um teste basta cadastrar em um servidor gratuito (atenção: após os testes o interessante é não usar servidores gratuitos e sim contratar um serviço de hospedagem ou uma empresa que presta esse serviço) e enviar as imagens para essa pasta, depois é só fazer uma mudança no código e chamar para o endereço onde está sua imagem. O que está em amarelo foi o que tive que inserir no código, outra forma seria ter usado uma tag para chamar a url. O código do email de exemplo já no servidor será:



<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-1) -->
<table id="Table_01" width="576" height="808" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext';  return true;"
onmouseout="window.status='';  return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a></td>
</tr>
<tr>
<td>
<a href="http://venderon.blogspot.com" target="Teste2target"
onmouseover="window.status='teste2text';  return true;"
onmouseout="window.status='';  return true;">
<img src="http://www.marketing.voudeargohost.net/images/teste2.jpg" width="576" height="320" border="0" alt="teste3alt"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

7 – Monitorar a campanha pelo Google Analytics



Se quiser que a camanha seja monitorada pelo Google analytics basta ir para o endereço do criador de url do Google e criar um url com o código de acompanhamento. Segue os campos necessários de preenchimento:

Monitorar a campanha pelo Google Analytics


Após criado é só alterar a url no código criado trocando pela url que foi gerada no gerador do Google Analytics. No exemplo as mudanças foram no endereço http://venderon.blogspot.com como segue abaixo:

O que era assim:


<a href="http://venderon.blogspot.com" target="Testetarget"
onmouseover="window.status='Testetext';  return true;"
onmouseout="window.status='';  return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>

Ficou assim:



<a href="http://venderon.blogspot.com/?utm_source=boletim&utm_medium=cpc&utm_campaign=teste" target="Testetarget"
onmouseover="window.status='Testetext';  return true;"
onmouseout="window.status='';  return true;">
<img src="http://www.marketing.voudeargohost.net/images/Teste.jpg" width="576" height="488" border="0" alt="Testealt"></a>

20 comentários:

  1. Enquanto voce pensa no seu negócio, a ViaMobile pensa no seu E-mail Marketing, por isso incluimos em nossos planos de E-mail Marketing a dedicação total para transformar seu design* em um E-mail profissional, com as melhores pontuações nos teste anti-spam, tudo compartilhado com as principais redes sociais. Conheça-nos www.viamobile.com.br

    ResponderExcluir
    Respostas
    1. Pior que entar pegar o gancho de outra pessoa para fazer propaganda de seu negócio é fazer isso de maneira incorreta. coloquei esse endereço na barra do navegador e não abre serviço nenhum de marketing. Inove cabelo e estética

      Excluir
    2. Com certeza, se a intenção do cara era vender o peixe dele, ele jogou as chances fora, o site não apresenta o produto que ele tá vendendo, e não tem um padrão de busca...
      Fecha a empresa, e volte a estudar!

      Excluir
  2. muitooo bom, obrigado!!

    ResponderExcluir
  3. cara, parabéns, bem direto e simples, deu certo aqui, aba

    ResponderExcluir
  4. Dicas muito boas, assim fica fácil pois eh soh montar esse html numa ferramenta tipo o sistema da Target Box (www.targetbox.com.br(, que permite colar esse html.

    Valew!

    Moreno

    ResponderExcluir
  5. Olá!
    Fiz exatamente com descreveu acima, porém meu email marketing ficou com a arte quebrada onde havia utilizado a Slice Tool no Photoshop...
    O que devo fazer, por gentileza.
    Agradeço desde já,

    ResponderExcluir
    Respostas
    1. Olá, se for o que estou pensando, neste link tem a solução para o seu caso: http://www.targetbox.com.br/page/tutoriais/como-evitar-que-o-gmail-adicione-margem-e-borda-nas-imagens

      Minhas peças de email marketing tinham este "espaço" entre as imagens no Gmail e no Hotmail, e consegui resolver após aplicar o conteúdo do link citado.

      Espero que o ajude!!

      Saudações

      Miguel

      Excluir
  6. Uma vez que a imagem é gerada com o link, de onde você tirou o código HTML?

    ResponderExcluir
  7. cheguei até o passo em que tem que linkar as imagens para o servidor gratuito. Quando salvo o html no bloco de notas linkando para as imagens, as imagens não abrem corretamente. Será que você poderia me ajudar a ver o que estaria dando errado?

    ResponderExcluir
  8. Usando as dicas daqui, comecei rapidamente a ver os resultados na minha loja virtual: www.delbox.com.br

    ResponderExcluir
  9. Oi, tudo bem?

    Não compreendí muito bem qual é a vantagem de fazer isto e não utilizar uma ferramenta de email marketing.

    Eu encontrei este passo a passo para fazer com a Mailchimp e achei facil, tem templates para escolher e tudo mais:
    http://www.nuvemshop.com.br/blog/como-criar-um-email-marketing-via-mailchimp/

    Tal vez não compreendi bem o artigo :S

    Abraços,
    José

    ResponderExcluir
  10. Depois de criado todo o código pelo próprio Photoshop, e ter inserido os links como faço para enviar o e-mail marketing de maneira a não sair o código e sim a imagem?

    ResponderExcluir
  11. Olá José,

    Obrigado pelo comentário, esse post ensina vc a criar o seu próprio template no formato que vc desejar e não os pré prontos das ferramentas. Agora para quem os templates da ferramenta servir ótimo, fica mais fácil ainda. Conheço a ferramenta do mail chimp, é uma boa para envio e gerenciamento das campanhas de email marketing.

    Abraços,

    Ricardo Nazar

    ResponderExcluir
  12. Olá Miguel,

    Obrigado pelo comentário. Para que apareça a imagem do seu email marketing ao invés do código vc deverá inserir a imagem em um servidor, para isso siga o passo seis do post acima.

    abraços,

    Ricardo Nazar

    ResponderExcluir
  13. Obrigada pelo tutorial, porém faltou umas informações importantes pra quem tá começando. Primeiro, que versão do PS vc usa e o nome da ferramenta de corte de imagem, que é SLICE TOOL (K), na barra de ferramenta do lado esquerdo do programa. E também faltou como inserir a tag no e-mail depois que está pronto.

    ResponderExcluir
    Respostas
    1. Olá, parei justamente nesta etapa! depois de tudo pronto no Photoshop o que faço?

      Excluir
  14. Muito bom texto, me ajudou muito, parabéns!

    ResponderExcluir
  15. Olá, tudo bem?
    Eu trabalho com um Macbook Pro, e fiz a arte no Photoshop e fiz todo o processo para criar o html.
    Quando abro o AppleScript para colocar o endereço absoluto, não consigo salvar pois aparece o escrito:
    Erro de Sintaxe Um(a) “<” não pode ser colocado aqui.

    O que posso fazer para conseguir finalizar o trabalho?

    Obrigado!

    ResponderExcluir