/Marketing Digital

voltar
/Marketing Digital

E-mail marketing em HTML

Juliana Padron em E-mail Marketing Marketing Digital

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!

Mensagem do anunciante:

A KingHost ajuda você a ganhar mais dinheiro com seu site. Confira!

Juliana Padron em E-mail Marketing Marketing Digital

Comentários

Dê Sua Opinião

O seu endereço de email não será publicado Campos obrigatórios são marcados *


sete × = 42

  1. Juliana,

    Super parabéns pela matéria. Muito interessante e ajuda bastante o pessoal que pretende entrar nesse ramo e, também, aqueles que estão precisando fazer uma campanha leve. Afinal, para uma grande campanha, realmente é preciso um software para tal.

    Abraços

  2. Juliana, parabens, essa materia me ajudou muito a fazer uma newsletter. Eu soh fiquei com uma duvida, funcionou direitinho no outlook express, porem quando testei mandar para um email do hotmail, ele nao reconheceu o css e eu recebi as imagens utilizadas em anexo. Voce poderia me ajudar?

  3. Oi Adriana! Tudo bem?
    Obrigada pelo comentário!
    Você pode enfrentar estes problemas também com outros softwares e aplicações de e-mail, já que o usuário tem controle sobre habilitar/desabilitar CSS e, para alguns aplicativos (como o Thunderbird, por exemplo), e-mails com imagens são considerados “ameaças”, por isso o bloqueio na exibição. O Hotmail é bem chato quanto à isso, mas uma vez que você autoriza a exibição do conteúdo, nas próximas vezes virá normal.
    Espero ter ajudado, mas qualquer dúvida, estou à disposição!
    Abraços e até mais!

  4. Olá Juliana em primeiro lugar quero lhe parabenizar por esta matéria, estou com uma dificuldade parecido com a da Adriana, o que acontece é o seguinte eu tenho um e-mail no gmail e outro no yahoo, o que acontece estou enviando minhas newsletter no e-mail do gmail e para fzer um teste mando para o e-mail do yahoo, qual é a minha sunpresa é qdo. eu recebe a mensagem no yahoo a figura chega perfeita, porém segue tb um arquivo em anexo, vc sabe por está ocorrendo isto pois recebi um newsletter de um rapaz divulgando o seu evento e a mensagem dele não chegou em anexo, perguntei a ele e ele faz a newsletter dele da mesma forma que vc ensinou, por favor me de um solução pois não gostaria que a imagem fosse anexada, gostaria somente que a imagem aparece para a pessoa

  5. Olá, André! Tudo bem?
    Vou aproveitar e já pedir desculpas a todos os que me escreveram pela demora em responder… Eu tardo, mas não falho… =)
    Bem André, se você consegue ver sua imagem no corpo do e-mail, sem problemas. O que acontece é que cada aplicação de e-mail (especialmente as gratuitas como Yahoo, Hotmail e Gmail) têm suas particularidades. No meu Thunderbird, por exemplo, acontece a mesma coisa: toda imagem que vem no corpo do e-mail também vem como anexo, para que eu possa optar por salvá-las facilmente. Sempre que construir um e-mail marketing em HTML, procure enviar como teste, antes, para diferentes endereços de e-mail em diferentes aplicações, assim você pode analisar o comportamento de cada uma e fazer ajustes necessários. Mas, repetindo: se a imagem está vindo também no corpo do e-mail, não há problemas! Espero ter ajudado!
    Abraços e até mais!

  6. Gostaria de colaborar com algumas dicas para a produção de uma campanha de e-mail marketing eficiente. É importante lembrar que os aplicativos anti-spams bloqueiam mensagens através de pontuações definidas de acordo com “termos e palavras proibidas” encontradas no corpo do e-mail ou mesmo no endereço e em links, como exemplo: confira, clique, ganhe, concorra, promoção, frete grátis, etc. Uma lista mais completa pode ser obtida em http://www.virid.com.br/noticias.php/47. Caso seja inevitável o uso somente de imagens procure incluir as tags “alt” e “title” que ajudam na pontuação de anti-spams e no entendimento da mensagem caso o destinatário não visualize as imagens.

  7. Ricardo, obrigada pela sua contribuição!
    Gostaria de avisar a todos que, se estiverem com problemas de visualização das imagens utilizando o disco virtual do Yahoo ou Yahoo Briefcase, tentem um destes outros serviços gratuitos: Yahoo Geocites (http://br.geocities.yahoo.com/) ou POP Sites (http://popsites.pop.com.br/). Eles estão mais próximos de um servidor de hospedagem do que os discos virtuais. Digo mais próximos porque, apesar de serem mesmo destinados à hospedagem de sites, possuem algumas limitações, mas que não conferem problemas se o uso for para hospedar apenas imagens. Obrigada e até mais!

  8. Juliana, parabéns pelo seu artigo. Nota 10!! Mas quanto aos usuarios leigos que estão lendo a matéria, concordo plenamente de vocês estarem procurando alternativas baratas e eficientes de marketing, que é o caso do Newsletter, só que, cuidado gente. Evitem qualquer arte, qualquer HTML, ou o famoso “qualquer, só para ser lembrado” pois montar coisa bonitas e atrativas exigem bons profissionais por trás. Não faça qualquer coisa só pra dizer que sua empresa está viva, pois o cliente pode achar que na verdade ela está morta!
    Outra coisa super importante. Cuidado ao usar o Outlook para o envio de 2 mil e-mail´s. Use ferramentas adquadas e o Outlook não é a melhor solução.
    Como eu sempre falo, se você é um profissional, faça um négocio profissional, pois algo amador, mesmo que não seja sua aréa de atuação mas leva o nome da sua marca, cai como SUA empresa é amadora. Bons négocios gente!!

  9. É isso aí, Rodrigo! Agradeço por enriquecer este conteúdo! Outro risco de usar o Outlook para enviar muitas mensagens, especialmente se você está utilizando um e-mail próprio, de seu domínio, é sobrecarregar os servidores de sua empresa de hospedagem e ser considerado um spammer, além de causar instabilidade em todo o serviço. Por isso, para campanhas grandes, procure alternativas mais profissionais! Em meu blog, postei um artigo falando sobre outros softwares de gerenciamento de E-mail Marketing: http://www.julliejoe.com.br/blog/2007/05/03/softwares-para-enviar-e-mail-marketing/

  10. Tentei enviar meu e-mail mas além de chegar anexado meu computador não reconheceu o formato, tenho que ter algum programa instalado e se eu tiver que ter este programa como fica as pessoas que receberão meu e-mail elas não vão conseguir ler tb?

  11. Olá, Luciene! Conforme explicado no artigo, você pode desenvolver seus e-mails marketing com o Outlook Express, mas se sua campanha for muito grande, o ideal é utilizar um software específico. Basta criar o layout em HTML, com os endereços das imagens apontando para seus locais na web, copiar o código e colar no programa. Veja alguns softwares indicados neste post do meu blog: http://www.julliejoe.com.br/blog/2007/05/03/softwares-para-enviar-e-mail-marketing/

  12. Parabéns Ju achei eficiente e importante a sua matéria tanto esta quanto a de boas práticas de e-mail mkt…
    Funcionou sem problema nenhum….
    vlw

  13. Juliana, achei ótima seu artigo, mas não consegui publicar a figura, pois o porta arquivo do yahoo exige a senha para vc visualizar o arquivo, ou seja, não é mais público, aí tentei em outros discos virtuais, mas nada…alguém teria uma sugestão de disco virtual que eu possa publicar a figura?
    Obrigada!!!!

  14. Juliana, adorei sua matéria e estou usando, só que 53% dos meus contatos são do hotmail e não conseguiram ver a animação do gif que enviei no corpo da mensagem, aparece um link com o nome da imagem para ser clicado, e estava querendo achar um jeito dos meus contatos do hotmail também ter acesso a animação do gif, vc saberia algum truque ou script para que o hotmail não bloquei a imagem. Você poderia me ajudar? ;-)

  15. Olá, Jacira! Isso realmente é muito comum acontecer em clientes de email como UOL, BOL, Hotmail e até mesmo Gmail. O fato de seus contatos não conseguirem visualizar a mensagem no corpo do email, mesmo que você tenha usado o endereço da imagem no servidor como referência, se deve a diversos fatores, entre eles, a política de segurança de conteúdo e antispam de cada cliente de email e até mesmo sua reputação como remetente. Você pode enviar uma imagem estática com link para uma página da web que contém a animação. Infelizmente, o email marketing não permite a mesma liberdade de criação que uma página da web, e deve sofrer uma série de adaptações para que não seja considerado como spam ou conteúdo de risco para o usuário.
    Obrigada pelo comentário e, quaisquer outras dúvidas, estou à disposição!

  16. Olá Juliana. em primeiro lugar, obrigada por simplificar a criação do e-mail mktg em HTML. Achei fácil entender mas não consegui fazer na prática: copiei até mesmo o seu exemplo no outlook express e, quando fui visualizá-lo, saiu apenas um pequeno retângulo roxo onde estava escrito “visite o imasters!” ao lado de X vermelho. O que posso fazer para conseguir visualizar a imagem correta?

  17. Oi, Ana! Obrigada pelo comentário!

    Em alguns comentários anteriores deste artigo, aconselhei o pessoal a utilizar o serviço do Yahoo!Geocities ao invés do Porta-Arquivos como servidor de imagens, porque existe um problema de permissão de visualização.

    Se você já tem uma conta no Yahoo!, basta utilizá-la no Geocities, que possui um serviço gratuito: http://geocities.yahoo.com/

    Recentemente, o Yahoo! mudou a navegação dentro do Geocites, mas uma vez que você fez o login, basta clicar na aba “Manage”, depois no link “File Manager” e, finalmente, em “Open File Manager”. No canto direto da tela, clique no botão “Upload Files” e, na página que carregar, selecione em seu computador as imagens do email marketing para enviar para a web. Após selecionar todas, clique em “Upload Files” logo abaixo dos 5 campos.

    Volte ao File Manager e atualize a página. Você verá todos os arquivos que você selecionou listados na tela. Para pegar o endereço de cada um, clique com o botão direito sobre o link “View” ao lado de cada arquivo e clique em “Copiar Atalho” ou “Copiar Link”. Pronto, você acabou de pegar o endereço de sua imagem na web!

    Aí sim, você substitui os endereços no atributo src das imagens no HTML pelos que você pegou no File Manager. Só parece complicado, mas não é… rs.

    Acredito que o problema de visualização de sua imagem seja mesmo por conta do Porta-Arquivos. Se você usar o Geocities ou, melhor, um servidor próprio, tudo se resolve. Mas se persistir, volte a entrar em contato!

    Abraços!

  18. Boa Tarde, gostaria de saber se tem alguma alteração a ser feita para usar no Windows Mail. Até então esse processo funcionou mto bem, porém qdo substitui o Windows XP pelo Vista não consigo mais fazer esse tipo de email. A figura não aparece.

  19. olá, muito bom o artigo! mas estou enfrentando a mesma dificuldade da evelin…montei minha newsletter no dreamweaver e copiei o codigo para o Windows Mail, mas as imagens nao aparecem, soh o css! o q eu devo fazer??

  20. tento enviar email pelo outlook e a mensagem que recebo e a seguinte:

    A tarefa ‘pop.mail.yahoo.com.br – Enviando’ relatou um erro (0x800CCC78) : ‘Não é possível enviar a mensagem. Verifique o endereço de email nas propriedades da conta. O servidor respondeu: ? item(ns) restante(s)) Carregando conjunto de dados…’

    parece que o erro e no pop…

    se alguem poder me ajudar agradeço!

  21. Juliana,

    Achei muito bom seu tutorial, porém estou com uma dúvida e gostaria de saber se pode me ajudar.
    Estou montar um e-mail marketing, porém não tenho o outlook express pois tenho instalado em meu PC o officce 2007 que não tem o outlook express mas sim o outlook 2007, pode me dar uma dica de como montar um e-mail marketing nele.

    Grato

    Deonilson

  22. Olá Juliana,

    Excelente o artigo, mas gostaria de saber qual o procedimento para criar o e-mail markentig no Office Outlook 2003.

    Atenciosamente,

    CarlosS

  23. Juliana PARABÉNS PELO ARTIGO me ajudou e muito num trabalho q estou realizando, porém, está ocorrendo um problema: consigo enviar o email, abro e consigo ver o seu conteúdo, porém depois de algum tempo (umas horas depois) quando tento ver de novo, a imagem não aparece. Usei o porta arquivos do yahoo e enviei o email pelo Outlook Express 6. Desde já agradeço!!! bjossss

  24. Juliana PARABÉNS PELO ARTIGO me ajudou e muito num trabalho q estou realizando, porém, está ocorrendo um problema: consigo enviar o email, abro e consigo ver o seu conteúdo, porém depois de algum tempo (umas horas depois) quando tento ver de novo, a imagem não aparece. Usei o porta arquivos do yahoo e enviei o email pelo Outlook Express 6. Desde já agradeço!!! bjossss

    1. Oi, Giselle! Tudo bem? Obrigada pelo comentário!
      Sugiro que você use, ao invés do Porta-Arquivos do Yahoo, o serviço Yahoo Geocities, pois o porta-arquivos tem uma questão de permissão de acesso que faz com que este serviço não funcione muito bem como servidor web.
      Pode usar os mesmos dados de acesso da sua conta do porta-arquivos para acessar o Geocities. Faça o upload das imagens novamente e troque os endereços em seu código HTML. Como o Geocities é muito mais parecido com um servidor de hospedagem, funciona melhor.
      Abraços!

  25. Oi Juliana. Parabéns pelo artigo, está muito didático. Fiz tudo como você explicou, mas devo ter feito alguma coisa errada já que as imagens ficaram no corpo do e-mail. Isso é ruim, pois o e-mail acabou ficando com 130kb. Eu gostaria que acontecesse como em todos os e-mail marketings que recebo, cujas imagens são carregadas só depois que eu visualizo o e-mail…. Como devo colocar as imagens no HTML para conseguir esse resultado?
    Muito obrigada!

    1. Oi, Kacia! Tudo bem? Obrigada pelo comentário! Vamos lá: se você estiver usando o Yahoo Porta-Arquivos que recomendei no artigo, vou lhe pedir que troque para o serviço Yahoo Geocities. Fiz essa recomendação num comentário próximo do início, mas perdeu-se em meio a tantos outros que foram postados! O Yahoo Geocities é mais próximo de um servidor de hospedagem do que o Porta-Arquivos, que é mais um disco virtual pessoal e tem alguns problemas de permissão de visualização. Quando você subir as imagens para o Geocities, é só clicar com o botão direito do mouse no nome do arquivo de imagem que aparecer na lista, e você tem o endereço dela na web. Daí, basta usar este endereço como o “src” da imagem no seu HTML. Assim: . Se tiver outras dúvidas, escreva novamente! Abraços!

  26. obrigada pela resposta tão rápida! eu já havia lido as outras dúvidas sobre armazenamento de imagens mas nem comentei sobre isso, pois tenho um domínio próprio e foi lá que fiz o upload das imagens. também tenho certeza de que coloquei o caminho completo no código HTML. será que só dá certo quando usamos um porta-arquivos gratuito? ou pode estar dando errado por algum outro motivo?
    mais uma vez, muito obrigada!

    1. Oi, Kacia! O procedimento está correto mesmo, o ideal é usar um servidor próprio e não gratuito. Expliquei este método utilizando servidores gratuitos porque nem todos têm acesso a um servidor próprio. E o correto é que as imagens apareçam mesmo no corpo do email, e não como anexo. Talvez as imagens que você usou sejam muito grandes, e isso realmente aumenta o tamanho final da mensagem. O ideal é que o arquivo HTML tenha até 30Kb e as imagens todas, juntas, somem até 100Kb. Se quiser, me escreva um email em jpadron@w3p.com.br com seu código em anexo, que dou uma olhada para ver o que aconteceu! Abraços!

  27. Juliana, bom dia!

    Li sua matéria sobre e-mail marketing e desenvolvi um com o seguinte código html:


    Só que ele não faz referência a imagem. O que pode estar errado?

    Desculpe incomodá-la e grato pela atenção.

    1. Oi, Marcos! Tudo bem? Obrigada pelo comentário!
      A imagem que você inseriu no seu código html é essa:

      http://www.masalupri.com.br/web/emark/EmailMkt.jpg

      Se você acessar este endereço, pode perceber que abre uma página de erro. Muito provavelmente, o endereço da imagem no servidor masalupri.com.br está incorreto – ou a imagem não foi enviada para este servidor. Utilizando seus dados de ftp, acesse este servidor e confira se o caminho das pastas está mesmo correto.

      Quaisquer dúvidas, entre em contato novamente!
      Abraços!

  28. Olá Juliana, muito legal o post.
    Estou com problemas, um amigo pediu para elaborar um folder para enviar por email, então recortei, montei em vários pedaços, somente imagens, até ai blz.

    Ai mandei no meu email, tive que autorizar pra aparecer as imagens, mas apareceu certinho.

    Tenho 2 perguntas:
    1 – Não seria bom mandar textos também caso a pessoa não vizualize a estrutura ?
    2 – Tem algum jeito de a pessoa visualizar direto quando recebe um email desse tipo ?

    Desculpa, sou marinheiro de primeira viagem nesse serviço, abraço.

    Att. Vilson

  29. Oi Juliana, eu ainda tenho duvidas. Antigamente, eu criava o e-mail mkt no corel, inseria links para direcionar a outros sites (tipo ‘saiba mais’). E no proprio corel publicava na WEB. Abria o arquivo publicado, selecionava tudo, copiava e colava no corpo do outlook 2003 no formato html. Funcionava direitinho. Chegava nos clientes com os links e imagens, graficos… Só que no outlook 2007 não está funcionando deste modo. Vc sabe porque? E qual seria a diferença do seu metodo para este?

    Obrigada,
    Tereza

  30. Oi Juliana, Esqueci de mencionar uma outra dúvida. TEnho uma conta no yahoo e fui tentar fazer o seu metodo mas não consegui acessar o porta-arquivo. Ao clicar nesta opção nada apareceu.

  31. Oi Juliana,
    Estou com um problema de mapeamento de links, dentro do email marketing. Quando chega dentro do email do usuário, o link mapeado não funciona. Mas quando clicamos em clique para visualizar, o html abre numa outra página e os links funcionam. Tem alguma idéia para resolver esse problema?

    1. Oi, Fabiana! Muito provavelmente, esse problema acontece porque a aplicação de email em que você abre a mensagem não suporta o recurso HTML de mapeamento de imagens com links. Sugiro que você envie a mensagem para contas configuradas em outros clientes de email (Gmail, Hotmail, Outlook etc) e verifique se o problema continua. Em testes realizados já há algum tempo, o IG, iBest, Gmail (versão antiga) e Yahoo! Classic apresentarem problemas

  32. O uso do gif animado não pode prejudicar o recebimento da newsletter?

    Pois se não me engano, a alguns anos atraz existia um virus para gif, tanto que o Outlook 2007 bloqueia a animação do gif, ele deixa o gif parado no primeiro frame.

    Att

  33. Desculpe porém sou leigo! Segui todos os passos explicativos e não consegui completar o procedimento e ver a imagem. Inclusive mudei o link da imagem pelo de uma foto minha do E-mail marketing do UOLHOST.
    Quando você diz que ao clicar na aba editar vai aparecer a imagem, alí não consegui entender nada.
    Desculpe porém sou burro e não passei dali. Talvez uma explicação detalhada como finalizar ajudasse aos menos preparados, os preparados não precisam de sua ajuda certo?

    Grato

    1. Oi, Tulio! Desculpe, mas se vc já está usando o serviço de Email Marketing do UOLHost, este tutorial não é pra vc… rs. No início do tutorial, digo que este artigo refere-se ao uso do Outlook Express para fazer esse tipo de envio. Com o Email Marketing do UOLHost, vc não precisa se preocupar em enviar pelo Outlook.

  34. Juliana, adorei seu texto! Muito claro e já vou aplicar todas as lições. Uso uma plataforma de envio de e-mail marketing e sms, mas estava querendo aprender a criar as mensagens em html. Obrigada!

  35. Boa tarde Juliana,

    Muito bom esse tópico mas tenho uma dúvida, como seria o html para criar um botão para a pessoa não receber mais o email, igual aqueles em grandes empresas que aparece “Caso não queira mais receber este email, clique aqui “. Só falta isso para terminar. Grato pela ajuda.

    Thiago.

  36. Obrigado pelo seu tutorial, infelizmente tem algum detalhe que eu acho que esta errado. realizei um gif coloquei ele no meu dominio. copie e colei o endereço url . e mandei a menssagem para uma conta de hotmail..
    ai email chegou bem com a imagem no corpo da menssagem. mais tb com a mesma imagem no final do corpo da menssagem , ae fica chato ter a mesma imagem repetida , o que esta errado?
    fico no aguaro dealguem me ajudar
    Obrigado

    1. Olá!
      Para a maioria dos clientes de e-mail (hotmail, bol, gmail, etc) o uso do 4shared não é recomendado.
      Se ainda estiver precisando de hospedagem para seus arquivos de newsletter, nos envie um e-mail, com o espaço em disco necessário. Ativamos seu Plano Especial, para arquivar todas suas imagens em uso para E-mail Marketing.

      Envie-nos um e-mail ou adicione no MSN:
      clientes@profissionalhosting.com

      Até breve!

  37. Perfeito seu exemplo. Agora, abusando, como coloco no seu exemplo uma mensagem de remoção do endereço de um destinatário que não deseje receber mais. Ou aquela mensagem : caso não abra clique aqui.

  38. Olá…..desculpe o incômodo…..gostaria de saber como faço p/ inserir uma figura (logo de empresa) na assinatura do hotmail. Por exemplo, nessa ass. q tem abaixo..gostaria de colocar o logo da empresa, agradeço a atenção.

    BRUNO BARBIERI
    (11) 8135-5115 / 8713-6026 (Carollina).
    bbarbieri@hotmail.com
    BBC FITNESS ASSESSORIA ESPORTIVA

  39. Oi Juliana,

    muito boa a matéria. Parabéns. Estou com um problema, antes de enviar um e-mail consigo visualizar a imagem corretamente, porém, quando eu recebo o e-mail de teste, ela não é visualizada. O quê pode estar acontecendo? (Tentei recebê-la no Windows Mail e no MS Outlook 2007)

    Att,

    Ivan Rolim
    11.9856.8529
    ivan@uol.com.br

  40. Oi, Ivan! Veja se não é apenas o bloqueio da imagem, que ocorre naturalmente nos clientes de email. É preciso clicar num botão ou link para habilitá-la na mensagem. Se ela estiver com erro mesmo, confira o endereço da imagem na web. Utilize um servidor de hospedagem ao invés de um disco virtual, como mencionado nesse tutorial. Ele é antigo e o Porta-Arquivos do Yahoo! e o Yahoo! Geocities já não funcionam mais… Abs!

  41. Para quem procura enviar email marketing profissionais eu recomendo..

    1º Bom sistema (software) de envio, com relatorios etc, etc..

    2º Servidor SMTP dedicado.

    Eu tenho um bom sistema de envio, que você poderá instalar no seu proprio servidor e usar como qser. acessem:

    http://www.stopveiculossa.com.br/email_marketing/admin
    User: demo – Senha: demo

    Eu vendo esse sistema, porem não estou aqui unicamente para fazer propaganda..Ah muitas duvidas de como fazer e enviar um bom email marketing, porem pouco informação, ou informações muito vagas..+ aos poucos vamos sanando essas duvidas!

    Parabéns Juliana pela iniciativa!

  42. Juliana sou marinheiro de primeira viagem.
    Gostaria de contar com sua assessoria.
    Preciso lançar uma campanha por e-mail, como você pode me ajudar.
    Preciso adquirir uma lista de e-mail de todo o brasil.
    Preciso adquirir um programa para extrair e-mail.
    Preciso elaborar minha mensagem.
    Você pode me assessorar, quando custa?
    Se possível me adiciona no MSN: titolacerda@hotmail.com
    Grato
    Tito

  43. Juliana, tenho o Windows mail do Vista. Ele já é configurado para HTML, mas sem esses códigos que você colocou. Só consigo enviar se for como anexo e quero enviar como corpo de texto. Não sei fazer todos aqueles passos. Tem outra maneira de fazer sem todos aqueles códigos?
    Parabéns e agradeço.

  44. Olá Juliana, Parabéns!

    Fiz meu minha HTML que busca GIFS no meu servidor aplicados em uma tabela.

    Consegui por acaso enviar uma única vez o email com apenas o código, o email ficou leve, com 5kb, e abre normalmente as imagens.

    Mas agora sempre que repito o mesmo processo, meu outlook anexa cópias das imagens no email, e ele vai para 246kb.

    O que tenho feito de errado ? Qual seria a solução ?

    Desde já agradeço

  45. Juliana, parabéns pela matéria.
    Quero porém mais alguns macetes que p/ mim ficou pendente.
    Tenho o html (adicionado a foto em internet) pelo 4Shared, quero introduzir o HTML no meu UOL HOST, ou pelo meu Microsoft Outlook do Windows 7.
    Não consegui achar a parte em que tem as abas de Editar, Origem e Visualizar.

    Peço gentilmente que me responda por e-mail.

    Atte,

    Diego Bianchi

    1. Oi, Diego! Tudo bem?
      O imasters não divulga seu email no comentário, então vou responder por aqui mesmo!

      Esse tutorial explica como enviar um email em HTML a partir do Outlook Express porque é o único cliente de email desktop da Microsoft que permite fazer isso. O Microsoft Outlook não tem essas abas de edição e não permite que você envie uma mensagem desta forma.

      Se você é cliente UOL Host, recomendo que use um plano do UOL Host Email Marketing para fazer seus envios, pois é uma plataforma mais adequada que o Outlook ou qualquer outra aplicação de email. Se você tiver mais dúvidas, pode entrar em contato comigo por email (está no meu perfil, lá em cima)!

      Abs!
      Juliana Padron

  46. Juliana, boa tarde! Estava buscando uma resposta e acabei aqui! Poderia me ajudar? É sobre e-mail marketing, configuração. Crie um html, e enviei com outlook, até ai normal. Muitos dos meus amigos estão reclamando que as imagens não estão se abrindo. Mas outros abrem-se normalmente. Existe algum meio/modo de que as imagens se abram no corpo do e-mail, não fique aparecendo aquele x vermelho? Obrigado.

    1. Oi, Helio! Tudo bem?

      Você deve estar falando do bloqueio de imagens, que ocorre em quase toda aplicação de email quando um usuário recebe uma mensagem de um remetente que não está cadastrado nos contatos do programa de email. Neste caso, para ver as imagens da mensagem, o usuário precisa clicar no link ou botão do programa de email que diz algo como “Carregar as Imagens”. Para que os próximos emails não cheguem com as imagens bloqueadas, seus destinatários precisam cadastrar seu email remetente nos contatos ou clicar no link/botão “Sempre exibir imagens para este remetente”.

      Espero ter ajudado!

      Abs,

  47. Achei muito proveitoso o seu artigo e lançou uma luz sobre a uma dúvida que pairava sobre e-mail marketing. Por outro lado, gostaria de consultá-la sobre possível serviço que você possa prestar nessa área:
    Escrevi um livro e gostaria de promovê-lo via internet (email marketing).
    Como você trabalha? você presta este tipo de serviço? Criar o layout do email, o texto de marketing? E o envio das mensagens? Terei de ter um programa de envio? E quanto ao arquivo de emails?
    Se você pesta este tipo de serviço, favor fazer um orçamento para mim, com os detalhes sobre o que será feito e os valores.
    Grato

    1. Oi, Saavedra!
      Fico feliz em saber que meu artigo lhe ajudou!
      Podemos conversar sobre este tipo de trabalho, sim! Porém, preciso que você me envie um email para eu saber o seu! o imasters não divulga os emails das pessoas que comentam, então não tenho como lhe escrever agora! O meu endereço é o que está no perfil: jpadron@w3p.com.br
      Abraços!

  48. Oi Juliana, segui seu tutorial e deu tudo certo, a não ser por uma detalhe, a imagem ficou super pequena e se tento aumentar ela não fica nítida, como resolver esse problema?

    Grata

  49. Porque o hotmail esta classificando meu e-mail marketing como spam ou lixo eletronico? tem alguma dica para a pessoa conseguir visualizar logo de primeira sem precisar autorizar a exibição?

    T+

  50. Juliana, utilizo o Windows 7, cujo não possui outlook express. Existe algum outro e-mail que permita a utilização de código HTML?

    Obrigado.

    1. Oi, Matheus! Além do Outlook Express, só conheço o Thunderbird que aceite conteúdos HTML em uma mensagem. Porém, acredito que ele permita inserir apenas alguns trechos, e não compor a mensagem toda em HTML. Tente fazer um teste! Mas eu recomendo que você utilize uma plataforma específica para envio, dependendo do volume de mensagens que vai enviar. A entrega será mais rápida e com mais qualidade (mais chances de ser entregue na caixa de entrada).
      Abs!

  51. Olá Juliana! Gostei muito do seu tutorial, mas estou com um probleminha… Não utilizo Outlook Express nem nada… Eu entro diretamente (online) no meu e-mail do yahoo, e quero criar um e-mail html. Já criei o código, que com certeza está certo, mas quando envio um e-mail com o código html, só aparece o código, sem imagem nem nada… O que pode estar errado?

    Muito obrigado!

    1. O provedor do Yahoo! não tem suporte para código em HTML, meu amigo. Você vai precisar usar um cliente de e-mail que seja compatível com código-fonte em HTML, por exemplo: Outlook Express e Thunderbird.

  52. Parabéns pelo artigo. Trabalho com venda de imóveis e isso será de suma importância para fazer o marketing! Sou programador PHP também e conheço” xhtml,CSS” e seu artigo foi muito importante para o desenvolvimento do meu trabalho com marketing, obrigaaaada!!!!

    Grande Abraço!

  53. Olá Juliana. Prabéns pelo artigo. Tudo certinho, mas quero dar um pitaco na pergunta do Matheus Oliveira mais acima. Eu trabalho com um Programa da Corel, o PaintShop Photo Pro X3, que é um fabuloso editor de imagens. Pois bem, antes eu trabalhava com o XP e com o Outlook Express. Com o advento do Windows Seven tivemos que achar um recurso para continuar com nossas formatações. Então fomos orientados a instalar o Windows Mail do Vista que “quase” faz as mesmas coisas do anterior Outlook. Mas temos ainda algumas dificuldades e gostaria de perguntar a você Juliana, o seguinte. Quando encaminhamos nossos trabalhos de imagens (HTML) inseridos no corpo do e-mail, jamais pretendemos que vá anexos juntos, pois isso já está configurado nos códigos em Origem. Entretando, não sei bem porque, isso está acontecendo inisistentemente, e não sabemos como resolver isso. Deve ser um problema de configuração do Windows Mail, mas não consegui que ninguém me resolvesse isso. Você teria alguma solução para esse impasse? Se você conseguir isso, vai ser uma grande conquista para todos nós que trabalhamos com Web Designer.
    Obrigada pela ajuda que nos dá.
    Marilika

  54. Bom dia, Juliana. Tenho prática na criação de e-mail marketing, pois crio vários para a empresa, porém, tenho uma dúvida: tem como eu colocar vários hiperlinks diferentes na mesma imagem? Por exemplo, eu crio uma grande imagem, nesta imagem contém 10 produtos, porém, como eu coloco um link para cada produto, sendo a mesma imagem? Uso o “Front Page”. Obrigado!

  55. Boa noite, Juliana. Parabéns pelo artigo. Tenho uma dúvida. Ao tentar enviar o email em html pelo Tunderbird, o mesmo aparece configurado neste cliente de email. Porém quando abro o mesmo email no hotmail ou gmail o mesmo aparece desconfigurado. Poderia me ajudar? Obrigado

    1. Boa tarde, Roberto. Pelo Thunderbird é simples: basta você selecionar todo o código do e-mail já criado, ir em “Nova msg”, “Inserir”, “Código-fonte HTML…”. Aí é só colar o código.

  56. Olá Juliana,

    Gostei muito das suas Materias,

    Preciso enviar quase 1500 e-mails mensais de uma única vez utilizo o Outlook configurado com o Gmail/Globo/Yahoo, mas todos tem limites de envio, precisaria neste caso contratar um servidor de SMTP?? Tem algum para indicar???

    Abraço

    Pericles

  57. Olá juliana! Agradeço pelo post
    Estou utilizando o outloock do windows 7 então acho q ele é diferente do outloock mopstrado neste tuto. Tentei localiza Editar -> Editar HTML mas não encontrei. Você poderia me dizer se é possível com essa versão do outloock e como eu deveria fazer?
    Agradeço desde já!

  58. Só uma declaração a fazer, Parabéns, simples, básico, e rápido. Precisamos de pessoas assim, esclarecidas para tirar dúvidas do dia a dia como essa.

  59. Tanta baboseira só para chegar naquilo que todos já sabem. Tem que enviar pelo outlook. Pesquisei “como enviar e-mail marketing pelo G-mail, e caiu aqui neste portal.
    Sacanagem!

  60. Tanta baboseira só para chegar naquilo que todos já sabem. Tem que enviar pelo outlook. Pesquisei “como enviar e-mail marketing pelo G-mail, e caiu aqui neste portal.
    Sacanagem!

  61. Juliana, Primeiro parabéns pelas orientações, isso ajuda muito quem está iniciando.
    Tenho uma dúvida sobre html, pois recebo e.mails com imagens que pesam 4 ou 5 kb. Como obter este tamanho quando utilizamos imagens no arquivo? Fiz um arquivo em html no dreamweaver, criei o link para a imagem que está no servidor, mas ele fica pesado, com 450 kb. Gostaria de uma orientação. Obrigada.

  62. Olá Juliana. Excelente sua dica Email Marketing. Muito bem explicado, linguagem simples
    e popular, não tem como errar. Essa dica foi hiper importante para mim. É uma pena como existe pessoas doente em todas as camadas da sociedade como este tal de pagani acima, não dê nenhuma importância para esse débil mental. Obrigado pela dica e continue ajudando as pessoas. Amor com amor se paga.

  63. Muito bom mesmo, é a segunda matéria que leio sua está de parabéns pela qualidade e clareza das informações. Tenho dúvida quanto a qual ferramenta que devo usar para email mkt os sites ou programas do “baixaki”.

  64. Adorei a sua dica! Fiz e deu certo.
    Mas tenho uma duvida. Como posso criar um e-mail Marketing usando o texto editável?
    Eu gostaria de montar um sem que o texto fique vinculado com a imagem em um único arquivo JPG e sim em HTML. Você pode me ajudar?

  65. HOJE, 14-06-2013. Seu artigo continua de muita utilidade. Ficam os agradecimentos. Uma ação na Internet, difícil vislumbrar seus limites.

  66. Olá. Artigo muito bom, parabéns!
    Tenho uma dúvida. Estava discutindo algumas práticas de E-mail marketing com o WebMaster da empresa e o mesmo me disse que alguns softwares para e-mails, Outlook e etc., não “entendem” muito bem o CSS. Gostaria de saber se isso procede e algumas dicas, caso seja real esta observação. Obrigado.

  67. Obrigada pelo artigo, me ajudou bastante!
    Só não consegui deixar a imagem maior no corpo do texto… Por mais que eu disponibilize uma imagem maior no servidor ela fica com o mesmo tamanho na janela da mensagem… Como posso modificar isso?
    Grata!

  68. Olá tudo bem gostaria de sabe se você poderia me ajudar.
    Eu criei um link para postar no meu Flickr só que quando eu colo ela ,ele aparece a imagem como é pra ficar,mas eu queria que ficasse somente os códigos para as pessoas copiarem ele.Obrigado!

  69. Tentei de tudo e não resolvia (não abria nenhum hiperlink, nem no outlook nem no word) – por fim consegui!
    Entrei no suporte da microsoft/outlook, e segui as instruções – o que se resumia a clicar no ícone de “Fix It” que havia lá, e instalar o programinha – daí… pronto! Resolveu!

    Aí vai o endereço desta ajuda no site oficial da microsoft
    http://support.microsoft.com/kb/823301/pt-br

    Boa sorte!

  70. Perfeito a matéria! Fiz e deu certo, só que eu usei sua dica pra criar uma assinatura com a logomarca da minha empresa pelo hotmail. Usei o site de hospedagem imgur. Só que notei que alguns e-mail’s não conseguem visualizar essa imagem. Gostaria de saber como devo proceder nesse caso, pois mesmo colocando como GIF não deu certo.

leia mais
Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: