Como criar corretamente Newsletters e e-mail Marketing

Hoje vamos orientar as melhores práticas no desenvolvimento e montagem do que alguns chamam de “e-mail marketing“, outros de “newsletter“, “mala direta” e os mais incrédulos chamam de “SPAM“.

O que são melhores práticas? Porque preciso saber delas? Bem, a resposta é simples, se você ou sua agência tem a intenção de divulgar um ou vários produtos ou fazer algum informativo de forma justa e “legal”, então é necessário seguir algumas regrinhas. Isso é fundamental para que sua newsletter não chegue quebrada, não chegue feia na caixa de e-mail do cliente, e principalmente para ela não caír em caixa de SPAM dos usuários. A política de filtragem de SPAMs hoje em dia é muito severa, e caso você não faça a coisa bem feita, 70% dos e-mails que você enviar certamente não serão lidos, o que significa pouco retorno e muito dinheiro jogado fora.

Baixar exemplo de e-mail. Este exemplo ajudará a entender algumas técnicas que escrevemos aqui.

Vamos começar!

CONSIDERAÇÕES GERAIS:

Procurar iniciar o e-mail sempre com um título e um subtítulo escritos de forma padrão, fora da tabela principal ou antes de qualquer imagem do e-mail, pois em alguns servidores de e-mail como GMAIL, ele coloca esse texto como introdução na caixa de entrada do e-mail, sendo assim, o usuário poderá identificar do que se trata o e-mail antes mesmo de abri-lo.

montar corretamente email marketing newsletter tecnicas boas praticas

– Usar HTML 4, pois o e-mail precisa ser o mais simples possível. Usar tabelas sempre!

– HTML no máximo: 10kb (preferencialmente 10kb).

– Imagens no máximo: 45kb (preferencialmente 20kb).

– HTML + Imagens: 100kb (preferencialmente 30kb).

– Zerar o espaçamentos do <body> com os atributos: marginheight=”0″ marginwidth=”0″ rightmargin=”0″ leftmargin=”0″.
Ex.: <body marginheight=”0″ marginwidth=”0″ rightmargin=”0″ leftmargin=”0″ bgcolor=”#FFFFFF”>.

– Largura da peça: 550px a 600px (preferencialmente 550px, para encaixar bem em Pads).

– Deixe a altura o menor possível para evitar a rolagem.

– Usar CSS inline, sempre.

– Não utilizar CSS “shorthand” (abreviações).
Ex: em vez de “margin:0 0 0 5px”; utilize “margin-top:0; margin-right:0; margin-bottom:0; margin-left:0;” (o hotmail, por exemplo, ignora as shorthands de margin e padding).

– Evitar usar tags “<span>”.

– Não usar os estilos “background” e “background-image” no CSS, no máximo bgcolor=”valor” para definir a cor de fundo do body, tabela e das células, e o estilo “background-color” pra definir a cor da DIV que vai em volta da tabela, como fizemos no exemplo.

– Na tag “<a>” (de link) use sempre o atributo target=”_blank”, para forçar a abertura do conteúdo em uma nova janela.

– Quando os textos forem decorativos, tiverem background, ou forem escritos em fontes que não são de sistema, então você pode cortá-los como imagem e colocar o equivalente textual no atributo ALT da imagem.

USE SEMPRE TABELAS:

Tabelas são definidas pela tag “<table>”. A tabela é dividida em linhas (com a tag “<tr>”), e cada linha e dividida em células de dados (colunas) (com a tag “<td>”).

A tag “<td>” pode ter texto, links, imagens, listas, formulários, outras tabelas, etc.

SEMPRE DEFINIR LARGURA (WIDTH) e ALTURA (HEIGHT),quando houver uma imagem dentro da celula. Quando o conteudo for texto com tamanho variável, defina sempre a largura da “<td>”, pois a altura poderá aumentar ou diminuir com o tamanho do texto.

Exemplo:

<table cellpadding=”0″ cellspacing=”0″ border=”0″ width=”600″ height=”1000″ align=”center” bgcolor=”FF0″>
<tr>
<td>Linha 1, coluna 1</td>
<td>Linha 1, coluna 2</td>
</tr>
<tr>
<td>Linha 2, coluna 1</td>
<td>Linha 2, coluna 2</td>
</tr>
<tr>
<td colspan=”2″>&nbsp;</td>
</tr>
</table>

– Os espaçamentos horizontais podem ser conseguidos através da criação de “<tr>” e “<td>” vazias com “&nbsp;” dentro, que significa espaço, como na representação acima.

Legenda dos atributos:

cellpadding=”0″ – o cellpadding aumenta o espaço entre a parede da célula e o conteúdo dela (mantenha sempre 0, para não quebrar seu layout).
cellspacing=”0″ – o cellspacing aumenta o espaço entre as células (mantenha sempre 0, para não quebrar seu layout).
border=”0″ – define a espessura da borda da célula (mantenha sempre 0, para não quebrar seu layout).
width=”valor” – especifica a largura da sua tabela.
height=”valor” – especifica a altura da sua tabela.
align=”center” – alinha a tabela no centro na página.

Atributos – colspan e rowspan

Colspan: defini o número de colunas que quero juntar
Rowspan: defini o número de linhas que quero juntar
Esse é um atributo da <td>
“colspan = número de colunas”
“rowspan = número de linhas”

IMAGENS:

SEMPRE DEFINIR LARGURA (WIDTH) e ALTURA (HEIGHT) NA IMAGEM e em todas as “<td>” que tiverem tamanhos definidos.

– Sempre colocar style=display:block” e “border=0” em todas as imagens. Isso evitará que os servidores de e-mails adicionem uma margem na imagem, um espaço em branco em volta da imagem, além de retirar a borda padrão da imagem quando ela tá dentro de um link. Mas definir a altrua e largura da imagem também é importante.
– Sempre definir os atributos “alt”,  “height” e “width” na tag “<img>”.
– Sempre utilize o caminho “absoluto” para as imagens, ou seja, ao inves de usar <img src= “images/nome_da_imagem.jpg”>, utilize o caminho da imagem completo desta maneira:
<img src= “http://www.sabecomofazer.com.br/pasta_do_email/images/nome_da_imagem.jpg“>.
– Usar mapeamento de imagens funciona muito bem, mas não deixe de aplicar os atributos orientados acima. O próprio dreamweaver auxilia de forma prática no mapeamento de imagens. A tag “<map>” (gerada no mapeamento) é usada para definir uma relação entre a imagem e a área mapeada. A área mapeada de uma imagem é uma área clicável, que funciona como um link, e pode ter várias formas, até mesmo desenhos complexos através da ligação de pontos.
– O elemento <map> contém um X numeros de <area>, cada tag dessa representa uma áreas de click desenhada na imagem mapeada.
– A tag <area> deve conter: shape=”forma” coords=”0,0,0,0″ href=”http://www.sabecomofazer.com.br” alt=”Nome do link” target=”_blank” style=”outline:none;”.
Ex.:
<map name=”Map”>
<area shape=”rect” coords=”53,32,165,83″ href=”http://www.sabecomofazer.com.br” alt=”Acesse o blog Sabe Como Fazer”>
</map>

Legenda:
shape=”forma” – define se a área do click será redonda, quadrada ou desenho complexo através da ligação de pontos
coords=”0,0,0,0″ – coordenadas dos pontos da área.
href=”link” –  link para página. Nunca esquecer de colocar “http://” antes de cada link.
style=”outline:none;” – faz com que nao fique uma linha envolta da área do click.

LINKS:

– Sempre utilize os seguintes atributos em um link:    style=”color:#XXXX; outline:none; text-decoration:none;”, pois dessa maneira você consegue evitar que o link apareça diferente e/ou estranho na caixa de e-mail do usuário.
– Para evitar que o e-mails escritos no texto e/ou telefones apareçam em azul sublinhado no Gmail, coloque sempre esse tipo de informação como link (tag <a>) e defina os estilos inline “color” e “text-decoration:none” e coloque “#” dentro do atributo “href” do link, para que ele não possua click para nenhum lugar, ou em caso de e-mails, você pode usar o “mailto” como no exemplo abaixo.
EX.: <a href=”mailto:contato@sabecomofazer.com.br” title=”contato@sabecomofazer.com.brstyle=”color:#XXXX; outline:none; text-decoration:none;>contato@sabecomofazer.com.br</a>

DICAS:

– Fazer um envio teste para os principais servidores de email’s da lista de contatos que será enviada.

– Após teste de envio para servidores diferentes, verificar quais cairam no spam, lixo eletrônico, caixa de entrada, fazer um pequeno relatório e enviar para as pessoas responsáveis pelo processo de envio da newsletter em questão. Com possíveis alterações que melhorem a pontuação do email como spam pelo servidor de email.

– Servidores: BOL, TERRA e UOL, não recebem emails disparados pois requerem captcha (caixa de diálogo pedindo validação do email), ou seja, não será enviado para estes emails. Fazer uma listas dos emails destes servidores e enviar aos responsáveis pelo processo da news para ser enviado ao cliente, que vai tomar a decisão de não enviar, ou contratar alguém para entrar em todos os e-mails de respostas e digitar captcha por captcha.

PALAVRAS NO CONTEÚDO, LINK, ASSUNTO E REMETENTES QUE DEVEM SER EVITADAS:

Evite palavras apelativas na construção da mensagem ou na descrição das imagens. Por exemplo: Cursos, Gratuito, Não perca, Aproveita, Últimas vagas, Promoção, Publicidade, Marketing, Compra, Venda, Negócios, R$, Chance, Valores, Acesse aqui, Confira, Palestra, Clique aqui, Financiamento, Oferta, Balada, Ganhe, Dia dos Pais, Dia das Mães, Feliz Natal, Feliz Ano Novo, Dia dos Namorados, Projeto, Ecommerce, Inscrições, Promocional, Free, Noreplay, Carnaval, Férias, Comercial, Lançamento, Convite, Eventos, News, Newsletter, VIP, Campanha, OFF, entre outras.

ASSUNTO:

Limite o assunto a não mais que 50 caracteres. Evite termos de baixa reputação (promoção, imperdível, crédito, etc), não use acentos gráficos (!, ?, %) e nunca, nunca use um assunto em caixa alta. Dê uma idéia geral em poucas letras. Se for uma promoção, dê o nome da promoção, sem acentos e evite as expressões fiscalizadas pelos programas anti-spam (divulgue, consulte-nos, frete grátis) além das já citadas.

Bem, este é nosso apanhado, são muitas regras a serem seguidas, mas com o tempo e trabalho contínuo, você acaba se acostumando e absorvendo bem essas técnicas.

Gostaria de agradecer a Dinamize por nos ter enviado algumas informações importantes que eles já utilizam em seu sistema de e-mail.

Caso seu servidor de hospedagem possua o painel de controle cPanel e você gostaria de aprender como configurar o SPF no cPanel, acesse aqui.

13 comentários em “Como criar corretamente Newsletters e e-mail Marketing

  • 5 de julho de 2012 em 14:42
    Permalink

    Parabéns!
    Procurei por horas artigos sobre boas práticas para poder enviar referências e este pipocou com louvor e qualidade.
    Bem completo e detalhado.
    Dicas:
    – Em imagens que se tornarão links, colocar “border=’0′” pois em leitores baseados em IEs antigos fica uma borda azul inescrupulosa.
    – Mapeamento (map) serve, mas não é muito aconselhável. Quando você insere o link na imagem, você pode inserir o “alt” direto no link. Para leitores de tela é essencial. (Eu sei que map faz isso, mas não é tão perfeito o funcionamento em alguns leitores)

    Eu gostaria de pedir algumas referências sobre esses pontos específicos, como link onde a informação está disposta, etc.

    OBS: Uma coisa que é muito raro encontrar em artigos sobre e-mail marketing (eu não encontrei em nenhum), é a disposição e a hierarquia da informação. Qual a primeira coisa que o usuário final baterá o olho? É uma faixa de 200x400px que deve conter no mínimo a marca do remetente, e do que se trata.

    Parabéns novamente!

    Resposta
    • 5 de julho de 2012 em 19:32
      Permalink

      Fala Tales,

      Obrigado pelo elogio cara, a idéia era ajudar mesmo a galera, pois é muito difícil encontrar informações boas sobre isso por aí. Eu não tenho links de referências para te passar, pois 90% do que eu escrevi, relacionado a montagem e estrutura, foi baseado nas coisas que eu já sabia e me ferrei muito pra aprender. Eu trabalho com front-end a mais de 10 anos (comecei bem cedo), e já tive que montar muitos e-mails. Esse texto foi baseado num documento, que minha estagiária aqui da agência no qual eu trabalho escreveu, englobando um apanhado de informações que eu ia citando pra ela. Além das coisas que ela anotou conforme ela ia aprendendo, montando, testando, errando e consertando.

      Até existem um ou outro site que explica alguma coisa, como o iMasters, Mestre SEO e tals, mas nada que sirva de referência como esse documento que montei aqui.

      Qualquer sugestão, opinião e dicas, só falar que eu acrescento nesse documento. Tentei criar algo que realmente ajude!

      Abraços.

      Resposta
  • 14 de setembro de 2012 em 9:45
    Permalink

    Sensacional!
    Só tenho uma dúvida, como faço para as imagens dos newsletters não ficarem com as imagens separadas? Já tentei de várias formas: style=display:block” e style=”line-height:0px”. Qual seria o correto para funcionar no outlook ?
    Agradeço!

    Resposta
    • 15 de setembro de 2012 em 14:26
      Permalink

      Oi, Felipe. No Outlook normalmente não aparece com essa separação. O maior problema dese tipo ocorre no Gmail. Para isso usamos o style=”display:block” e a imagem para de ficar cortada.
      Espero ter ajudado. :)

      Resposta
      • 19 de fevereiro de 2013 em 22:02
        Permalink

        Então pessoal, nesse post nós ajudamos a resolver esse problema, quando orientamos a colocar display:block nas imagens, entretanto eu havia esquecido de sinalizar o porque dessa necessidade, ou seja, quem lia o texto não sabia que o display:block era pra evitar esse problema, mas graças aos comentários de vocês, eu alterei isso lá. Obrigado.

        Resposta
  • 8 de março de 2013 em 16:15
    Permalink

    Olá, achei muito boas as dicas sobre como fazer a newsletter. Mas estou com um pequeno problema: como criar a opção para cancelar a assinatura? Será que o serviço que eu contratar para dispará-la se encarrega disso?

    Obrigado!

    Resposta
    • 8 de março de 2013 em 16:29
      Permalink

      Fala Gabriel! Seguinte… Quem te dá esse link é realmente a empresa que você contrata pra disparar. Geralmente pode ser de duas maneiras, ou eles te dão o HTML do link pronto e você pode pegar esse HTML (ou somente o href do link) e colocar onde você quiser na sua newsletter, ou você tem uma opção que você marca e eles jogam automaticamente um link (sem customização) pro usuário cncelar a assinatura. A Dinamize por exemplo, te da as duas opções.

      Resposta
      • 8 de março de 2013 em 20:41
        Permalink

        Que bom saber.
        Obrigado pela resposta, pois tava aqui quebrando a cabeça em meu parco conhecimento, hehe.
        Abraço!

        Resposta
  • 15 de março de 2013 em 11:40
    Permalink

    Bom Dia, Herick.
    Tenho uma News pronta, mas como meus conhecimento são limitados, meu anuncio está muito pesado e não sei como deixar tudo no padrão (leve), Se mandar minha News para você você deixaria dentro dos padrões, qual seria o valor deste serviço.?
    Aguardo, Obrigado. Att: Joni

    Resposta
  • 19 de março de 2013 em 18:55
    Permalink

    sou aprendiz em newseltter e html, o meu ficou faltando so as imagens aparecerem no outlook, pesquisei sobre caminho absoluto e mesmo assim ainda nao consgui resolver isso.
    esse seria o caminho relativo minha imagem no dreamweaver, gostaria saber como ficaria no outlook o caminho absoluto?
    Aguardo, att.

    Resposta
    • 21 de março de 2013 em 16:49
      Permalink

      Olá Cleider,

      Desculpa a demora na resposta, o caminho relativo, é aquele em que o objeto está relacionado, por exemplo “../images/nomedaimagem.jpg” e o caminho absoluto é “http://www.seudominio.com.br/images/nomedaimagem.jpg”. A primeira coisa que você precisa fazer ao desenvolver uma newsletter, é cortar as imagens, jogá-las no seu FTP ou no FTP do seu cliente, pegue e teste o endereço absoluto delas, e usa esse no “scr” das suas imagens no HTML do e-mail. Até porque, se o endereço estiver errado ou com problemas, você já vai saber na hora em que estiver testando seu e-mail, e como você usa o dreamweaver, ele mesmo já tenta pegar as imagens de onde elas estão, e mostra quando alguma imagem quebrou.

      Agora, em relação a outlook e derivados, aí já é papo pra um outro POST hehe.

      Abraços.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *