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 (CTRs), 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.

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 máximo 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 necessidade 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 campanha 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>


Para melhorar seu desempenho em email marketing leia esses artigos:

5 passos a serem seguidos para o melhor desempenho do email marketing


E ai gostou do artigo acima deixe seu comentário de suas experiências!!


O que são Backlinks e como eles Ajudam o Site da sua Empresa?

Backlinks são os links que redirecionam para uma página da web em seu site a partir de outro site.  Esses backlinks são um dos indicadores m...